/* ==========================================================================
   Banura & Sanjana — Wedding invitation stylesheet
   ==========================================================================

   All colour is defined once in :root below. Component rules only reference
   tokens (`var(--…)`) or `currentColor` — never raw hex/rgba literals.
   To retint the whole page, change the tokens; nothing else needs edits.
   ========================================================================== */

:root {
  /* --- Base palette (hex, single source of truth) ---------------------- */
  --bg: #F0E6DF;
  --envelope: #DCC3B5;
  --envelope-lt: #E8D3C6;
  --envelope-dk: #C2A697;
  --envelope-inner: #CFAF9F;
  --envelope-highlight: #F4E5DC;  /* light rose-petal cream */
  --gold: #A07565;
  --gold-lt: #C09080;
  --gold-hi: #D4A08E;             /* highlight in the wax seal */
  --gold-dk: #7A5548;             /* shadow in the wax seal */
  --text: #4A3633;
  --text-soft: #9A7F78;
  --ink: #4A3C2A;                 /* invitee name on the card */
  --card-bg: #E8D8CC;             /* placeholder behind card img */

  /* --- RGB triples (for rgba() when we need alpha over a token) -------- */
  --rgb-white: 255, 255, 255;
  --rgb-black: 0, 0, 0;
  --rgb-gold: 160, 117, 101;
  --rgb-gold-lt: 192, 144, 128;
  --rgb-shadow-warm: 139, 115, 64;
  --rgb-shadow-dark: 60, 50, 40;

  /* --- Semantic tokens ------------------------------------------------- */

  /* Ambient background wash */
  --bg-ambient:
    radial-gradient(ellipse at 30% 20%, rgba(var(--rgb-gold-lt), .07) 0%, transparent 60%),
    radial-gradient(ellipse at 70% 80%, rgba(var(--rgb-gold), .05) 0%, transparent 50%);

  /* Shadows */
  --shadow-env:
    0 2px 24px rgba(var(--rgb-shadow-dark), .12),
    0 8px 48px rgba(var(--rgb-shadow-warm), .08);
  --shadow-env-inset-strong:
    inset 0 1px 0 rgba(var(--rgb-white), .15),
    inset 0 -1px 0 rgba(var(--rgb-black), .04);
  --shadow-env-inset-soft:
    inset 0 1px 0 rgba(var(--rgb-white), .12),
    inset 0 -1px 0 rgba(var(--rgb-black), .04);
  --shadow-card:
    0 4px 24px rgba(var(--rgb-shadow-dark), .10),
    0 1px 4px rgba(var(--rgb-black), .06);
  --shadow-seal:
    0 2px 6px rgba(var(--rgb-black), .22),
    inset 0 1px 2px rgba(var(--rgb-white), .2);
  --shadow-flap-drop: drop-shadow(0 3px 5px rgba(var(--rgb-black), .14));
  --shadow-wreath: drop-shadow(0 2px 6px rgba(var(--rgb-gold), .12));

  /* Fold gradients on envelope faces */
  --fold-bottom-grad: linear-gradient(to top,   transparent 60%, rgba(var(--rgb-black), .05) 100%);
  --fold-side-l-grad: linear-gradient(to right, transparent 60%, rgba(var(--rgb-black), .04) 100%);
  --fold-side-r-grad: linear-gradient(to left,  transparent 60%, rgba(var(--rgb-black), .04) 100%);

  /* Flap gradient (top of envelope) */
  --flap-grad: linear-gradient(178deg, var(--envelope-dk) 0%, var(--envelope) 70%);

  /* Wax-seal rose gradient */
  --seal-grad: radial-gradient(circle at 38% 34%,
    var(--gold-hi), var(--gold) 60%, var(--gold-dk));

  /* Miscellaneous UI */
  --border-front-inner: rgba(var(--rgb-shadow-warm), .18);
  --skip-border: rgba(var(--rgb-gold), .35);
  --skip-hover-bg: rgba(var(--rgb-gold), .08);
  --heart-ink: rgba(var(--rgb-white), .7);
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
  background: var(--bg);
  background-image: var(--bg-ambient);
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  overflow-x: hidden;
}
body.intro-lock { overflow: hidden; height: 100dvh; }

