/* The moment a card turns over: charge, flash, light, name. */

/* --- burst layer (children are placed individually so the wipe sits under the page) --- */
body[data-phase="reveal"] .site-head,body[data-phase="reveal"] main{position:relative;z-index:1}
body[data-phase="reveal"] main{overflow-x:clip}
.fx-layer>*{position:fixed;pointer-events:none}
.fx-wipe{inset:0;z-index:0;background:#fafaf8;clip-path:circle(0 at var(--fx-x) var(--fx-y));transition:clip-path 1.05s cubic-bezier(.65,0,.25,1)}
.fx-layer.is-go .fx-wipe{clip-path:circle(150vmax at var(--fx-x) var(--fx-y))}
.fx-flash{left:var(--fx-x);top:var(--fx-y);width:120vmax;aspect-ratio:1;z-index:5;border-radius:50%;transform:translate(-50%,-50%) scale(.05);background:radial-gradient(circle,#fffdf3 0,#fff6d6e6 12%,#f6e2a255 30%,transparent 60%);opacity:0}
.fx-layer.is-go .fx-flash{animation:fx-flash .9s cubic-bezier(.2,.7,.3,1) both}
.fx-ring{left:var(--fx-x);top:var(--fx-y);width:60px;aspect-ratio:1;z-index:5;border-radius:50%;border:2px solid #f0d58f;transform:translate(-50%,-50%) scale(.2);opacity:0}
.fx-layer.is-go .fx-ring{animation:fx-ring 1.1s cubic-bezier(.15,.75,.3,1) both}
.fx-layer.is-go .fx-ring-late{border-color:#0f766e88;animation-delay:.14s}
.fx-sparks{inset:0;width:100vw;height:100vh;z-index:6}
@keyframes fx-flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.05)}14%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1)}}
@keyframes fx-ring{0%{opacity:.95;transform:translate(-50%,-50%) scale(.2)}100%{opacity:0;transform:translate(-50%,-50%) scale(14);border-width:.4px}}

