/* ============================================================
   sections/intro.css
   Fullscreen video + "THE THREE / match" title shown on load.
   At t=3.7s the entire layer starts rolling up (see @keyframes
   roll-up; 1s duration, so it's gone by t=4.7s). Tightly coupled
   to scripts/app.js which unlocks page scroll at t=4.8s — 100 ms
   after the roll-up animation ends. Do not change in isolation.
   ============================================================ */

.intro {
  position: fixed;
  inset: 0;
  z-index: 10;
  /* overflow:hidden so the oversized <video> (min-width/min-height 100%)
     stays contained within the splash and doesn't bleed onto the page. */
  overflow: hidden;
  /* Sage backup behind the video. If the 16 MB intro video hasn't
     buffered yet (slow connection, Low Power Mode, Data Saver), the
     <video> renders empty/transparent and the page content shows
     through. The accent fill keeps the splash opaque and on-brand
     until the video catches up — and rolls up with the rest. */
  background: var(--accent);
  animation: roll-up 1s cubic-bezier(0.76, 0, 0.24, 1) 3.7s forwards;
}

@keyframes roll-up {
  to { transform: translateY(-100%); }
}

/* Pin the <video> to its .intro parent (which is itself fixed-inset:0
   = always exactly the viewport box, regardless of iOS Safari toolbar
   state). Using `100%` of the parent — not 100vh/100dvh — sidesteps
   every quirk where iOS Safari computes those units differently
   depending on URL-bar visibility, scroll lock, or PWA mode.
   `object-fit: cover` then crops the 1366×768 landscape source so it
   fills a portrait phone viewport without bands. Scoped to `.intro video`
   so it never collides with any future <video> elsewhere on the page. */
.intro video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* The intro video is decorative — when autoplay succeeds you see
     motion behind the title; when it fails (iOS Low Power Mode, slow
     4G, Data Saver, etc.) the sage `.intro` background + animated
     title carry the splash on their own. Block all user interaction
     so a tap on the playing video does nothing surprising. */
  pointer-events: none;
}

/* Kill every browser-injected video chrome that can surface when
   autoplay is blocked. Without this, iOS Safari overlays a giant
   center play-triangle on the frozen first frame (reported in the
   wild) and Android Chrome shows a smaller equivalent. We never
   want the user to manually play — better the splash falls back
   silently to the sage background than show an ugly play button. */
.intro video::-webkit-media-controls,
.intro video::-webkit-media-controls-enclosure,
.intro video::-webkit-media-controls-panel,
.intro video::-webkit-media-controls-play-button,
.intro video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.title {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25em;
  font-family: "Cubao Wide", sans-serif;
  font-size: 13vw;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.word { display: block; }

.word--the {
  transform: translateX(-100vw);
  animation: enter-left 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}

.word--three {
  transform: translateX(100vw);
  animation: enter-right 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1s forwards;
}

@keyframes enter-left  { to { transform: translateX(0); } }
@keyframes enter-right { to { transform: translateX(0); } }

/* "match" — handwritten word that floats up between THE and THREE */
.match-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.match {
  font-family: "Halimum", cursive;
  font-size: 7vw;
  /* Halimum is a handwriting font with very tall ascenders (h, t, M loops);
     mobile renderers clip the tops of strokes if the line-box is too tight.
     line-height 2 + padding-top 0.4em keeps the ascenders fully visible. */
  line-height: 2;
  padding: 0.4em 0 0.1em;
  color: #fff;
  opacity: 0;
  transform: translateY(10.5vw) rotate(-4deg);
  animation: match-in 0.9s ease 2.5s forwards;
}

@keyframes match-in {
  to {
    opacity: 1;
    transform: translateY(9.5vw) rotate(-4deg);
  }
}