/* ==========================================================================
   Intro sequence
   ========================================================================== */

.intro {
  position: fixed; inset: 0;
  background: var(--bg);
  background-image: var(--bg-ambient);
  z-index: 100;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  transition: opacity .7s ease;
}
.intro.gone { opacity: 0; pointer-events: none; }

/* Wreath and skip button are static across screens; only text swaps. */
.intro-stage {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 5vh 1.5rem 12vh;
  width: 100%;
  max-width: 100%;
  gap: clamp(1.4rem, 5vh, 3rem);
}
.intro-text-slot {
  position: relative;
  width: 100%;
  min-height: clamp(6.5rem, 22vh, 11rem);
  display: flex; align-items: center; justify-content: center;
}
.intro-text {
  position: absolute;
  inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .9s cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}
.intro-text.on {
  opacity: 1;
  transform: translateY(0);
}

/* Card-matching floral corners.
   Each corner has its own origin point pinned to the viewport corner
   it lives in. It collapses to that point when hidden and expands
   outward (toward the middle) when shown — four sunbursts, one per
   corner, all firing simultaneously.

   The outer .corner div animates scale 0 → 1 with mirror-free
   transforms so every corner interpolates identically. The inner
   <img> carries the mirror per position, isolated from the animation
   so it doesn't confuse the interpolation. */
.intro-corners {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
}
.intro-corners .corner {
  position: absolute;
  width: clamp(130px, 28vw, 240px);
  opacity: 0;
  filter: var(--shadow-wreath);
  will-change: transform, opacity;
  transform: scale(0);
  transition:
    opacity 1.1s cubic-bezier(.22, 1, .36, 1),
    transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
.intro-corners .corner img {
  display: block;
  width: 100%;
  height: auto;
}
/* Placement + pivot at the corner's own viewport corner. */
.intro-corners .tl { top: 0;    left: 0;   transform-origin:   0%   0%; }
.intro-corners .tr { top: 0;    right: 0;  transform-origin: 100%   0%; }
.intro-corners .bl { bottom: 0; left: 0;   transform-origin:   0% 100%; }
.intro-corners .br { bottom: 0; right: 0;  transform-origin: 100% 100%; }
/* Mirror per position — on the img, not the animated wrapper. */
.intro-corners .tr img { transform: scaleX(-1); }
.intro-corners .bl img { transform: scaleY(-1); }
.intro-corners .br img { transform: scale(-1);  }

/* All four expand at the same instant — no stagger. */
.intro.corners-on .corner { opacity: 1; transform: scale(1); }

/* Floral ornament — wide peony + leaf spray (aspect ~3:1). */
.wreath {
  width: clamp(280px, 78vw, 520px);
  height: auto;
  display: block;
  animation: wreathSway 7s ease-in-out infinite;
  transform-origin: 50% 50%;
  filter: var(--shadow-wreath);
}
@keyframes wreathSway {
  0%, 100% { transform: rotate(-1.5deg) translateY(0); }
  50%      { transform: rotate(1.5deg) translateY(-3px); }
}

/* Intro typography */
.intro-eyebrow {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--text-soft);
  margin-bottom: .8rem;
}
.intro-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 5.5vw, 2.4rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.3;
  margin: 0;
  text-wrap: balance;
}
.intro-title .amp {
  font-family: 'Great Vibes', cursive;
  font-size: 1.15em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-lt);
  vertical-align: -.05em;
  margin: 0 .1em;
}
.intro-script {
  font-family: 'Great Vibes', cursive;
  font-weight: 400;
  font-size: clamp(2.4rem, 9vw, 3.8rem);
  color: var(--gold);
  line-height: 1.15;
  margin: 0;
  letter-spacing: .01em;
  text-wrap: balance;
}
.intro-date {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 3.8vw, 1.6rem);
  letter-spacing: .28em;
  color: var(--text);
  margin-top: clamp(.9rem, 3vh, 1.6rem);
}
.intro-sep {
  display: inline-block;
  width: 1.4em;
  height: 1px;
  background: var(--gold-lt);
  vertical-align: middle;
  margin: 0 .6em;
  opacity: .6;
}

