/* ============================================================
   Wedding envelope intro overlay.
   envelope-3d.js renders the envelope into <canvas>; this file owns
   only the overlay chrome:
     • fullscreen fixed layer above Canva's #root
     • .wi-flash, the whiteout the scene fades up
     • .wi-open, the fade from white into the site
     • the hint line
     • .wi-fallback-on, a CSS card for when WebGL can't run
   ============================================================ */

#wedding-intro, #wedding-intro * { box-sizing: border-box; }

#wedding-intro {
  position: fixed;
  top: 0; left: 0; right: 0;

  /* The SMALL viewport height, deliberately — not dvh, not lvh.

     svh is the page area with the browser toolbar SHOWN, and MDN calls it
     "fixed, and therefore stable, unless the viewport itself is resized". That
     stability is the whole point here: with dvh the overlay re-sizes every time
     iOS animates its toolbar, so the envelope re-frames and the page appears to
     shift a beat after it settled. Canva's own containers have the same problem
     via height:100% (reproducible on their site), and the injected style pins
     them to svh for the same reason.

     What svh costs: when the toolbar retracts, the extra ~108 px is not
     covered, and shows the ivory the wi-intro-open rule paints — the same
     colour the scene clears to, so it reads as more envelope paper.

     What lvh would cost instead, having tried it: the envelope gets framed for
     a viewport taller than the visible one and loses its bottom edge, and on
     Canva's containers it cut section tops and made fixed elements drift. See
     the README's "should not be retried" list.

     vh first as the pre-svh fallback; on iOS vh equals lvh, so it errs large,
     which for a full-bleed paper texture only crops a few pixels. */
  height: 100vh;
  height: 100svh;
  z-index: 2147483000;
  overflow: hidden;
  cursor: pointer;
  /* Matches the ivory the scene renders and the WebGL clear colour,
     so the very first painted frame is never a different colour. */
  background: #efe9dd;
}

/* Belt and braces: paint the page itself ivory while the intro is up, so any
   sliver the overlay fails to cover reads as envelope paper rather than white.
   Browsers extend the document's background colour into screen area that lies
   outside the page, so this rule is what makes the KakaoTalk strip ivory
   instead of glaring white — and identifying that colour is how we located the
   strip in the first place.

   envelope-intro.js adds the class alongside the scroll lock and removes it on
   teardown, so the site gets its own background back. */
html.wi-intro-open, html.wi-intro-open body {
  background: #efe9dd;
}

/* Click / focus target: covers the overlay and centres the fallback card. */
#wedding-intro .wi-stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
#wedding-intro .wi-stage:focus-visible {
  box-shadow: inset 0 0 0 2px rgba(122, 106, 74, 0.55);
}

/* The WebGL canvas fills the overlay. Held at opacity 0 by the script
   until both bitmaps have decoded, then faded up — this is what prevents
   the black frame you get from sampling a texture with no image yet. */
#wedding-intro .wi-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 520ms ease-out;
}
#wedding-intro.wi-ready .wi-canvas { opacity: 1; }


/* The whiteout. envelope-3d.js fades this up as the seal leaves frame;
   the overlay then fades away from white to reveal the site. */
#wedding-intro .wi-flash {
  position: absolute;
  inset: 0;
  background: #fbf7ef;
  opacity: 0;
  pointer-events: none;
}

#wedding-intro .wi-hint {
  position: absolute;
  left: 0; right: 0;
  bottom: max(26px, env(safe-area-inset-bottom, 0px));
  text-align: center;
  color: #6b6257;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  letter-spacing: 3.5px;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  pointer-events: none;
  user-select: none;
  transition: opacity 520ms ease-out 160ms;
}
#wedding-intro.wi-ready .wi-hint {
  opacity: 0.75;
  animation: wi-hint-pulse 3.2s ease-in-out 1.2s infinite;
}

/* CLICK: fade the whole overlay into the site. */
#wedding-intro.wi-open {
  animation: wi-overlay-out 460ms ease-out forwards;
}
#wedding-intro.wi-open .wi-hint { animation: wi-fade-out 100ms linear forwards; }

@keyframes wi-overlay-out {
  0%   { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
@keyframes wi-fade-out   { to { opacity: 0; } }
@keyframes wi-hint-pulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 0.9; } }

/* ------------------------------------------------------------
   FALLBACK — no WebGL, or a reduced-motion preference.
   A plain ivory panel with the seal, echoing the rendered
   envelope's blank front. Still click-to-enter.
   ------------------------------------------------------------ */
#wedding-intro .wi-fallback {
  position: relative;
  display: none;
  width: min(70vw, 300px);
  aspect-ratio: 3.4 / 4.6;          /* same proportions as the 3D envelope */
  background: #f6f0e4 url("paper.jpg") center / cover;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 18px 40px rgba(60, 50, 38, 0.28),
    0 3px 8px rgba(60, 50, 38, 0.18);
}
#wedding-intro.wi-fallback-on .wi-fallback { display: flex; align-items: center; justify-content: center; }
#wedding-intro.wi-fallback-on .wi-canvas   { display: none; }
#wedding-intro.wi-fallback-on .wi-hint     { opacity: 0.75; }

/* seal.png is greyscale+alpha (the WebGL path tints it and only needs its
   shape and relief), so using it here rendered a GREY seal. seal-ivory.png is
   the same relief remapped onto a warm ivory ramp at build time — warmer than
   the WebGL tint, because that gets its warmth from the key light and flat CSS
   has none. */
#wedding-intro .wi-fallback .wi-seal {
  width: 78px; height: 78px;
  background: url("seal-ivory.png") center / contain no-repeat;
  filter: drop-shadow(0 4px 7px rgba(60, 45, 20, 0.4));
}

@media (prefers-reduced-motion: reduce) {
  #wedding-intro .wi-canvas,
  #wedding-intro .wi-hint { transition: none !important; }
  #wedding-intro.wi-ready .wi-hint { animation: none; opacity: 0.75; }
  #wedding-intro.wi-open { animation: wi-overlay-out 300ms ease-out forwards !important; }
}