/* ============================================================
   Splash / intro — keshin.work
   ============================================================

   Figma: 0.0 Splash (906:28489) → 0.1 (911:28520) → 0.2 (911:28552)

   Three states, one centred column:

     0.0   the three lines sit below their masks — nothing visible
     0.1   KESHIN / JAVIYA / ©2026 stacked tight, centred
     0.2   an image slot opens between JAVIYA and ©2026, pushing
           the name up and the year down as the column re-centres
     →     the slot grows to fill the viewport and the site is
           revealed through it

   Every measurement below comes from the 1440×900 Figma frame and
   is expressed as a ratio of it, so the same design holds at any
   width. Reference values are in the comments.
   ============================================================ */

.splash {
  --sp-bg:      #DDD9D2;              /* Surface/S 30 */
  --sp-ink:     var(--color-dark);    /* Gray – Neutral Color/80 — #1F2537 */

  /* Type: 102px / 86px line-height / -6px tracking at 1440 wide.
     102 ÷ 1440 = 7.083vw. Below ~540px the phone rules take over. */
  --sp-fs:      min(102px, 7.083vw);
  --sp-lh:      0.8431em;             /* 86 ÷ 102  */
  --sp-ls:      -0.0588em;            /* -6 ÷ 102  */
}

/* Phone: the name fills the width rather than a third of it. The image
   slot widens to match — that lives in js/splash.js, which owns every
   measurement the timeline has to interpolate. */
@media (max-width: 767.98px) {
  .splash {
    --sp-fs: 22.5vw;
  }
}

/* ── Layers ───────────────────────────────────────────────────

   .splash        100   background + type
   .page-reveal   200   the real site, clipped to the slot (JS)
   .splash-photo  300   the photograph, sitting inside the slot

   The site is layered ABOVE the splash background so that widening
   the clip is what uncovers it — the same trick the reference site
   uses. The photo stays on top of the clip and dissolves at the
   end, so the rectangle never blinks.
   ───────────────────────────────────────────────────────────── */

.splash,
.splash-photo {
  display: none;
}

html.splash-active .splash,
html.splash-active .splash-photo {
  display: block;
}

/* Scroll stays locked until the reveal finishes. */
html.splash-active,
html.splash-active body {
  overflow: hidden;
}

/* Page furniture that escapes the wrapper's stacking context would
   otherwise float over the splash. */
html.splash-active .scroll-top-btn {
  display: none;
}

.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--sp-bg);
  cursor: pointer;                    /* click anywhere to skip */
}

.page-reveal.is-revealing {
  position: relative;
  z-index: 200;
}

/* ── The centred column ───────────────────────────────────── */

.splash-stack {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  font-family: var(--font-body);
  font-size: var(--sp-fs);
  font-weight: 800;
  line-height: var(--sp-lh);
  letter-spacing: var(--sp-ls);
  color: var(--sp-ink);
  text-align: center;
  white-space: nowrap;
  user-select: none;
}

.splash-name {
  text-transform: uppercase;
}

/* One masked line. The word starts pushed fully below the mask —
   Figma 0.0 draws exactly this: text at top:82 inside an 86 box. */
.splash-line {
  overflow: hidden;

  /* The tracking is negative (-0.0588em) and CSS applies it after the
     final glyph as well, so the line box closes up to ~0.06em short of
     the last letter's ink — and this mask then shaves it. That is what
     cut the tail off the A in JAVIYA and the 6 in ©2026.

     Pad the clip out sideways and pull the same amount back off the
     margins: the box paints wider without moving the text, so the
     centred column is unchanged. Vertical padding stays at zero — the
     top and bottom edges ARE the reveal. */
  padding-inline: 0.1em;
  margin-inline: -0.1em;
}

.splash-word {
  display: block;
  transform: translate3d(0, 100%, 0);
  will-change: transform;
}

/* ── The photograph ───────────────────────────────────────── */

.splash-photo {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 300;
  overflow: hidden;
  pointer-events: none;
  will-change: left, top, width, height, opacity;
}

.splash-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transform: scale(1.8);              /* matches the Figma 0.2 crop */
  will-change: transform;
}

/* ── Site entrance ────────────────────────────────────────────
   The header and hero are held back, then animate in while the
   reveal is still widening — so they arrive inside the growing
   rectangle rather than after it.
   ───────────────────────────────────────────────────────────── */

html.splash-active site-header,
html.splash-active .hero-text-group > *,
html.splash-active .hero-ctas,
html.splash-active .hero-scroll {
  opacity: 0;
}

html.splash-enter site-header {
  animation: sp-drop-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.splash-enter .hero-text-group > * {
  animation: sp-rise-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}
html.splash-enter .hero-text-group > *:nth-child(2) { animation-delay: 0.09s; }
html.splash-enter .hero-text-group > *:nth-child(3) { animation-delay: 0.18s; }

html.splash-enter .hero-ctas {
  animation: sp-rise-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) 0.27s both;
}

html.splash-enter .hero-scroll {
  animation: sp-fade-in 0.9s ease-out 0.45s both;
}

@keyframes sp-drop-in {
  from { opacity: 0; transform: translate3d(0, -100%, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes sp-rise-in {
  from { opacity: 0; transform: translate3d(0, 1.4em, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes sp-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Reduced motion ───────────────────────────────────────────
   No intro at all: the site is simply there. The inline <head>
   script also skips arming the splash, so nothing is ever painted.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  html.splash-active .splash,
  html.splash-active .splash-photo {
    display: none;
  }

  html.splash-active,
  html.splash-active body {
    overflow: visible;
  }

  html.splash-active site-header,
  html.splash-active .hero-text-group > *,
  html.splash-active .hero-ctas,
  html.splash-active .hero-scroll {
    opacity: 1;
  }

  html.splash-enter site-header,
  html.splash-enter .hero-text-group > *,
  html.splash-enter .hero-ctas,
  html.splash-enter .hero-scroll {
    animation: none;
  }
}