/* =============================================================================
   SECTION 1 · THE SURPRISE ENVELOPE (full-screen intro + welcome message)
   ========================================================================== */

.intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow: hidden auto;
  background:
    radial-gradient(90% 60% at 50% 0%, rgba(247, 221, 226, .95) 0%, rgba(247, 221, 226, 0) 70%),
    radial-gradient(60% 40% at 85% 100%, rgba(244, 212, 138, .28) 0%, rgba(244, 212, 138, 0) 70%),
    var(--grain),
    var(--cream);
  box-shadow: 0 40px 80px rgba(73, 52, 61, .25);
  overscroll-behavior: contain;
}

.intro-doodles { position: absolute; inset: 0; pointer-events: none; }

.intro-scroll {
  position: relative;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(28px + env(safe-area-inset-top)) var(--gutter) calc(28px + env(safe-area-inset-bottom));
}

/* ---------- Stage: title + envelope + button ------------------------------- */
.intro-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4.5vh, 36px);
  margin: auto;
  text-align: center;
  transition: opacity .55s ease, transform .7s var(--ease-out), filter .55s;
}
.intro-stage.is-done {
  opacity: 0;
  transform: translateY(40px) scale(.94);
  filter: blur(4px);
}

.intro-kicker { animation: rise-in .8s var(--ease-out) .1s both; }

.intro-title {
  font-family: var(--font-display);
  font-size: clamp(2.7rem, 12vw, 5.2rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.035em;
  font-variation-settings: "SOFT" 100;
  text-wrap: balance;
}
.intro-title .word { display: inline-block; white-space: nowrap; }
.intro-title .word--accent { color: var(--cherry); }
.intro-title .ch {
  display: inline-block;
  animation: letter-drop .7s var(--ease-spring) both;
  animation-delay: calc(.25s + var(--i) * .045s);
}

@keyframes letter-drop {
  from { opacity: 0; transform: translateY(-.5em) rotate(-12deg); }
  to { opacity: 1; transform: none; }
}

.intro-sub {
  max-width: 28ch;
  margin: 14px auto 0;
  font-size: clamp(1rem, 3.6vw, 1.15rem);
  color: var(--ink-2);
  animation: rise-in .8s var(--ease-out) 1s both;
}

.envelope--intro {
  cursor: pointer;
  margin-top: 8px;
  animation: rise-in 1s var(--ease-out) 1.1s both;
}
.envelope--intro.is-idle {
  animation: rise-in 1s var(--ease-out) 1.1s both, env-float 5.5s ease-in-out 2.1s infinite;
}

.intro-btn { animation: rise-in .8s var(--ease-out) 1.4s both; }
.intro.is-opening .intro-btn {
  opacity: 0;
  transform: translateY(10px) scale(.95);
  transition: opacity .3s, transform .3s;
  animation: none;
}

/* ---------- Welcome card ---------------------------------------------------- */
.welcome {
  position: relative;
  width: min(100%, 520px);
  margin: auto;
}
.welcome-card {
  position: relative;
  padding: 52px clamp(22px, 6vw, 44px) 34px;
  border-radius: 24px;
  background: var(--paper);
  box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--line);
  text-align: center;
  opacity: 0;
  transform: translateY(46px) scale(.92) rotate(-2deg);
  transition: opacity .7s var(--ease-out), transform 1s var(--ease-spring);
}
.welcome.is-in .welcome-card { opacity: 1; transform: none; }
.welcome-card .tape { top: -13px; --tape-rot: -3deg; }

.welcome-doodle-a { top: 18px; right: 22px; width: 22px; color: var(--butter); }
.welcome-doodle-b { bottom: 22px; left: 22px; width: 18px; color: var(--rose); animation-delay: -3s; }

.welcome-opener {
  font-family: var(--font-hand);
  font-size: clamp(2.6rem, 11vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--cherry);
  transform: rotate(-2deg);
}

.welcome-line,
.welcome-closer,
.welcome-go {
  --wd: calc(.55s + var(--i, 0) * .6s);
  opacity: 0;
  transform: translateY(14px);
  visibility: hidden;
  transition: opacity .7s var(--ease-out) var(--wd), transform .7s var(--ease-out) var(--wd), visibility 0s linear var(--wd);
}
.welcome.is-in .welcome-line,
.welcome.is-in .welcome-closer,
.welcome.is-in .welcome-go { opacity: 1; transform: none; visibility: visible; }

.welcome-line {
  margin-top: 12px;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 4.6vw, 1.42rem);
  line-height: 1.4;
  font-variation-settings: "SOFT" 100;
  text-wrap: balance;
}
.welcome-line:first-child {
  margin-top: 6px;
  font-style: italic;
  color: var(--ink-2);
}
.welcome-closer {
  margin-top: 22px;
  font-family: var(--font-hand);
  font-size: clamp(1.8rem, 7vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--cherry);
}
.welcome.is-in .welcome-closer { transform: rotate(-2deg); }
.welcome-go { margin-top: 28px; }

/* ---------- Leaving: the whole intro lifts like a curtain ------------------ */
.intro.is-leaving {
  pointer-events: none;
  animation: curtain 1s var(--ease-in-out) forwards;
}
@keyframes curtain {
  0% { transform: none; border-radius: 0; }
  100% { transform: translateY(-108%); border-radius: 0 0 50% 50% / 0 0 16% 16%; }
}

@media (max-height: 640px) {
  .envelope--intro { --env-w: min(70vw, 300px); }
  .intro-stage { gap: 18px; }
}