/* ============================================================
   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%); }
}

/* Note: scoped to <video> globally — only the intro uses <video> currently.
   iOS WebKit has a long-standing object-fit bug on <video> where the element
   honors its intrinsic aspect ratio even with width/height 100%, leaving
   letterbox bands of the .intro background showing top/bottom. The centered
   min-width/min-height trick sidesteps it: the video is forced to fill BOTH
   dimensions, scaling up so one axis overflows, and the overflow is cropped
   by .intro's overflow:hidden. */
video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  display: block;
}

.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);
  }
}