/* --- rays behind the chosen card --- */
.draw-rays{position:absolute;left:50%;top:50%;width:min(135vw,980px);aspect-ratio:1;translate:-50% -50%;pointer-events:none;z-index:0;opacity:0;
 background:repeating-conic-gradient(from 0deg,#f4dc9c30 0 3deg,transparent 3deg 15deg);
 -webkit-mask:radial-gradient(circle,#000 0,#000a 18%,transparent 58%);mask:radial-gradient(circle,#000 0,#000a 18%,transparent 58%);
 transition:opacity .9s ease;animation:fx-spin 48s linear infinite}
[data-draw="ready"] .draw-rays{opacity:.35}
[data-draw="drawing"] .draw-rays{opacity:1;animation:fx-spin 48s linear infinite,fx-rays-charge 2.2s ease-in both}
[data-draw="revealed"] .draw-rays{opacity:.8;background:repeating-conic-gradient(from 0deg,#0f766e14 0 3deg,transparent 3deg 15deg)}
.draw-stack{z-index:2}
@keyframes fx-spin{to{rotate:360deg}}
@keyframes fx-rays-charge{0%{scale:.7}45%{scale:1.05}52%{scale:1.3}100%{scale:1.1}}

/* --- the draw itself: lift and tremble, turn at the flash, settle heavy --- */
[data-draw="drawing"] .draw-lift{animation:fx-draw-lift 2.2s cubic-bezier(.3,.6,.25,1) both}
[data-draw="drawing"] .draw-turn{animation:fx-draw-face 2.2s cubic-bezier(.45,0,.2,1) both}
[data-draw="drawing"] .draw-heading,[data-draw="drawing"] .draw-actions{opacity:0;transition:opacity .45s ease}
[data-draw="drawing"] .draw-glow{animation:fx-glow-charge 2.2s ease-in both}
@keyframes fx-draw-lift{
 0%{transform:translateY(0) scale(1)}
 28%{transform:translateY(-28px) scale(1.06) rotate(0)}
 31%{transform:translateY(-29px) scale(1.065) rotate(-1.4deg)}
 34%{transform:translateY(-30px) scale(1.07) rotate(1.4deg)}
 37%{transform:translateY(-31px) scale(1.075) rotate(-1.1deg)}
 40%{transform:translateY(-32px) scale(1.08) rotate(.9deg)}
 43%{transform:translateY(-33px) scale(1.085) rotate(0)}
 56%{transform:translateY(-38px) scale(1.16)}
 74%{transform:translateY(4px) scale(.99)}
 86%{transform:translateY(-3px) scale(1.01)}
 100%{transform:translateY(0) scale(1)}}
@keyframes fx-draw-face{0%{transform:rotateY(180deg)}43%{transform:rotateY(180deg);animation-timing-function:cubic-bezier(.55,0,.35,1)}62%{transform:rotateY(-12deg);animation-timing-function:ease-out}72%{transform:rotateY(5deg)}82%,100%{transform:rotateY(0)}}
@keyframes fx-glow-charge{0%{opacity:.6;transform:translate(-50%,-50%) scale(.9)}45%{opacity:1;transform:translate(-50%,-50%) scale(1.25)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* --- after the turn --- */
[data-draw="revealed"] .draw-heading,[data-draw="revealed"] .draw-actions{animation:fx-rise .7s .35s cubic-bezier(.2,.8,.2,1) both}
[data-draw="revealed"] .draw-heading h1{animation:none}
[data-draw="revealed"] .draw-heading #reading-status{animation:fx-rise .6s 1.05s cubic-bezier(.2,.8,.2,1) both}
.fx-char{display:inline-block;animation:fx-char .75s calc(.25s + var(--i)*70ms) cubic-bezier(.2,.9,.25,1.15) both}
@keyframes fx-char{0%{opacity:0;transform:translateY(.55em) scale(.8);filter:blur(7px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:none;filter:none}}
@keyframes fx-rise{0%{opacity:0;transform:translateY(12px)}100%{opacity:1;transform:none}}
[data-draw="revealed"] .draw-lift{transform:rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .25s ease-out,filter .8s ease}

/* --- foil: one sweep on arrival, then it follows the light --- */
.fx-holo{position:relative}
.fx-holo:after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;mix-blend-mode:color-dodge;opacity:0;
 background:radial-gradient(circle at var(--fx-mx,50%) var(--fx-my,50%),#fff6d855 0,transparent 42%),
 linear-gradient(115deg,transparent 30%,#ffe7a633 42%,#b8fff044 48%,#f7c9ff33 54%,transparent 66%);
 background-size:100% 100%,260% 100%;background-position:0 0,var(--fx-sweep,100%) 0;transition:opacity .35s ease}
.fx-holo.is-sweeping:after{animation:fx-sweep 1.3s .2s cubic-bezier(.4,0,.2,1) both}
.fx-tiltable.is-lit .fx-holo:after,.fx-holo.fx-tiltable.is-lit:after{opacity:.9}
@keyframes fx-sweep{0%{opacity:0;background-position:0 0,100% 0}20%{opacity:1}100%{opacity:0;background-position:0 0,0% 0}}

/* result page: the anchor card leans too */
.result-anchor-front>.tarot{transform:perspective(900px) rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .25s ease-out}

/* --- a shared link arrives like a card being handed over --- */
.shared-character .hero-visual{perspective:1100px}
.shared-character .fx-shared-card{position:relative;border-radius:6px;overflow:hidden;transform:rotateX(var(--fx-rx,0deg)) rotateY(var(--fx-ry,0deg));transition:transform .25s ease-out;box-shadow:0 26px 60px -30px #29413899}
.shared-character .fx-shared-card img{display:block;box-shadow:none!important;border-radius:0!important}
.shared-character .hero-visual{animation:fx-hand-over 1.1s cubic-bezier(.2,.85,.25,1) both}
.shared-character .hero-copy>*{animation:fx-rise .7s cubic-bezier(.2,.8,.2,1) both}
.shared-character .hero-copy>*:nth-child(1){animation-delay:.35s}
.shared-character .hero-copy>*:nth-child(2){animation-delay:.45s}
.shared-character .hero-copy>*:nth-child(3){animation-delay:.6s}
.shared-character .hero-copy>*:nth-child(4){animation-delay:.68s}
.shared-character .hero-copy>*:nth-child(5){animation-delay:.76s}
.shared-character .hero-copy>*:nth-child(6){animation-delay:.84s}
.shared-character .hero-copy>*:nth-child(n+7){animation-delay:.9s}
.shared-character #start-shared{position:relative;overflow:hidden}
.shared-character #start-shared:after{content:"";position:absolute;inset:0 auto 0 -40%;width:35%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);transform:skewX(-18deg);animation:fx-button-shine 4.5s 2s ease-in-out infinite}
@keyframes fx-hand-over{0%{opacity:0;transform:translateY(34px) rotateX(18deg) rotateZ(-3deg) scale(.94)}100%{opacity:1;transform:none}}
@keyframes fx-button-shine{0%,70%{left:-40%}100%{left:120%}}

/* --- top: the title arrives, dust drifts, later scenes rise in --- */
.fx-dust{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;mix-blend-mode:screen}
body[data-phase="home"] .hero .hero-copy{z-index:1}
body[data-phase="home"] .hero .hero-copy>*{animation:fx-rise .8s cubic-bezier(.2,.8,.2,1) both}
body[data-phase="home"] .hero .hero-copy>.eyebrow{animation-delay:.15s}
body[data-phase="home"] .hero h1{animation:none}
body[data-phase="home"] .hero h1 span{animation:fx-title-in 1s cubic-bezier(.16,.9,.25,1) both}
body[data-phase="home"] .hero h1 span:first-child{animation-delay:.3s}
body[data-phase="home"] .hero h1 span:last-child{animation-delay:.48s;background:linear-gradient(100deg,#fff8e5 0 40%,#ffe7a6 48%,#fff8e5 56% 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fx-title-in 1s .48s cubic-bezier(.16,.9,.25,1) both,fx-title-shine 5s 1.6s ease-in-out infinite}
body[data-phase="home"] .hero .hero-copy>.lead{animation-delay:.75s}
body[data-phase="home"] .hero .hero-copy>.hero-tags{animation-delay:.85s}
body[data-phase="home"] .hero .hero-copy>#start{animation-delay:.95s}
body[data-phase="home"] .hero .hero-copy>*:nth-child(n+6){animation-delay:1.05s}
body[data-phase="home"] #start,body[data-phase="home"] #start-bottom,body[data-phase="home"] #start-ritual{position:relative;overflow:hidden}
body[data-phase="home"] #start:after,body[data-phase="home"] #start-bottom:after,body[data-phase="home"] #start-ritual:after{content:"";position:absolute;inset:0 auto 0 -40%;width:35%;background:linear-gradient(100deg,transparent,#ffffff4d,transparent);transform:skewX(-18deg);animation:fx-button-shine 4.5s 2.2s ease-in-out infinite;pointer-events:none}
@keyframes fx-title-in{0%{opacity:0;transform:translateY(.35em);filter:blur(10px);letter-spacing:.04em}100%{opacity:1;transform:none;filter:none}}
@keyframes fx-title-shine{0%,60%{background-position:100% 0}100%{background-position:0 0}}
.fx-watch>*{transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform 1s cubic-bezier(.2,.8,.2,1)}
.fx-watch:not(.is-in)>*{opacity:0;transform:translateY(28px)}
.fx-watch.is-in>*:nth-child(2){transition-delay:.12s}
.fx-watch.is-in>*:nth-child(3){transition-delay:.24s}
.fx-watch.is-in>*:nth-child(4){transition-delay:.36s}
.fx-watch.ensemble:not(.is-in) .ensemble-art{transform:scale(.96)}
.ensemble-art{transition:transform 1.4s cubic-bezier(.2,.8,.2,1)}

@media(prefers-reduced-motion:reduce){
 .fx-dust{display:none}
 body[data-phase="home"] .hero .hero-copy>*,body[data-phase="home"] .hero h1 span,body[data-phase="home"] #start:after,body[data-phase="home"] #start-bottom:after,body[data-phase="home"] #start-ritual:after{animation:none!important}
 body[data-phase="home"] .hero h1 span:last-child{color:#fff8e5;background:none}
 .fx-layer,.draw-rays{display:none}
 .fx-char,.shared-character .hero-visual,.shared-character .hero-copy>*,.shared-character #start-shared:after,.fx-holo:after{animation:none!important}
 [data-draw] .draw-heading,[data-draw] .draw-actions,[data-draw] #reading-status{animation:none!important;opacity:1}
}

/* ritual peek: faces catch a little light while they are up */
.ritual-card{transition:filter .35s ease}
.ritual-card.is-peeking{filter:drop-shadow(0 16px 16px #000b) drop-shadow(0 0 18px #f3dc9b59)}

/* Keep the mobile introduction readable during fast swipes and WebKit repainting. */
@media(max-width:760px),(pointer:coarse){
 body[data-phase="home"] .fx-watch>*{opacity:1;transform:none;transition:none}
 body[data-phase="home"] .fx-watch.ensemble .ensemble-art{transform:none}
}