/* Skip button */
.skip-btn {
  position: fixed;
  bottom: max(2.5vh, env(safe-area-inset-bottom, 0));
  left: 50%;
  transform: translateX(-50%);
  background: transparent;
  border: 1px solid var(--skip-border);
  color: var(--text-soft);
  font-family: 'Cormorant Garamond', serif;
  font-size: .9rem;
  font-style: italic;
  letter-spacing: .18em;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  z-index: 101;
  transition: background .3s ease, color .3s ease, border-color .3s ease, opacity .5s ease .5s;
  opacity: 0;
  animation: skipAppear .6s ease .8s forwards;
  -webkit-tap-highlight-color: transparent;
}
@keyframes skipAppear { to { opacity: 1; } }
.skip-btn:hover,
.skip-btn:focus-visible {
  background: var(--skip-hover-bg);
  color: var(--gold);
  border-color: var(--gold-lt);
  outline: none;
}
.skip-btn::after {
  content: ' ›';
  font-style: normal;
  margin-left: .1em;
}

/* ==========================================================================
   Invalid state (no /?id=… or unknown id)
   ========================================================================== */

.invalid { text-align: center; padding: 2rem; max-width: 400px; animation: fadeUp .7s ease; }
.invalid .orn { font-size: 1.8rem; color: var(--gold-lt); margin-bottom: .6rem; letter-spacing: .5em; }
.invalid h2 { font-weight: 400; font-size: 1.4rem; color: var(--gold); margin-bottom: .8rem; }
.invalid p  { font-size: 1.05rem; color: var(--text-soft); line-height: 1.7; }

/* ==========================================================================
   Envelope scene
   ========================================================================== */

.scene { perspective: 1400px; perspective-origin: 50% 45%; padding: 1rem; animation: fadeUp .8s ease; }
.stage { display: flex; flex-direction: column; align-items: center; }

.wrapper {
  --ew: min(480px, 92vw);
  --eh: calc(var(--ew) * 0.62);
  --cw: calc(var(--ew) * 0.86);
  --ch: calc(var(--cw) * 1.5);     /* card.jpeg is 1024x1536 → 1536/1024 */
  --gap: 14px;
  position: relative;
  width: var(--ew);
  height: var(--eh);
  overflow: hidden;
  cursor: pointer;
}
/* During flap phase, let flap overflow above */
.wrapper.st-flap { overflow: visible; }
/* Card phase — clip below during emergence, expand height. */
.wrapper.st-card {
  overflow: visible;
  clip-path: inset(-50% -10px 0 -10px);
  height: calc(var(--ch) + var(--gap) + var(--eh));
  transition: height 1.4s cubic-bezier(.22, 1, .36, 1);
  cursor: default;
}

/* ----- Flip shell (front↔back before the envelope opens) ---------------- */

.flip-shell {
  position: absolute; bottom: 0; left: 0;
  width: var(--ew); height: var(--eh);
  z-index: 10;
  transform-style: preserve-3d;
}
.wrapper.st-flip .flip-shell {
  animation: flipOver 1.1s cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes flipOver {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(180deg); }
}

