/*.page {
  .header {}
  .content {}
  .about {}
}*/


/* @font-face {
    font-family: 'vcrosdneue';
    src: url('./vcrosdneue/VCRosdNEUE.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'modetext';
    src: url('/mode_text/ModeText.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: "HelveticaUltraLight";
  src: url('/fonts/helvetica/HelveticaNeueUltraLight.otf');
  font-weight: normal;
  font-style: normal;
} */

body {
  font-size: 1rem;
  line-height: 1.5rem;
  font-family: Helvetica, sans-serif; /* "modetext",  */
  /* font-style: light; */
  /*text-transform: uppercase;*/
  max-width: 920px;
  margin: 0 auto;
}

/*
 * Lara hue ladder: indices advance ~1s apart on a 60s loop → phase step 360/60 = 6deg per unit.
 * Baked into @keyframes so filter is correct on frame 0 (no animation-delay flash).
 */

/* Lara display type — header borders share the same hue ladder as words (--lara-i-* from lara.js). */
header.gig-header {
  position: relative;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-top: none;
  border-bottom: none;
}

header.gig-header::before,
header.gig-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  background: hsl(90, 75%, 42%);
  animation: hue 60s linear infinite;
}

header.gig-header::before {
  top: 0;
  animation-name: hue-hdr-top;
}

header.gig-header::after {
  bottom: 0;
  animation-name: hue-hdr-bottom;
}

/* Footer top rule: next index after main .page content (lara.js). */
footer.gig-footer {
  position: relative;
  border-top: none;
}

footer.gig-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  pointer-events: none;
  background: hsl(90, 75%, 42%);
  animation: hue-footer-top 60s linear infinite;
}

h1.gig-header__title,
p.gig-header__subtitle,
.page h1,
.page h2,
.page h3,
.page h4,
.page h5,
.page h6 {
  margin: 0;
  padding: 0;
  font-size: 5rem;
  line-height: 4.6rem;
  font-family: Helvetica;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 0.7rem;
}


/* Current page nav: bottom rule animates with the same ladder as words (--lara-i-nav-active from lara.js). */
.gig-header .gig-nav__link:hover {
  text-decoration: none;
  border-bottom: 1px solid white;
}
.gig-header .gig-nav__link {
  position: relative;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.gig-header .gig-nav__link--active {
  position: relative;
  text-decoration: none;
  border-bottom: none;
}

.gig-header .gig-nav__link--active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  pointer-events: none;
  background: hsl(90, 75%, 42%);
  animation: hue-nav-active 60s linear infinite;
}

.page {
  max-width: 920px;
  margin: 0 auto;
}


/* COLOURS */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-color: hsl(220, 100%, 5%);
  animation: bg-drift 120s ease-in-out infinite alternate;
}

.page .lara-grad-word,
.gig-header .lara-grad-word {
  display: inline-block;
  white-space: pre-wrap;
  animation: hue 60s linear infinite;
}

@keyframes hue {
  from {
    filter: hue-rotate(calc(var(--i, 0) * 6deg));
  }
  to {
    filter: hue-rotate(calc(var(--i, 0) * 6deg + 360deg));
  }
}

@keyframes hue-hdr-top {
  from {
    filter: hue-rotate(calc(var(--lara-i-header-top, 0) * 6deg));
  }
  to {
    filter: hue-rotate(calc(var(--lara-i-header-top, 0) * 6deg + 360deg));
  }
}

@keyframes hue-hdr-bottom {
  from {
    filter: hue-rotate(calc(var(--lara-i-header-bottom, 0) * 6deg));
  }
  to {
    filter: hue-rotate(calc(var(--lara-i-header-bottom, 0) * 6deg + 360deg));
  }
}

@keyframes hue-footer-top {
  from {
    filter: hue-rotate(calc(var(--lara-i-footer-top, 0) * 6deg));
  }
  to {
    filter: hue-rotate(calc(var(--lara-i-footer-top, 0) * 6deg + 360deg));
  }
}

@keyframes hue-nav-active {
  from {
    filter: hue-rotate(calc(var(--lara-i-nav-active, 0) * 6deg));
  }
  to {
    filter: hue-rotate(calc(var(--lara-i-nav-active, 0) * 6deg + 360deg));
  }
}

@keyframes bg-drift {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page .lara-grad-word,
  .gig-header .lara-grad-word,
  body::before,
  header.gig-header::before,
  header.gig-header::after,
  footer.gig-footer::before,
  .gig-header .gig-nav__link--active::after {
    animation: none;
  }

  .page .lara-grad-word,
  .gig-header .lara-grad-word {
    filter: hue-rotate(calc(var(--i, 0) * 6deg));
  }

  header.gig-header::before {
    filter: hue-rotate(calc(var(--lara-i-header-top, 0) * 6deg));
    background: rgba(255, 255, 255, 0.35);
  }

  header.gig-header::after {
    filter: hue-rotate(calc(var(--lara-i-header-bottom, 0) * 6deg));
    background: rgba(255, 255, 255, 0.35);
  }

  footer.gig-footer::before {
    filter: hue-rotate(calc(var(--lara-i-footer-top, 0) * 6deg));
    background: rgba(255, 255, 255, 0.35);
  }

  .gig-header .gig-nav__link--active::after {
    filter: hue-rotate(calc(var(--lara-i-nav-active, 0) * 6deg));
    background: rgba(255, 255, 255, 0.35);
  }
}

.low-power .page .lara-grad-word,
.low-power .gig-header .lara-grad-word {
  animation-duration: 24s;
}

.low-power header.gig-header::before,
.low-power header.gig-header::after,
.low-power footer.gig-footer::before,
.low-power .gig-header .gig-nav__link--active::after {
  animation-duration: 24s;
}

/* Images: same phase ladder as words (--i from lara.js); not used on embed/video */
.page img.lara-grad-media,
.gig-main img.lara-grad-media {
  animation: img-hue 60s linear infinite;
}

@keyframes img-hue {
  from {
    filter: grayscale(100%) sepia(100%) hue-rotate(calc(var(--i, 0) * 6deg)) saturate(200%);
  }
  to {
    filter: grayscale(100%) sepia(100%) hue-rotate(calc(var(--i, 0) * 6deg + 360deg)) saturate(200%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .page img.lara-grad-media,
  .gig-main img.lara-grad-media {
    animation: none;
    filter: grayscale(100%) sepia(100%) hue-rotate(calc(var(--i, 0) * 6deg)) saturate(200%);
  }
}

.low-power .page img.lara-grad-media,
.low-power .gig-main img.lara-grad-media {
  animation-duration: 24s;
}