:root {
  --cream: #fff5df;
  --muted: #bfbfbf;
  --gutter: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
  --font: neue-haas-grotesk-display, "Neue Haas Grotesk Display Pro", "Neue Haas Grotesk Text Pro",
          "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Background motion: time for one full sweep of the black wedge across a band */
  --cycle: 28s;

  /* Layer blur on the background bands */
  --bg-blur: 5px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: #000;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--cream);
  font-family: var(--font);
  font-size: 11px;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Background: banded gradient with a black wedge sweeping left ---------- */

.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: #000;
}

/* Blurred layer. It bleeds past the viewport so the blur never fades out at the screen edges. */
.bands {
  position: absolute;
  inset: calc(var(--bg-blur) * -3);
  display: flex;
  flex-direction: column;
  filter: blur(var(--bg-blur));
}

/* Static colour ramp, the same in every band (colours sampled from the reference image) */
.band {
  /* Per band, from --d (0 = middle band, 4 = outermost):
     --ramp  length of the red-to-black ramp, in vw (longer further from the middle)
     --r     start phase, so the black edge begins in the wedge shape of the reference */
  --ramp: calc(22 + 4 * var(--d));
  --r: calc((29 - 6.25 * var(--d)) / 190);

  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(
    90deg,
    #918d87 0%,
    #988e8b 7%,
    #9f8189 17%,
    #a37284 27%,
    #a46267 37%,
    #a44a3f 47%,
    #a03418 57%,
    #8d2a10 100%
  );
}

/* Overlap by 1px so fractional heights never leave a dark hairline between bands */
.band + .band {
  margin-top: -1px;
}

/* The black "tongue". The pattern repeats every 190vw and the element is wider than
   one period, so sliding it exactly one period to the left loops with no seam.
   Only transform is animated, which keeps it smooth on phones. */
.band::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 320vw;
  background-image: linear-gradient(
    90deg,
    rgba(168, 50, 16, 0) 0,
    rgba(168, 50, 16, 0) 60vw,
    rgba(168, 50, 16, 0.85) calc(60vw + var(--ramp) * 0.15vw),
    rgb(131, 35, 6) calc(60vw + var(--ramp) * 0.45vw),
    rgb(43, 18, 8) calc(60vw + var(--ramp) * 0.72vw),
    rgb(11, 13, 10) calc(60vw + var(--ramp) * 1vw),
    rgb(11, 13, 10) calc(60vw + var(--ramp) * 1vw + 48vw),
    rgba(11, 13, 10, 0) calc(60vw + var(--ramp) * 1vw + 70vw),
    rgba(11, 13, 10, 0) 190vw
  );
  background-size: 190vw 100%;
  background-repeat: repeat-x;
  will-change: transform;
  animation: sweep var(--cycle) linear calc(var(--cycle) * var(--r) * -1) infinite;
}

/* Soft seam between bands: light top edge, darker bottom edge */
.band::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.07),
    rgba(255, 255, 255, 0) 30%,
    rgba(0, 0, 0, 0.14)
  );
}

@keyframes sweep {
  to { transform: translate3d(-190vw, 0, 0); }
}

/* Noise on top of the blur: black, very fine (size 0.2), full density, 25% opacity */
.noise {
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 3.2 0 0 0 -1.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}

/* Film grain */
.grain {
  position: absolute;
  inset: -20%;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  will-change: transform;
  animation: grain 0.9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  17%  { transform: translate3d(-4%, 3%, 0); }
  33%  { transform: translate3d(3%, -5%, 0); }
  50%  { transform: translate3d(-5%, -2%, 0); }
  67%  { transform: translate3d(5%, 4%, 0); }
  83%  { transform: translate3d(-2%, 5%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* Darkens the whole background by 25% */
.veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.25);
}

/* Keeps text readable in every phase of the loop */
.shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 50%, rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0) 100%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0) 32%);
}

/* ---------- Content (half the size of the first version; text never below 10-11px) ---------- */

.stage {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding:
    max(24px, env(safe-area-inset-top))
    var(--gutter)
    max(48px, calc(env(safe-area-inset-bottom) + 28px));
  text-align: center;
}

/* Centered in the free space above the footer; collapses to normal flow (scroll) when short */
.middle {
  width: 100%;
  margin-block: auto;
  padding-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.logo-main {
  margin: 0;
  line-height: 0;
}

.logo-main img {
  display: block;
  width: clamp(81px, 16.15vw, 153px);
  height: auto;
}

.about {
  width: 100%;
  max-width: 50ch;
  margin-top: clamp(10px, 2vh, 20px);
}

.about p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: rgba(255, 245, 223, 0.9);
  text-wrap: pretty;
}

.definition {
  color: rgba(255, 245, 223, 0.8);
}

.definition strong {
  color: var(--cream);
  font-weight: 700;
}

.ipa {
  white-space: nowrap;
}

.about .body {
  margin-top: 14px;
}

.logo-sub {
  display: block;
  width: clamp(60px, 12vw, 90px);
  height: auto;
  margin: clamp(10px, 1.75vh, 16px) auto 0;
}

.footer {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.02em;
}

/* "Part of" sits above the Hercules logo, centered */
.part-of {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
}

.hercules {
  display: block;
  width: clamp(65px, 14vw, 95px);
  aspect-ratio: 646.41 / 99.84;
  background-color: var(--muted);
  -webkit-mask: url("assets/Hercules-Logo-Horizontal-F1.svg") center / contain no-repeat;
  mask: url("assets/Hercules-Logo-Horizontal-F1.svg") center / contain no-repeat;
}

.legal {
  margin: 0;
  opacity: 0.9;
}

/* Low landscape screens (phones on their side): tighter, and free to scroll if still too tall */
@media (max-height: 520px) {
  .middle { padding-bottom: 8px; }
  .stage { padding-bottom: 24px; }
  .logo-main img { width: 81px; }
  .about {
    max-width: 90ch;
    margin-top: 8px;
  }
  .about .body { margin-top: 8px; }
  .logo-sub {
    width: 55px;
    margin-top: 8px;
  }
  .part-of {
    gap: 8px;
    margin-bottom: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze in the reference composition */
  .band::before,
  .grain {
    animation: none;
  }
  .band::before {
    transform: translate3d(calc(var(--r) * -190vw), 0, 0);
  }
}