/* Front face */
.face-front {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  background: var(--envelope);
  border-radius: 4px;
  box-shadow: var(--shadow-env), var(--shadow-env-inset-strong);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.face-front::after {
  content: ''; position: absolute; inset: 14px;
  border: 1px solid var(--border-front-inner); border-radius: 2px;
  pointer-events: none;
}
.front-to {
  font-size: .85rem; font-style: italic;
  color: var(--text-soft); letter-spacing: .22em;
  text-transform: uppercase; margin-bottom: .1rem;
}
.front-name {
  font-family: 'Great Vibes', cursive;
  font-size: 1.7rem; color: var(--gold);
  line-height: 1.3; text-align: center; padding: 0 1.2rem;
}

/* Back face — mirrors env-opened structure so folds are visible during flip */
.face-back {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  background: var(--envelope);
  border-radius: 4px;
  box-shadow: var(--shadow-env), var(--shadow-env-inset-soft);
}
.face-back .fb-flap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 56%;
  background: var(--flap-grad);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  z-index: 3;
}
.face-back .fb-seal {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5; width: 44px; height: 44px;
}
.face-back .fb-seal-dot {
  width: 100%; height: 100%;
  background: var(--seal-grad);
  border-radius: 50%;
  box-shadow: var(--shadow-seal);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--heart-ink);
}
.face-back .fb-bottom {
  position: absolute; inset: 0;
  background: var(--envelope-lt);
  clip-path: polygon(0 100%, 50% 38%, 100% 100%);
  z-index: 1;
}
.face-back .fb-bottom::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-bottom-grad);
  clip-path: polygon(0 100%, 50% 38%, 100% 100%);
}
.face-back .fb-side-l {
  position: absolute; inset: 0;
  background: var(--envelope);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
  z-index: 2;
}
.face-back .fb-side-l::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-side-l-grad);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.face-back .fb-side-r {
  position: absolute; inset: 0;
  background: var(--envelope);
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
  z-index: 2;
}
.face-back .fb-side-r::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-side-r-grad);
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}

/* ----- Opened envelope (revealed after flip) ---------------------------- */

.env-opened {
  position: absolute; bottom: 0; left: 0;
  width: var(--ew); height: var(--eh);
  z-index: 9;
  opacity: 0;
  pointer-events: none;
}
.env-opened.visible { opacity: 1; pointer-events: auto; }
.wrapper.st-card .env-opened { z-index: 1; }

.env-bg {
  position: absolute; inset: 0;
  background: var(--envelope-dk); border-radius: 4px;
  box-shadow: var(--shadow-env), var(--shadow-env-inset-soft);
}

/* Flap — hinged at top, folds backward when opened */
.flap-wrap {
  position: absolute; top: 0; left: 0; right: 0;
  height: 56%; z-index: 5;
  transform-origin: center top;
  transform-style: preserve-3d;
}
.env-opened.flap-go .flap-wrap {
  animation: flapOpen 1s cubic-bezier(.4, 0, .15, 1) forwards;
}
@keyframes flapOpen {
  0%   { transform: rotateX(0deg); }
  100% { transform: rotateX(-180deg); }
}

/* Flap front (visible when closed) */
.flap-front {
  position: absolute; inset: 0;
  background: var(--flap-grad);
  clip-path: polygon(0 0, 50% 100%, 100% 0);
  backface-visibility: hidden;
  filter: var(--shadow-flap-drop);
}
.flap-front::after {
  content: ''; position: absolute;
  bottom: 0; left: 5%; right: 5%; height: 60%;
  clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* Flap back (visible when opened) — triangle points UP after transforms */
.flap-back {
  position: absolute; inset: 0;
  background: var(--envelope-inner);
  clip-path: polygon(0 100%, 50% 0, 100% 100%);
  transform: rotateX(180deg);
  backface-visibility: hidden;
}

/* Envelope front body — V-fold pointing up + side flaps */
.body-bottom {
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 100%; z-index: 2;
}
.body-bottom-bg {
  position: absolute; inset: 0;
  background: var(--envelope-lt);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.body-bottom-bg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-bottom-grad);
  clip-path: polygon(0 100%, 50% 50%, 100% 100%);
}
.side-left {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 100%; z-index: 3;
}
.side-left-bg {
  position: absolute; inset: 0;
  background: var(--envelope);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.side-left-bg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-side-l-grad);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}
