/* intro.css — the letter. A scroll-driven opening sequence: a floating
   envelope opens, the paper arcs out, folds itself into the statue, and
   the page begins. Scrubbing, skippable, once per session. */

.intro {
  position: relative;
  height: 280vh;
  height: 280svh;
}
body.intro-done .intro { display: none; }

.intro-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  z-index: 20; /* above the fixed header while the letter plays */
}

.intro-canvas {
  height: min(74vh, 92vw);
  height: min(74svh, 92vw);
  aspect-ratio: 3 / 4;
  will-change: transform;
}

.intro-hint {
  position: absolute;
  bottom: clamp(28px, 5vh, 48px);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-soft);
  transition: opacity 0.4s ease-out;
}
.intro-hint span {
  display: inline-block;
  margin-top: 10px;
}
@media (prefers-reduced-motion: no-preference) {
  .intro-hint span { animation: intro-nudge 1.8s ease-in-out infinite; }
}
@keyframes intro-nudge {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.intro--moving .intro-hint { opacity: 0; }

.intro-skip {
  position: absolute;
  top: clamp(20px, 4vh, 36px);
  right: clamp(24px, 5vw, 72px);
  font-size: 11px;
  letter-spacing: var(--ls-kicker);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 0 0 3px;
  cursor: pointer;
  font-family: var(--font-sans);
}
.intro-skip:hover,
.intro-skip:focus-visible { color: var(--ink); border-color: var(--ink); }

/* mobile: shorter scrub, width-driven canvas, finger-sized Skip */
@media (max-width: 720px) {
  .intro {
    height: 200vh;
    height: 200svh;
  }

  .intro-canvas {
    height: auto;
    /* fill ~84vw of a portrait phone, capped so 3:4 never overflows the viewport */
    width: min(84vw, 55.5svh);
  }

  .intro-skip {
    /* expand the tap area to >=44px without moving the visual position */
    padding: 12px 14px;
    margin: -12px -14px 0 0;
    min-width: 44px;
    min-height: 44px;
    border-bottom: none;
    text-decoration: underline;
    text-decoration-color: var(--hairline);
    text-underline-offset: 4px;
  }
  .intro-skip:hover,
  .intro-skip:focus-visible { text-decoration-color: var(--ink); }
}

/* fade the whole stage as the paper takes its place in the hero */
.intro-stage { transition: opacity 0.4s ease-out; }
.intro--landing .intro-stage { opacity: 0; pointer-events: none; }