:root {
      color-scheme: dark;
      --bg: #03050b;
      --ink: #eaf6ff;
      --muted: rgba(234, 246, 255, 0.68);
      --cyan: #2ee8ff;
      --blue: #1477ff;
      --green: #74ff9f;
      --glass: rgba(5, 12, 24, 0.58);
      --line: rgba(116, 255, 159, 0.24);
      --duration: 620ms;
    }

    * { box-sizing: border-box; }

    html, body { min-height: 100%; }

    body {
      margin: 0;
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      color: var(--ink);
      background:
        radial-gradient(circle at 50% 0%, rgba(116, 255, 159, 0.16), transparent 28rem),
        radial-gradient(circle at 20% 75%, rgba(20, 119, 255, 0.18), transparent 32rem),
        radial-gradient(circle at 80% 55%, rgba(46, 232, 255, 0.12), transparent 30rem),
        linear-gradient(180deg, #03050b 0%, #050814 48%, #02040a 100%);
      overflow-x: hidden;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
    }

    body::before {
      background:
        linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px);
      background-size: 4rem 4rem;
      mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%);
      opacity: 0.28;
    }

    body::after {
      background:
        radial-gradient(circle at 50% 18%, rgba(116,255,159,0.22), transparent 20rem),
        repeating-linear-gradient(180deg, transparent 0 7px, rgba(255,255,255,0.025) 8px 9px);
      mix-blend-mode: screen;
      opacity: 0.42;
    }

    .page-shell {
      position: relative;
      z-index: 1;
      min-height: 100svh;
      padding: clamp(1rem, 3vw, 2rem);
    }

    .top-nav {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      flex-wrap: wrap;
    }

    .back-link {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 2.5rem;
      padding: 0.62rem 0.95rem;
      border: 1px solid rgba(46, 232, 255, 0.24);
      border-radius: 999px;
      color: var(--ink);
      background: rgba(4, 10, 20, 0.46);
      box-shadow: 0 0 1rem rgba(46, 232, 255, 0.10), inset 0 0 0.75rem rgba(46, 232, 255, 0.06);
      text-decoration: none;
      font-size: 0.82rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      backdrop-filter: blur(14px);
    }

    .back-link:hover,
    .back-link:focus-visible {
      border-color: rgba(116, 255, 159, 0.55);
      box-shadow: 0 0 1.4rem rgba(116, 255, 159, 0.18), inset 0 0 1rem rgba(116, 255, 159, 0.08);
      outline: none;
    }

    .hero {
      display: grid;
      place-items: start center;
      min-height: calc(100svh - 5rem);
      padding-top: clamp(2.75rem, 9vw, 6.5rem);
      text-align: center;
    }

    .sequence-card {
      width: min(58rem, 100%);
      padding: clamp(1.25rem, 4vw, 2.4rem);
      border: 1px solid rgba(116, 255, 159, 0.20);
      border-radius: clamp(1.4rem, 4vw, 2.2rem);
      background: linear-gradient(180deg, rgba(5, 12, 24, 0.12), rgba(3, 7, 14, 0.05));
      box-shadow:
        0 0 3rem rgba(20, 119, 255, 0.16),
        inset 0 0 2rem rgba(46, 232, 255, 0.05);
      backdrop-filter: blur(18px);
      overflow: hidden;
    }

    .eyebrow {
      margin: 0 0 1.25rem;
      color: var(--green);
      font-size: clamp(0.78rem, 2.2vw, 0.92rem);
      letter-spacing: 0.28em;
      text-transform: uppercase;
      text-shadow: 0 0 1rem rgba(116,255,159,0.55);
    }

    .year-stage {
      position: relative;
      display: grid;
      place-items: center;
      width: 100%;
      min-height: clamp(7.5rem, 26vw, 15rem);
      overflow: hidden;
      isolation: isolate;
    }

    .year-stage::before {
      content: "";
      position: absolute;
      inset: auto 6% 10% 6%;
      height: 0.18rem;
      background: linear-gradient(90deg, transparent, rgba(116,255,159,0.75), rgba(46,232,255,0.8), transparent);
      filter: blur(0.2px);
      opacity: 0.68;
      box-shadow: 0 0 1.2rem rgba(116,255,159,0.6), 0 0 2.4rem rgba(46,232,255,0.36);
    }

    .year-slide {
      position: absolute;
      display: block;
      width: 100%;
      opacity: 0;
      transform: translateX(120%) scale(0.985);
      transition:
        transform var(--duration) cubic-bezier(.42, 0, .16, 1),
        opacity var(--duration) linear,
        filter var(--duration) linear;
      color: var(--ink);
      font-size: clamp(5.4rem, 24vw, 13.5rem);
      font-weight: 900;
      line-height: 0.86;
      letter-spacing: -0.08em;
      text-shadow:
        0 0 0.22rem rgba(255,255,255,0.95),
        0 0 1.1rem rgba(116,255,159,0.76),
        0 0 2.7rem rgba(46,232,255,0.48),
        0 0 5.5rem rgba(20,119,255,0.36);
      will-change: transform, opacity, filter;
    }

    .year-slide.is-current {
      opacity: 1;
      transform: translateX(0) scale(1);
      filter: blur(0);
    }

    .year-slide.is-exiting {
      opacity: 0;
      transform: translateX(-120%) scale(0.985);
      filter: blur(1.8px);
    }

    .year-slide.is-entering {
      opacity: 0;
      transform: translateX(120%) scale(0.985);
      filter: blur(1.2px);
    }

    .year-stage.is-final {
      animation: screech-stop 760ms cubic-bezier(.12, .82, .15, 1) both;
    }

    .year-stage.is-final .year-slide.is-current {
      color: #f6fff7;
      text-shadow:
        0 0 0.24rem rgba(255,255,255,1),
        0 0 1.2rem rgba(116,255,159,0.95),
        0 0 3.4rem rgba(46,232,255,0.72),
        0 0 7rem rgba(20,119,255,0.46);
    }

    @keyframes screech-stop {
      0% { transform: translateX(0); }
      18% { transform: translateX(-2.5%); }
      31% { transform: translateX(1.8%); }
      43% { transform: translateX(-1.1%); }
      56% { transform: translateX(0.7%); }
      72% { transform: translateX(-0.3%); }
      100% { transform: translateX(0); }
    }

    .title {
      margin: clamp(1rem, 3vw, 1.5rem) 0 0;
      font-size: clamp(1.45rem, 5.5vw, 3.2rem);
      letter-spacing: -0.045em;
      transition: color 420ms ease, text-shadow 420ms ease, transform 420ms ease;
    }

    .title.is-scrambling {
      color: #f6fff7;
      text-shadow:
        0 0 0.28rem rgba(255,255,255,0.92),
        0 0 1.15rem rgba(116,255,159,0.72),
        0 0 2.4rem rgba(46,232,255,0.46);
      transform: translateY(-0.05rem);
    }

    .title.is-evolved {
      color: #f6fff7;
      text-shadow:
        0 0 0.24rem rgba(255,255,255,1),
        0 0 1rem rgba(116,255,159,0.82),
        0 0 2.6rem rgba(46,232,255,0.5);
    }

    .subtitle {
      max-width: 42rem;
      margin: 0.75rem auto 0;
      color: var(--muted);
      font-size: clamp(0.95rem, 2.6vw, 1.1rem);
      line-height: 1.6;
    }

    .status-strip {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 0.55rem;
      margin-top: 1.35rem;
    }

    .status-pill {
      display: inline-flex;
      align-items: center;
      min-height: 2rem;
      padding: 0.45rem 0.72rem;
      border: 1px solid rgba(46, 232, 255, 0.18);
      border-radius: 999px;
      background: rgba(3, 8, 18, 0.45);
      color: rgba(234, 246, 255, 0.76);
      font-size: 0.72rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }


    .wallpaper-stage {
      position: fixed;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: 1;
      transition: opacity 900ms ease;
    }

    .wallpaper-layer,
    .wallpaper-overlay {
      position: absolute;
      inset: 0;
    }

    .wallpaper-layer {
      background-position: center center;
      background-size: cover;
      background-repeat: no-repeat;
      opacity: 0;
      transform: scale(1.035);
      transition: opacity 900ms ease, transform 1400ms ease;
      filter: saturate(1.02) contrast(1.02);
      will-change: opacity, transform;
    }

    .wallpaper-layer::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3, 5, 11, 0.3) 0%, rgba(3, 5, 11, 0.38) 18%, rgba(2, 4, 10, 0.58) 100%);
    }

    .wallpaper-layer.is-visible {
      opacity: 1;
      transform: scale(1);
    }

    .wallpaper-overlay {
      background:
        radial-gradient(circle at 50% 15%, rgba(255,255,255,0.12), transparent 22rem),
        radial-gradient(circle at 50% 0%, rgba(116, 255, 159, 0.18), transparent 28rem),
        linear-gradient(180deg, rgba(3, 6, 14, 0.12) 0%, rgba(3, 7, 14, 0.42) 100%);
      mix-blend-mode: screen;
      opacity: 0.72;
    }

    @media (max-width: 560px) {
      .page-shell { padding: 0.9rem; }
      .hero { padding-top: 3.2rem; }
      .sequence-card { border-radius: 1.35rem; }
      .year-stage { min-height: 8.8rem; }

      .wallpaper-layer {
        background-position: center top;
        transform: translateY(7svh) scale(1.035);
      }

      .wallpaper-layer.is-visible {
        transform: translateY(7svh) scale(1);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .year-slide,
      .year-stage {
        transition: none !important;
        animation: none !important;
      }
    }


/* v103: CSP-safe wallpaper classes */
.wallpaper-halo-combat-evolved { background-image: url("./assets/halo-combat-evolved-wallpaper.jpg"); }
.wallpaper-halo-2 { background-image: url("./assets/halo-2-wallpaper.jpg"); }
.wallpaper-halo-3 { background-image: url("./assets/halo-3-wallpaper.jpg"); }
.wallpaper-halo-wars { background-image: url("./assets/halo-wars-wallpaper.jpg"); }
.wallpaper-halo-3-odst { background-image: url("./assets/halo-3-odst-wallpaper.jpg"); }
.wallpaper-halo-reach { background-image: url("./assets/halo-reach-wallpaper.jpg"); }
.wallpaper-halo-4 { background-image: url("./assets/halo-4-wallpaper.jpg"); }
.wallpaper-halo-spartan-assault { background-image: url("./assets/halo-spartan-assault-wallpaper.jpg"); }
.wallpaper-halo-master-chief-collection { background-image: url("./assets/halo-master-chief-collection-wallpaper.jpg"); }
.wallpaper-halo-spartan-strike { background-image: url("./assets/halo-spartan-strike-wallpaper.jpg"); }
.wallpaper-halo-5-guardians { background-image: url("./assets/halo-5-guardians-wallpaper.jpg"); }
.wallpaper-halo-wars-2 { background-image: url("./assets/halo-wars-2-wallpaper.jpg"); }
.wallpaper-halo-infinite { background-image: url("./assets/halo-infinite-wallpaper.jpg"); }
.wallpaper-campaign-evolved { background-image: url("./assets/campaign-evolved-wallpaper.png"); }

/* v103: CSP-safe transition duration classes */
.year-stage.duration-430 { --duration: 430ms; }
.year-stage.duration-418 { --duration: 418ms; }
.year-stage.duration-407 { --duration: 407ms; }
.year-stage.duration-395 { --duration: 395ms; }
.year-stage.duration-383 { --duration: 383ms; }
.year-stage.duration-372 { --duration: 372ms; }
.year-stage.duration-360 { --duration: 360ms; }
.year-stage.duration-348 { --duration: 348ms; }
.year-stage.duration-337 { --duration: 337ms; }
.year-stage.duration-325 { --duration: 325ms; }
.year-stage.duration-313 { --duration: 313ms; }
.year-stage.duration-302 { --duration: 302ms; }
.year-stage.duration-290 { --duration: 290ms; }
.year-stage.duration-278 { --duration: 278ms; }
.year-stage.duration-267 { --duration: 267ms; }
.year-stage.duration-255 { --duration: 255ms; }
.year-stage.duration-243 { --duration: 243ms; }
.year-stage.duration-232 { --duration: 232ms; }
.year-stage.duration-220 { --duration: 220ms; }
.year-stage.duration-208 { --duration: 208ms; }
.year-stage.duration-197 { --duration: 197ms; }
.year-stage.duration-185 { --duration: 185ms; }
.year-stage.duration-173 { --duration: 173ms; }
.year-stage.duration-162 { --duration: 162ms; }
.year-stage.duration-150 { --duration: 150ms; }