/* ============================================================
   SIGNATURE.CSS — per-occasion entrance animations (T12)
   Full-screen overlay stage + 9 occasion scenes (inline SVG).
   Only transform/opacity. Every loop stops + every scene resolves
   to a calm, fully-formed end state under reduced-motion / .s-instant.
   Depends on tokens.css.
   ============================================================ */

/* ---------- stage ---------- */
body.sig-open { overflow: hidden; }
.sig-stage {
  position: fixed; inset: 0; z-index: 95;
  display: grid; place-items: center;
  opacity: 0; transition: opacity .4s var(--ease-soft);
}
.sig-stage.s-in { opacity: 1; }
.sig-backdrop {
  position: absolute; inset: 0; border: 0; cursor: pointer;
  background: radial-gradient(120% 120% at 50% 32%,
    color-mix(in srgb, var(--accent) 24%, rgba(28,22,26,.80)), rgba(20,16,18,.90));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.sig-scene {
  position: relative; z-index: 1;
  width: clamp(248px, 76vw, 440px); aspect-ratio: 1 / 1;
}
.sig-svg {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  color: var(--accent); filter: drop-shadow(0 14px 44px rgba(0,0,0,.34));
}

/* ---------- skip ---------- */
.sig-skip {
  position: absolute; top: max(16px, env(safe-area-inset-top, 0px)); right: 16px; z-index: 4;
  display: inline-flex; align-items: center; gap: .3em; cursor: pointer;
  color: rgba(255,255,255,.9); font-family: var(--font-body); font-size: var(--fs-sm); font-weight: 600;
  padding: .42em .9em; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
.sig-skip:hover { background: rgba(255,255,255,.22); }
.sig-skip:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,255,255,.45); }

/* ---------- CTA bar (revealed once the scene resolves) ---------- */
.sig-cta {
  position: absolute; left: 50%; bottom: clamp(26px, 9vh, 88px); z-index: 4;
  width: min(92vw, 440px); display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
  text-align: center; opacity: 0; pointer-events: none;
  transform: translate(-50%, 18px);
  transition: opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.sig-cta.in { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.sig-cta-title {
  color: #fff; font-size: clamp(1.7rem, 5.4vw, 2.4rem); line-height: 1.05;
  text-shadow: 0 2px 14px rgba(0,0,0,.45);
}
.sig-cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-3); }
.sig-cta-skip {
  color: rgba(255,255,255,.88); font-weight: 600; font-size: var(--fs-sm); cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px; padding: .5em .4em;
}
.sig-cta-skip:hover { color: #fff; }

/* ============================================================
   PARTICLES (full-screen) — spawned by JS with random CSS vars
   ============================================================ */
.sig-particles { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.sig-p { position: absolute; left: var(--x, 50%); width: var(--sz, 16px); height: var(--sz, 16px);
  color: var(--c, var(--accent)); opacity: 0; will-change: transform, opacity; }
.sig-p svg { width: 100%; height: 100%; display: block; fill: currentColor; }

.sig-rise   { bottom: -6%; animation: sigRise   var(--t,2.2s) var(--ease-soft) var(--d,0s) forwards; }
.sig-fall   { top: -8%;    animation: sigFall   var(--t,2.2s) linear           var(--d,0s) forwards; }
.sig-explode{ top: 46%; left: 50%; animation: sigExplode var(--t,2s) var(--ease-expo) var(--d,0s) forwards; }
.sig-snow   { top: -8%;    animation: sigFall   var(--t,3.2s) linear           var(--d,0s) forwards; }
.sig-rain   { top: -4%;    animation: sigRain   var(--t,0.9s) linear           var(--d,0s) forwards; }
.sig-drift  { bottom: -6%; animation: sigDrift  var(--t,2.6s) var(--ease-soft) var(--d,0s) forwards; }

@keyframes sigRise   { 0%{opacity:0;transform:translate(-50%,0) scale(.4)} 14%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-88vh) scale(1)} }
@keyframes sigFall   { 0%{opacity:0;transform:translate(-50%,0) rotate(0)} 10%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),108vh) rotate(var(--rot,200deg))} }
@keyframes sigExplode{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)} 12%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-80px))) scale(1) rotate(var(--rot,180deg))} }
@keyframes sigRain   { 0%{opacity:0;transform:translate(-50%,0) scaleY(.8)} 20%{opacity:.85} 100%{opacity:0;transform:translate(-50%,82vh) scaleY(1)} }
@keyframes sigDrift  { 0%{opacity:0;transform:translate(-50%,0) scale(.5)} 20%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),-78vh) scale(1)} }

