@font-face {
      font-family: 'Rhymes Text';
      src: url('../fonts/Rhymes Text Medium.woff2') format('woff2'),
           url('../fonts/Rhymes Text Medium.woff') format('woff');
      font-weight: 500;
      font-style: normal;
      font-display: block;
    }
    @font-face {
      font-family: 'Untitled Sans';
      src: local('UntitledSans-Regular'), local('Untitled Sans Regular'), local('Untitled Sans'),
           url('../fonts/untitled-sans-regular.woff2') format('woff2');
      font-weight: 400;
      font-style: normal;
      font-display: block;
    }
    @font-face {
      font-family: 'Untitled Sans';
      src: local('UntitledSans-Medium'), local('Untitled Sans Medium'),
           url('../fonts/untitled-sans-medium.woff2') format('woff2');
      font-weight: 500;
      font-style: normal;
      font-display: block;
    }

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

    :root {
      --color-bg: #ffffff;
      --color-text: #000000;
      --color-panel-bg: rgba(255,255,255,0.96);
      --color-panel-border: #e0e0e0;
      color-scheme: light;
    }

    html.dark {
      --color-bg: #000000;
      --color-text: #ffffff;
      --color-panel-bg: rgba(20,20,20,0.96);
      --color-panel-border: #333;
      color-scheme: dark;
    }

    @supports (color: color(display-p3 0 0 0)) {
      :root {
        --color-bg: color(display-p3 1 1 1);
        --color-text: color(display-p3 0 0 0);
        --color-panel-bg: color(display-p3 1 1 1 / 0.96);
        --color-panel-border: color(display-p3 0.878 0.878 0.878);
      }
      html.dark {
        --color-bg: color(display-p3 0 0 0);
        --color-text: color(display-p3 1 1 1);
        --color-panel-bg: color(display-p3 0.078 0.078 0.078 / 0.96);
        --color-panel-border: color(display-p3 0.2 0.2 0.2);
      }
    }

    html, body {
      width: 100%;
      height: 100%;
      background: var(--color-bg);
    }

    body {
      background: var(--color-bg);
      color: var(--color-text);
      font-family: 'Untitled Sans', sans-serif;
      overflow: hidden;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    /* Smooth theme transition on the page background. Text colors are mostly
       handled via inheritance from body, so transitioning body's color would
       interfere with `.word` keyframe animations. Keeping this targeted. */
    html, body {
      transition: background-color 0.4s ease-in-out;
    }

    /* ── Slides ── */
    .slides {
      position: fixed;
      inset: 0;
      overflow-y: scroll;
      scroll-snap-type: y mandatory;
    }

    .slide {
      position: relative;
      height: 100dvh;
      scroll-snap-align: start;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 80px 120px;
    }

    /* ── Slide button ── */
    .slide-btn-wrap {
      position: absolute;
      bottom: 24px;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
    }
    .slide-btn {
      display: inline-block;
      opacity: 0;
      text-decoration: none;
      color: var(--color-text);
      background: rgba(0, 0, 0, 0.06);
      border-radius: 100px;
      padding: 9px 18px;
      font-size: 14px;
      font-family: 'Untitled Sans', sans-serif;
      font-weight: 400;
      letter-spacing: -0.01em;
      -webkit-font-smoothing: antialiased;
      cursor: pointer;
      transform-origin: center top;
    }
    .slide-btn:hover {
      background: rgba(0, 0, 0, 0.1);
    }
    html.dark .slide-btn        { background: rgba(255, 255, 255, 0.1); }
    html.dark .slide-btn:hover  { background: rgba(255, 255, 255, 0.18); }
    @keyframes btn-hue-stretch-y {
      0%   {
        opacity: 0;
        transform: scaleY(var(--stretch-amount, 3));
        filter: blur(var(--stretch-blur, 8px)) hue-rotate(var(--hue-angle, 180deg));
        background-color: var(--hue-color, #FFDCFF);
        color: #fff;
      }
      50%  { background-color: var(--hue-color, #FFDCFF);}
      100% {
        opacity: 1;
        transform: scaleY(1);
        filter: blur(0) hue-rotate(0deg);
        background-color: rgba(0, 0, 0, 0.06);
        color: var(--color-text);
      }
    }
    @keyframes btn-hue-stretch-y-dark {
      0%   {
        opacity: 0;
        transform: scaleY(var(--stretch-amount, 3));
        filter: blur(var(--stretch-blur, 8px)) hue-rotate(var(--hue-angle, 180deg));
        background-color: var(--hue-color, #331033);
        color: #fff;
      }
      50%  { background-color: var(--hue-color, #331033);}
      100% {
        opacity: 1;
        transform: scaleY(1);
        filter: blur(0) hue-rotate(0deg);
        background-color:  rgba(255, 255, 255, 0.1);
        color: var(--color-text);
      }
    }

    .slide-btn.animating {
      animation-name: btn-hue-stretch-y;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }

    html.dark .slide-btn.animating {
      animation-name: btn-hue-stretch-y-dark;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }

    .slide-text {
      font-size: 32px;
      line-height: 1.18;
      letter-spacing: -0.01em;
      text-align: center;
      max-width: 780px;
      font-weight: 400;
      opacity: 0;
    }

    .slide-text[data-built] {
      opacity: 1;
    }

    /* "Science Fiction™" — first two words of slide 1 */
    /* per-word mode: .word is a direct child */
    .slide[data-index="1"] .slide-text > .word:nth-child(-n+2) {
      font-family: 'Rhymes Text', serif;
      font-weight: 500;
    }
    /* per-letter mode: letters are inside .word-group wrappers */
    .slide[data-index="1"] .slide-text > .word-group:nth-child(-n+2) .word {
      font-family: 'Rhymes Text', serif;
      font-weight: 500;
    }

    /* per-letter: keep a word's letters together on one line */
    .slide-text .word-group {
      display: inline;
      white-space: nowrap;
    }

    .slide-text .word {
      display: inline-block;
      white-space: pre;
      opacity: 0;
    }

    .slide-text sup {
      font-size: 0.55em;
      vertical-align: super;
      line-height: 0;
    }

    /* Word effect: Hue Warp 2 — scaleY + blur + hue-rotate in, hue-color → text color */
    @keyframes word-hue-stretch-y-2 {
      0%   { opacity: 0; transform: scaleY(var(--stretch-amount, 3)); filter: blur(var(--stretch-blur, 8px)) hue-rotate(var(--hue-angle, 180deg)); color: var(--hue-color, #f113f4); color: var(--hue-color, color(display-p3 0.945 0.071 0.957)); }
      50%  { color: var(--hue-color, #f113f4); color: var(--hue-color, color(display-p3 0.945 0.071 0.957)); }
      100% { opacity: 1; transform: scaleY(1); filter: blur(0) hue-rotate(0deg); color: var(--color-text); }
    }

    .slide-text.animating .word {
      opacity: 1;
      transform-origin: center top;
      animation-name: word-hue-stretch-y-2;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.16, 1, 0.3, 1));
      animation-duration: var(--duration, 600ms);
    }

    /* ── Backers ticker (slide 3) ── */
    .backers {
      position: absolute;
      bottom: 24px;
      left: 0;
      right: 0;
      pointer-events: none;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
    .backers-label {
      font-size: 12px;
      letter-spacing: -0.01em;
      font-weight: 500;
      color: var(--color-text);
      opacity: 0;
      transform-origin: center top;
    }
    .backers-label.animating {
      animation-name: btn-hue-stretch-y;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }
    html.dark .backers-label.animating {
      animation-name: btn-hue-stretch-y-dark;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }
    /* Pill matches .slide-btn (background, color, border-radius, animation). */
    .backers-pill {
      width: 360px;
      height: 38px;
      border-radius: 100px;
      background: rgba(0, 0, 0, 0.06);
      color: var(--color-text);
      overflow: hidden;
      display: flex;
      align-items: center;
      opacity: 0;
      transform-origin: center top;
    }
    html.dark .backers-pill { background: rgba(255, 255, 255, 0.1); }
    .backers-pill.animating {
      animation-name: btn-hue-stretch-y;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }
    html.dark .backers-pill.animating {
      animation-name: btn-hue-stretch-y-dark;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 360ms);
    }
    .backers-track {
      display: flex;
      width: max-content;
      gap: 24px;
      padding-left: 24px; /* matches gap so the duplicate seam is invisible */
      animation: backers-scroll 28s linear infinite;
    }
    .backer {
      font-size: 14px;
      letter-spacing: -0.01em;
      white-space: nowrap;
      color: var(--color-text);
    }
    @keyframes backers-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    /* ── Press list (slide 3) ── */
    .press-list {
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: center;
      text-align: center;
      max-width: 900px;
    }
    .press-item {
      opacity: 0;
      display: block;
      text-decoration: none;
      color: var(--color-text);
    }
    .press-outlet {
      font-family: 'Untitled Sans', sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.01em;
      color: var(--color-text);
      margin-bottom: 6px;
      -webkit-font-smoothing: antialiased;
    }
    .press-headline {
      font-family: 'Times New Roman', Times, serif;
      font-size: 28px;
      line-height: 1.2;
      letter-spacing: -0.005em;
      color: inherit;
    }
    /* Settled (post-animation) state — enables hover transitions */
    .press-list.settled .press-item {
      opacity: 1;
      color: var(--color-text);
      transition: opacity 0.2s ease-in-out, color 0.2s ease-in-out, filter 0.2s ease-in-out;
    }
    .press-list.settled .press-item .press-outlet,
    .press-list.settled .press-item .press-headline {
      color: inherit;
      filter: hue-rotate(var(--hue-angle, -250deg))
    }
    .press-list.settled:has(.press-item:hover) .press-item:not(:hover) {
      opacity: 0.2;
    }
    .press-list.settled .press-item:hover {
      opacity: 1;
      color: var(--hue-color, #d52fc0);
      filter: hue-rotate(var(--hue-angle, 0deg));
      transition: opacity 0.2s ease-out, color 0.2s ease-out, filter 0.2s ease-out;
    }
    @keyframes press-item-hue {
      0%   { opacity: 0; transform: scaleY(var(--stretch-amount, 2.4)); filter: blur(var(--stretch-blur, 6px)) hue-rotate(var(--hue-angle, 250deg)); color: var(--hue-color, #d52fc0); }
      50%  { color: var(--hue-color, #d52fc0); }
      100% { opacity: 1; transform: scaleY(1); filter: blur(0) hue-rotate(0deg); color: var(--color-text); }
    }
    .press-list.animating .press-item {
      transform-origin: center top;
      animation-name: press-item-hue;
      animation-fill-mode: both;
      animation-timing-function: var(--easing, cubic-bezier(0.87, 0, 0.13, 1));
      animation-duration: var(--duration, 500ms);
    }
    .press-list.animating .press-item .press-outlet,
    .press-list.animating .press-item .press-headline {
      color: inherit;
    }


    /* ── Intro sequence ── */

    /* Science→Sci / Fiction→Fi — permanent elements above the overlay */
    #intro-word-sci,
    #intro-word-fi {
      position: fixed;
      top: 50%;
      /* translate3d (instead of translateY) forces a compositor layer so transform/opacity/
         filter animations stay on the GPU. */
      transform: translate3d(0, -50%, 0);
      z-index: 201;
      font-family: 'Untitled Sans', sans-serif;
      font-weight: 500;
      font-size: clamp(30px, 5.5vw, 120px);
      letter-spacing: -0.01em;
      color: #fff;
      color: color(display-p3 1 1 1);
      opacity: 0;
      white-space: nowrap;
      pointer-events: none;
      -webkit-font-smoothing: antialiased;
      backface-visibility: hidden;
      transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1),
                  right 0.4s cubic-bezier(0.77, 0, 0.175, 1),
                  font-size 0.4s cubic-bezier(0.77, 0, 0.175, 1),
                  color 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
    #intro-word-sci { left: 200px; }
    #intro-word-fi  { right: 200px; }

    /* Hue-stretch animation for intro words — fires when phase 2 begins.
       Uses translate3d to force a compositor layer; will-change tells the browser to
       allocate the layer up-front so the first frame isn't janky. Color is still animated
       (it's the magenta-to-black sweep) — the trade-off is a single text-element repaint
       per frame, which is acceptable. The expensive `filter: blur()` is the main cost,
       but on a single element with a stable layer it should hold 60fps. */
    @keyframes intro-word-in {
      0%  {
        opacity: 0;
        transform: translate3d(0, -50%, 0) scaleY(3.8);
        filter: blur(12px) hue-rotate(-180deg);
        color: var(--hue-color, #fd43ff);
        color: var(--hue-color, color(display-p3 0.992 0.263 1));
      }
      50% {
        color: var(--hue-color, #fd43ff);
        color: var(--hue-color, color(display-p3 0.992 0.263 1));
      }
      100% {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scaleY(1);
        filter: blur(0) hue-rotate(0deg);
        color: var(--color-text);
      }

      
    }
    #intro-word-sci.intro-word-anim,
    #intro-word-fi.intro-word-anim {
      transform-origin: center top;
      animation-name: intro-word-in;
      animation-timing-function: cubic-bezier(0.87, 0, 0.13, 1);
      animation-fill-mode: forwards;
      transition: none !important;
      will-change: transform, filter, opacity, color;
    }

    #intro-word-sci.p2 { left: 20px; font-size: 13px; color: var(--color-text); }
    #intro-word-fi.p2  { font-size: 13px; color: var(--color-text); }
    @media (max-width: 640px) {
      #intro-word-sci.p2 { left: 8px; }
    }

    /* "ence" / "ction" — collapse away during p2 */
    .intro-drop {
      display: inline-block;
      overflow: hidden;
      max-width: 600px;
      vertical-align: top;
      transition: max-width 0.4s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
    .p2 .intro-drop { max-width: 0; opacity: 0; }

    /* Mobile: tighter edge offsets so full Science/Fiction fits */
    @media (max-width: 640px) {
      #intro-word-sci { left: 24px; }
      #intro-word-fi  { right: 24px; }
    }

    /* Expanded intro words on slide 0 — overrides p2 to show full Science / Fiction */
    #intro-word-sci.expanded {
      left: 200px;
      font-size: clamp(30px, 5.5vw, 120px);
    }
    #intro-word-fi.expanded {
      right: 200px;
      font-size: clamp(30px, 5.5vw, 120px);
    }
    @media (max-width: 640px) {
      #intro-word-sci.expanded { left: 24px; }
      #intro-word-fi.expanded  { right: 24px; }
    }
    .p2.expanded .intro-drop {
      max-width: 600px;
      opacity: 1;
    }

    /* Black overlay — fades out in p2 to reveal page beneath */
    /* Transparent overlay — kept only to block pointer events during the intro.
       The black-to-white visual is now driven by body.intro-black instead of
       fading an opaque overlay. */
    #intro {
      position: fixed;
      inset: 0;
      z-index: 200;
      pointer-events: all;
    }
    #intro.p2 { pointer-events: none; }

    /* Black page background during the intro; triggerPhase2 removes the class
       and the existing html/body background-color transition fades it to white. */
    body.intro-black { background: #000; }
    html.dark body.intro-black { background: #000; }

    /* Intro logo (animated WebP) — fixed layer above overlay, persists on white page */
    #intro-logo-large {
      position: fixed;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);
      z-index: 201;
      pointer-events: none;
      transition: transform 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    }
    /* Exit: slide to top of screen + scale down */
    #intro-logo-large.exit {
      transform: translate(-50%, calc(-50% - 50vh + 29px)) scale(0.23);
    }
    @media (max-width: 640px) {
      #intro-logo-large.exit {
        transform: translate(-50%, calc(-50% - 50vh + 37px)) scale(0.23);
      }
    }

    #intro-canvas {
      display: block;
      width: 179px;
      height: 89px;
      visibility: hidden;
    }
    #intro-canvas.ready { visibility: visible; }
    #intro-canvas.done  { display: none; }

    /* Vector logo that replaces the canvas after the frame sequence completes —
       same dimensions as the canvas so positioning is identical. */
    #intro-logo-svg {
      display: none;
      width: 179px;
      height: 89px;
    }
    #intro-logo-svg.ready { display: block; }
    /* Dark mode: invert the black SVG to white. */
    html.dark #intro-logo-svg { filter: invert(1); }

    @media (max-width: 640px) {
      .slide { padding: 80px 40px; }
      .slide-text { font-size: 22px; }
      .press-list { gap: 22px; }
      .press-headline { font-size: 18px; }
      .press-outlet { font-size: 12px; }
      .backers-pill { width: 240px; }
    }

    /* ── Dither background ── */
    #dither-bg {
      position: fixed;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block;
      pointer-events: none;
      z-index: 199;
      opacity: 0;
      transition: opacity 0.4s ease-in-out;
    }

    /* Source <video> elements: off-screen but paintable to canvas. iOS Safari refuses
       to play `display:none` videos, so we keep them rendered at 1×1 with opacity 0. */
    .dither-source-video {
      position: fixed;
      top: 0;
      left: 0;
      width: 1px;
      height: 1px;
      opacity: 0;
      pointer-events: none;
      z-index: -1;
    }