.side-right {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; z-index: 3;
}
.side-right-bg {
  position: absolute; inset: 0;
  background: var(--envelope);
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}
.side-right-bg::before {
  content: ''; position: absolute; inset: 0;
  background: var(--fold-side-r-grad);
  clip-path: polygon(100% 0, 50% 50%, 100% 100%);
}

/* Wax seal */
.seal {
  position: absolute; top: 42%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 7; width: 44px; height: 44px;
  transition: opacity .3s .1s, transform .4s .1s;
}
.env-opened.flap-go .seal {
  opacity: 0; transform: translate(-50%, -50%) scale(.4) rotate(20deg);
}
.seal-dot {
  width: 100%; height: 100%;
  background: var(--seal-grad);
  border-radius: 50%;
  box-shadow: var(--shadow-seal);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: var(--heart-ink);
}

/* ----- Invitation card --------------------------------------------------- */

.card {
  position: absolute;
  bottom: calc(var(--eh) + var(--gap));
  left: calc((var(--ew) - var(--cw)) / 2);
  width: var(--cw); height: var(--ch);
  border-radius: 4px; overflow: hidden;
  box-shadow: var(--shadow-card);
  transform: translateY(calc(var(--ch) + var(--gap)));
  z-index: 1;
  visibility: hidden;
}
.wrapper.st-card .card {
  visibility: visible;
  transform: translateY(0);
  z-index: 12;
  transition: transform 1.4s cubic-bezier(.22, 1, .36, 1);
}
/* Once the card fully emerges, slide it down to cover the envelope.
   overflow: visible so the card's box-shadow renders on all four sides
   (hidden here would clip the shadow horizontally when the wrapper's
   width matches the card's outer bounds). */
.wrapper.st-done {
  height: var(--ch);
  clip-path: none;
  overflow: visible;
  transition: height .9s cubic-bezier(.22, 1, .36, 1);
}
.wrapper.st-done .card {
  transform: translateY(calc(var(--eh) + var(--gap)));
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
}
.wrapper.st-done .env-opened {
  opacity: 0;
  transition: opacity .6s .2s ease;
}
.card img {
  width: 100%; height: 100%;
  object-fit: contain; display: block;
  background: var(--card-bg);
}
/* Injected invitee name — sits in the empty band on the card, directly
   above the dotted line (~y=476/1536 in the source image → 31%). */
.invitee-on-card {
  position: absolute;
  top: 28%; left: 8%; right: 8%;
  text-align: center;
  font-family: 'Great Vibes', cursive;
  font-size: clamp(0.95rem, 4vw, 1.55rem);
  color: var(--ink); line-height: 1.2;
  pointer-events: none;
  /* Great Vibes only ships weight 400 — thicken strokes with an outline
     in the same colour so it reads bolder without a fake-bold synth. */
  -webkit-text-stroke: 0.6px currentColor;
  text-shadow: 0 0 0.4px currentColor;
}

/* ----- Hint / replay --------------------------------------------------- */

.hint {
  margin-top: 1.4rem; font-size: .95rem;
  font-style: italic; color: var(--text-soft);
  letter-spacing: .04em; text-align: center;
  animation: breathe 2.8s ease-in-out infinite;
  transition: opacity .4s;
  cursor: pointer;
}
.hint.gone { opacity: 0; pointer-events: none; }
.hint.replay {
  opacity: 0; pointer-events: none;
  animation: none;
}
.hint.replay.show {
  opacity: 1; pointer-events: auto;
  animation: fadeUp .6s ease;
  cursor: pointer;
}

/* ==========================================================================
   Motion primitives & responsive tweaks
   ========================================================================== */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes breathe {
  0%, 100% { opacity: .4; }
  50%      { opacity: .9; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

@media (min-width: 500px) {
  .wrapper { --ew: min(540px, 88vw); }
  .front-name { font-size: 2.2rem; }
  .invitee-on-card { font-size: clamp(1.25rem, 3vw, 1.8rem); }
}
@media (min-width: 768px) {
  .wrapper { --ew: 600px; }
  .front-name { font-size: 2.5rem; }
}