/* ============================================================
   SHARED scene helpers
   ============================================================ */
.sig-svg [class*="sig-"] { transform-box: fill-box; transform-origin: center; }

/* gate: entrance animations only run while animating (not instant / reduced) */
@keyframes sigDraw   { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes sigPop    { 0%{opacity:0;transform:scale(0)} 70%{opacity:1;transform:scale(1.3)} 100%{transform:scale(1)} }
@keyframes sigStarPop{ 0%{opacity:0;transform:scale(0) rotate(-90deg)} 70%{opacity:1;transform:scale(1.2) rotate(10deg)} 100%{transform:scale(1) rotate(0)} }
@keyframes sigSpin   { to { transform: rotate(360deg); } }
@keyframes sigTwinkle{ 0%,100%{opacity:.4;transform:scale(.8)} 50%{opacity:1;transform:scale(1.18)} }

/* ============================================================
   LOVE — central heart beats, halo pulses, hearts rise
   ============================================================ */
.sig--love .sig-heart-main { fill: var(--accent); }
.sig--love .sig-halo { fill: var(--gold); opacity: .14; }
.sig-stage.sig--love.go:not(.s-instant) .sig-heart-main { animation: sigHeartIn .7s var(--ease-back) both, sigBeat 1.2s var(--ease-soft) .8s infinite; }
.sig-stage.sig--love.go:not(.s-instant) .sig-halo { animation: sigHaloPulse 2.2s var(--ease-soft) infinite; }
@keyframes sigHeartIn { 0%{opacity:0;transform:scale(.2)} 60%{opacity:1;transform:scale(1.12)} 100%{transform:scale(1)} }
@keyframes sigBeat { 0%,100%{transform:scale(1)} 30%{transform:scale(1.07)} 45%{transform:scale(1)} 60%{transform:scale(1.04)} }
@keyframes sigHaloPulse { 0%,100%{opacity:.10;transform:scale(.9)} 50%{opacity:.22;transform:scale(1.08)} }

/* ============================================================
   BIRTHDAY — cake rises, candles light one by one
   ============================================================ */
.sig-cake .sig-plate { fill: rgba(255,255,255,.92); }
.sig-cake .sig-tier  { fill: var(--accent); }
.sig-cake .sig-frost { fill: none; stroke: color-mix(in srgb, #fff 78%, var(--accent)); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.sig-cake .sig-candle{ fill: var(--gold); }
.sig-cake .sig-flame { fill: #FFB23E; transform-origin: bottom center; }
.sig-cake .sig-glow circle { fill: #FFD66B; opacity: .55; filter: blur(3px); }
.sig-cake .sig-cake-rise { transform-box: view-box; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-cake-rise { animation: sigCakeRise .8s var(--ease-back) both; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-flame { animation: sigFlameIn .35s var(--ease-back) both, sigFlicker .5s var(--ease-soft) infinite; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-flame.f1 { animation-delay: .95s, 1.35s; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-flame.f2 { animation-delay: 1.10s, 1.55s; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-flame.f3 { animation-delay: 1.25s, 1.70s; }
.sig-stage.sig--birthday.go:not(.s-instant) .sig-glow circle { animation: sigGlowIn .5s ease 1.2s both, sigGlowFlicker 1.4s ease 1.8s infinite; }
@keyframes sigCakeRise { 0%{opacity:0;transform:translateY(72px)} 60%{opacity:1} 100%{transform:translateY(0)} }
@keyframes sigFlameIn { 0%{opacity:0;transform:scaleY(0)} 100%{opacity:1;transform:scaleY(1)} }
@keyframes sigFlicker { 0%,100%{transform:scaleY(1) translateY(0)} 50%{transform:scaleY(1.14) translateY(-1px)} }
@keyframes sigGlowIn { from{opacity:0} to{opacity:.55} }
@keyframes sigGlowFlicker { 0%,100%{opacity:.42} 50%{opacity:.65} }

/* ============================================================
   BABY — moon + cloud float in, stars twinkle
   ============================================================ */
.sig--baby .sig-moon { fill: var(--gold); }
.sig--baby .sig-cloud ellipse { fill: rgba(255,255,255,.94); }
.sig--baby .sig-tw { fill: var(--gold); }
.sig-stage.sig--baby.go:not(.s-instant) .sig-baby-float { animation: sigBabyIn .9s var(--ease-back) both, sigFloat 4s var(--ease-soft) 1s infinite alternate; transform-box: view-box; }
.sig-stage.sig--baby.go:not(.s-instant) .sig-tw { animation: sigTwinkle 2.4s var(--ease-soft) infinite; }
.sig-stage.sig--baby.go:not(.s-instant) .sig-tw.t2 { animation-delay: .8s; }
.sig-stage.sig--baby.go:not(.s-instant) .sig-tw.t3 { animation-delay: 1.4s; }
@keyframes sigBabyIn { 0%{opacity:0;transform:translateY(28px) scale(.82)} 100%{opacity:1;transform:none} }
@keyframes sigFloat { 0%{transform:translateY(0)} 100%{transform:translateY(-10px)} }

/* ============================================================
   THANKS — stems draw, bouquet blooms
   ============================================================ */
.sig--thanks .sig-stem, .sig--thanks .sig-ribbon { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 100; }
.sig--thanks .sig-ribbon { stroke: var(--gold); }
.sig--thanks .sig-leaf { fill: var(--accent); }
.sig--thanks .sig-petal { fill: var(--gold); }
.sig--thanks .sig-core { fill: var(--accent); }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-stem { animation: sigDraw .8s var(--ease-soft) both; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-ribbon { animation: sigDraw .6s var(--ease-soft) .6s both; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-leaf { animation: sigBloom .5s var(--ease-back) .5s both; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-bloom { animation: sigBloom .6s var(--ease-back) both; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-bloom.b1 { animation-delay: .8s; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-bloom.b2 { animation-delay: .95s; }
.sig-stage.sig--thanks.go:not(.s-instant) .sig-bloom.b3 { animation-delay: 1.1s; }
@keyframes sigBloom { 0%{opacity:0;transform:scale(0) rotate(-40deg)} 70%{opacity:1;transform:scale(1.15) rotate(8deg)} 100%{transform:scale(1) rotate(0)} }

/* ============================================================
   CONGRATS — starburst + rays + confetti
   ============================================================ */
.sig--congrats .sig-bigstar { fill: var(--gold); }
.sig--congrats .sig-rays path { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; }
.sig--congrats .sig-rays { transform-box: view-box; transform-origin: 100px 100px; }
.sig-stage.sig--congrats.go:not(.s-instant) .sig-rays { animation: sigRayBurst .6s var(--ease-expo) both; }
.sig-stage.sig--congrats.go:not(.s-instant) .sig-bigstar { animation: sigStarPop .7s var(--ease-back) both, sigSpin 7s linear .8s infinite; }
@keyframes sigRayBurst { 0%{opacity:0;transform:scale(0)} 100%{opacity:.85;transform:scale(1)} }

/* ============================================================
   GETWELL — sun rises, rays turn, warm heart
   ============================================================ */
.sig--getwell .sig-warmhalo { fill: var(--gold); opacity: .14; }
.sig--getwell .sig-sun { fill: var(--gold); }
.sig--getwell .sig-sunrays path { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; fill: none; }
.sig--getwell .sig-getheart { fill: var(--rose); }
.sig--getwell .sig-sunrays { transform-box: view-box; transform-origin: 100px 104px; }
.sig--getwell .sig-sun-rise { transform-box: view-box; }
.sig-stage.sig--getwell.go:not(.s-instant) .sig-sun-rise { animation: sigSunRise 1s var(--ease-back) both; }
.sig-stage.sig--getwell.go:not(.s-instant) .sig-sunrays { animation: sigRayBurst .6s var(--ease-expo) 1s both, sigSpin 22s linear 1.6s infinite; }
.sig-stage.sig--getwell.go:not(.s-instant) .sig-warmhalo { animation: sigHaloPulse 2.4s var(--ease-soft) infinite; }
.sig-stage.sig--getwell.go:not(.s-instant) .sig-getheart { animation: sigStarPop .6s var(--ease-back) 1s both, sigBeat 1.3s var(--ease-soft) 1.7s infinite; }
@keyframes sigSunRise { 0%{opacity:0;transform:translateY(60px)} 100%{opacity:1;transform:translateY(0)} }

/* ============================================================
   WEDDING — two rings glide together + gold glow, petal rain
   ============================================================ */
.sig-wed .sig-ring circle { fill: none; stroke: var(--gold); stroke-width: 6; }
.sig-wed .sig-gem { fill: var(--gold); }
.sig-stage.sig--wedding.go:not(.s-instant) .r-left { animation: sigRingLeft .9s var(--ease-back) both, sigRingGlow 1.8s var(--ease-soft) 1s infinite alternate; }
.sig-stage.sig--wedding.go:not(.s-instant) .r-right { animation: sigRingRight .9s var(--ease-back) both, sigRingGlow 1.8s var(--ease-soft) 1.2s infinite alternate; }
.sig-stage.sig--wedding.go:not(.s-instant) .sig-gem { animation: sigTwinkle 1.8s var(--ease-soft) 1s infinite; }
@keyframes sigRingLeft  { 0%{opacity:0;transform:translateX(-110px) rotate(-26deg)} 100%{opacity:1;transform:none} }
@keyframes sigRingRight { 0%{opacity:0;transform:translateX(110px) rotate(26deg)} 100%{opacity:1;transform:none} }
@keyframes sigRingGlow  { from{filter:drop-shadow(0 0 0 transparent)} to{filter:drop-shadow(0 0 9px var(--gold))} }

/* ============================================================
   HOLIDAYS — tree grows, ornaments pop, star glows, snow
   ============================================================ */
.sig--holidays .sig-tree-body { fill: var(--accent); }
.sig--holidays .sig-trunk { fill: #7A5230; }
.sig--holidays .sig-orn circle { fill: var(--gold); }
.sig--holidays .sig-orn circle:nth-child(even) { fill: var(--holidays-2); }
.sig--holidays .sig-treestar { fill: var(--gold); }
.sig--holidays .sig-tree { transform-box: view-box; transform-origin: 100px 182px; }
.sig-stage.sig--holidays.go:not(.s-instant) .sig-tree { animation: sigTreeIn .8s var(--ease-back) both; }
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle { animation: sigPop .4s var(--ease-back) both; }
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle:nth-child(1){animation-delay:.9s}
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle:nth-child(2){animation-delay:1.0s}
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle:nth-child(3){animation-delay:1.1s}
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle:nth-child(4){animation-delay:1.2s}
.sig-stage.sig--holidays.go:not(.s-instant) .sig-orn circle:nth-child(5){animation-delay:1.3s}
.sig-stage.sig--holidays.go:not(.s-instant) .sig-treestar { animation: sigStarPop .6s var(--ease-back) .8s both, sigGlowFlicker 1.4s ease 1.5s infinite; }
@keyframes sigTreeIn { 0%{opacity:0;transform:scaleY(.1) scaleX(.6)} 60%{opacity:1} 100%{transform:none} }

/* ============================================================
   SORRY — rain cloud, then clears to a rainbow + sun
   ============================================================ */
.sig-sorry .sig-raincloud ellipse { fill: color-mix(in srgb, var(--mood-slate) 55%, #fff); }
.sig-sorry .sig-raincloud { opacity: 0; transform-box: view-box; }
.sig-sorry .rb { fill: none; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 0; }
.sig-sorry .rb1 { stroke: #E1574C; } .sig-sorry .rb2 { stroke: #E8943B; } .sig-sorry .rb3 { stroke: #E7C24A; }
.sig-sorry .rb4 { stroke: #5FA86A; } .sig-sorry .rb5 { stroke: #5B8AD0; }
.sig-sorry .sig-sun2 { fill: var(--gold); opacity: 1; }
.sig-stage.sig--sorry.go:not(.s-instant) .sig-raincloud { animation: sigCloudCycle 2.4s var(--ease-soft) both; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb { animation: sigDraw .9s var(--ease-soft) both; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb1 { animation-delay: 1.30s; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb2 { animation-delay: 1.42s; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb3 { animation-delay: 1.54s; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb4 { animation-delay: 1.66s; }
.sig-stage.sig--sorry.go:not(.s-instant) .rb5 { animation-delay: 1.78s; }
.sig-stage.sig--sorry.go:not(.s-instant) .sig-sun2 { animation: sigSunIn .6s var(--ease-soft) 1.6s both; }
@keyframes sigCloudCycle { 0%{opacity:0;transform:translate(0,-16px)} 12%{opacity:1;transform:translate(0,0)} 52%{opacity:1;transform:translate(0,0)} 100%{opacity:0;transform:translate(60px,-12px)} }
@keyframes sigSunIn { 0%{opacity:0;transform:scale(.4)} 100%{opacity:1;transform:scale(1)} }

/* ============================================================
   REDUCED MOTION / INSTANT — show the calm, formed end state
   ============================================================ */
.sig-stage.s-instant .sig-svg *,
.sig-stage.s-instant .sig-particles,
.sig-stage.s-instant .sig-p { animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .sig-stage, .sig-cta { transition: none !important; }
  .sig-stage * { animation: none !important; }
  .sig-p { display: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 560px) {
  .sig-cta-title { font-size: clamp(1.5rem, 7vw, 2rem); }
}