/* =========================================================
   animations.css — loader, cover opening, reveal system
   ========================================================= */
@keyframes markIn{from{opacity:0;transform:scale(.9) rotate(-6deg)}to{opacity:1;transform:none}}
@keyframes shimmer{50%{filter:drop-shadow(0 0 22px rgba(232,208,142,.6)) brightness(1.12)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.9)}to{opacity:1;transform:none}}
.loader-mark{animation:markIn 1s var(--ease) both, shimmer 2.4s ease-in-out 1s infinite}
.loader-line{animation:fadeUp .9s var(--ease) .35s both}

/* ---------- cover idle ---------- */
.cover.ready .tap-hint{animation:hintIn 1.1s var(--ease) 1.1s forwards, hintBreathe 3.6s ease-in-out 2.4s infinite}
.cover.ready .ripple{animation:ripple 2.8s ease-out 1.6s infinite}
.cover.ready .ripple.r2{animation-delay:3s}
.cover.ready .door-char{animation:settle 1.3s var(--ease) both, charBreathe 7s ease-in-out 2s infinite}
.cover.ready .door-r .door-char{animation-delay:.12s,2.8s}
@keyframes hintIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes hintBreathe{0%,100%{opacity:1;text-shadow:0 0 14px rgba(255,200,110,.45),0 1px 0 rgba(40,6,10,.6)}50%{opacity:.78;text-shadow:0 0 22px rgba(255,210,130,.7),0 1px 0 rgba(40,6,10,.6)}}
@keyframes ripple{0%{opacity:0;transform:translate(-50%,-50%) scale(.92)}20%{opacity:.8}100%{opacity:0;transform:translate(-50%,-50%) scale(1.32)}}
@keyframes settle{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes charBreathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}

/* ---------- cover opening: tap → glow → bloom → doors → light passes → settle ---------- */
.cover .door{z-index:1;transition:transform 1.6s cubic-bezier(.6,.04,.24,1)}
.cover.unlatch .tap-hint,.cover.unlatch .ripple{animation:none;opacity:0;transition:opacity .25s}
.cover.unlatch .latch{transition:transform .7s var(--ease) .35s,opacity .5s ease .5s;transform:translate(-50%,-58%) scale(1.05);opacity:0}
.cover.open .door{will-change:transform}
.cover.open .door-l{transform:rotateY(-110deg)}
.cover.open .door-r{transform:rotateY(110deg)}
.cover.open{pointer-events:none;animation:coverFade .6s ease 1.25s forwards}
@keyframes coverFade{to{opacity:0}}

/* ---------- reveal system (one vocabulary, mostly upward) ---------- */
[data-r]{opacity:0;transition:opacity .9s var(--ease) var(--d,0s),transform 1s var(--ease) var(--d,0s)}
[data-r="up"]{transform:translateY(14px)}
[data-r="art"]{transform:scale(.97)}
[data-r="orn"]{transform:translateY(6px) scaleX(.92)}
[data-r="name"]{transform:translateY(6px);filter:blur(2px);transition:opacity 1.2s var(--ease) var(--d),transform 1.3s var(--ease) var(--d),filter 1.1s var(--ease) var(--d)}
[data-r="draw"]{opacity:1}
[data-r="draw"] path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.1,.2,1) var(--d)}
[data-r="draw"] .inner{transition-delay:calc(var(--d) + .3s)}
.in [data-r]{opacity:1;transform:none}
.in [data-r="name"]{filter:none}
.in [data-r="draw"] path{stroke-dashoffset:0}
.in [data-r="fade"]{opacity:1}

/* section frame + seam settle first (0ms background, 150ms ornament) */
.sec::after{opacity:0;transform:scale(1.012);transition:opacity 1s ease .05s,transform 1.2s var(--ease) .05s}
.sec.in::after{opacity:1;transform:none}
.seam{opacity:0;transition:opacity 1s ease .15s}
.sec.in .seam{opacity:.95}

/* ---------- ambient life ---------- */
.in .hero-couple .c-groom{animation:charBreathe 7s ease-in-out 3.5s infinite}
.in .hero-couple .c-bride{animation:charBreathe 7s ease-in-out 4.4s infinite}
.hero.lit .swipe span{animation:cue 2.2s ease-in-out 1s infinite}
.in .elephant{animation:sway 8s ease-in-out 1.5s infinite;transform-origin:50% 90%}
.in .feather{animation:featherSway 9s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(.3);transform-origin:top;opacity:.3}50%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1) translateY(10px);opacity:0}}
@keyframes sway{0%,100%{transform:rotate(-1deg)}50%{transform:rotate(1deg)}}
@keyframes featherSway{0%,100%{rotate:-22deg}50%{rotate:-17deg}}

/* music eq */
.music-btn.on .eq i{animation:eq .9s ease-in-out infinite}
.music-btn.on .eq i:nth-child(2){animation-delay:-.3s}.music-btn.on .eq i:nth-child(3){animation-delay:-.6s}
@keyframes eq{0%,100%{height:4px}50%{height:15px}}

/* pause everything that is off-screen or when the tab is hidden */
.sec:not(.vis) *,.sec:not(.vis)::before,.sec:not(.vis)::after{animation-play-state:paused!important}
.paused *,.paused *::before,.paused *::after{animation-play-state:paused!important}

/* iPhone Safari: keep invitation motion alive after the first user touch. */
html.ios-motion-active .sec:not(.vis) *,
html.ios-motion-active .sec:not(.vis)::before,
html.ios-motion-active .sec:not(.vis)::after{
  animation-play-state:running !important;
}