/* Shared night-sky stage; each reading has its own choreography. */
.method-effect{position:fixed;inset:0;z-index:11000;box-sizing:border-box;background:#080e1e;color:#f3e9d6;display:flex;overflow:auto;padding:28px 20px;isolation:isolate}
.effect-atmosphere{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:radial-gradient(ellipse at 50% 42%,#283c59 0,#121d35 36%,#080e1e 75%)}
.effect-nebula{position:absolute;inset:-35%;background:conic-gradient(from 30deg at 50% 50%,transparent,#526c8d28,transparent 35%,#bda26712,transparent 80%);animation:motion-nebula 14s linear infinite;filter:blur(24px)}
.effect-halo{position:absolute;width:min(92vw,640px);aspect-ratio:1;top:43%;left:50%;border:1px solid #d8b87816;border-radius:50%;box-shadow:0 0 90px #a5c7e00b,inset 0 0 80px #9cb4dc0a;transform:translate(-50%,-50%);animation:motion-halo 3.6s ease-out both}
.effect-radiance{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 43%,#ead3a326,transparent 42%);animation:motion-radiance 3.6s ease both}
.effect-dust{position:absolute;left:var(--left);top:var(--top);width:2px;height:2px;border-radius:50%;background:#fbe1af;box-shadow:0 0 7px #f5dba0;animation:motion-dust 3.6s ease-in-out calc(var(--i)*-.11s) infinite}
.effect-content{width:min(100%,440px);margin:auto;text-align:center;position:relative;flex-shrink:0}
.effect-brand{font:15px Georgia,serif;letter-spacing:.38em;color:#edd5a3;margin:0 0 9px;padding-left:.38em}
.effect-category{font:9px/1.5 Georgia,serif;letter-spacing:.3em;color:#aebed1;margin:0 0 12px}
.effect-stage{position:relative;width:min(100%,316px);aspect-ratio:1;margin:0 auto 12px;display:grid;place-items:center}
.effect-stage-ring{position:absolute;inset:0;border:1px solid #d8b87818;border-radius:50%;box-shadow:inset 0 0 40px #a7c4ec06;animation:motion-stage-ring 3.6s ease both}
.effect-stage-ring:before,.effect-stage-ring:after{content:'';position:absolute;inset:11px;border:1px dashed #d8b87818;border-radius:50%}.effect-stage-ring:after{inset:29px;border-style:solid;border-color:#e5d2a50d}
.effect-art{position:relative;width:86%;height:86%;display:grid;place-items:center;perspective:1000px;color:#dfbe81;filter:drop-shadow(0 0 9px #e4c18a28)}
.effect-art>svg,.motion-universe,.motion-crystal{width:100%;height:100%;overflow:visible}.motion-universe>svg,.motion-crystal>svg{width:100%;height:100%;overflow:visible}
.effect-stage-flare{position:absolute;inset:0;pointer-events:none;border-radius:50%;background:radial-gradient(ellipse,#ffedc359 0,transparent 60%);mix-blend-mode:screen;animation:motion-flare 3.6s ease both}
.effect-content h2{font-family:var(--serif,serif);font-size:clamp(18px,4.5vw,25px);font-weight:500;line-height:1.7;letter-spacing:.055em;margin:0 0 8px;text-wrap:balance}
.effect-note{font-size:12px;line-height:1.8;color:#adbad0;margin:0 0 22px}
.effect-actions{display:flex;flex-direction:column;align-items:center;gap:8px}
.effect-skip,.effect-cancel{box-sizing:border-box;min-height:44px;margin:0;cursor:pointer;font:inherit;transition:background .2s,border-color .2s;touch-action:manipulation}
.effect-skip{padding:10px 36px;border:1px solid #d6b675;background:linear-gradient(110deg,#ddc08b,#f0dbad,#d6b675);color:#14203a;border-radius:30px;box-shadow:0 3px 20px #d8b87813;font-size:14px}
.effect-skip:hover{background:#f7e5bd}.effect-cancel{padding:8px 24px;border:1px solid #9faec133;border-radius:30px;background:#121d3540;color:#b6c2d5;font-size:12px}.effect-cancel:hover{border-color:#d8b87888;background:#24334c}
.method-effect button:focus-visible{outline:2px solid #eff4ff;outline-offset:4px}
.motion-wheel,.motion-calendar-outer,.motion-calendar-inner,.motion-calendar-core,.motion-center,.motion-final-star{transform-origin:120px 120px}
.motion-wheel-outer{animation:motion-orbit 3.6s cubic-bezier(.12,.55,.2,1) both}.motion-wheel-inner{animation:motion-counter 3.6s cubic-bezier(.12,.55,.2,1) both}
.motion-constellation{stroke-dasharray:1;stroke-dashoffset:1;animation:motion-trace 1.7s ease .5s both}
.motion-star{animation:motion-star 1.2s ease calc(.45s + var(--i)*.19s) both}.motion-center{animation:motion-center 2s ease 1.3s both}
.motion-number{font:25px Georgia,serif;animation:motion-number 2.7s cubic-bezier(.45,0,.2,1) calc(var(--i)*.045s) both}.motion-answer{font:58px Georgia,serif;animation:motion-answer 1.2s ease 2s both}.motion-seal{animation:motion-answer 1s ease 1.8s both}
.motion-name-stream{position:absolute;inset:0;overflow:hidden}.motion-name-stream span{position:absolute;left:calc(50% + var(--x));top:15%;font:25px Georgia,serif;animation:motion-letter 1.7s ease calc(var(--i)*.06s) both}.motion-name-orb{animation:motion-rise 1.2s ease calc(.9s + var(--i)*.35s) both}
.motion-base{stroke-dasharray:450;stroke-dashoffset:450;animation:motion-trace 1.1s ease both}.motion-pillar{animation:motion-pillar 1.7s cubic-bezier(.16,.8,.3,1) calc(var(--i)*.25s) both}.motion-pillar-light{stroke-dasharray:130;stroke-dashoffset:130;animation:motion-trace 1.5s ease calc(.5s + var(--i)*.25s) both;filter:drop-shadow(0 0 4px #ffdc96)}
.motion-nine-star{animation:motion-nine 2.5s cubic-bezier(.16,.7,.2,1) calc(var(--i)*.06s) both}.motion-calendar-outer{animation:motion-calendar 3.6s cubic-bezier(.1,.5,.15,1) both}.motion-calendar-inner{animation:motion-calendar-back 3.6s cubic-bezier(.1,.5,.15,1) both}.motion-calendar-core{animation:motion-center 1.8s ease 1.4s both}
.motion-gem-body{transform-origin:120px 120px;animation:motion-gem 3.6s cubic-bezier(.2,.7,.2,1) both}.motion-gem-shadow{transform-origin:120px 212px;animation:motion-shadow 3.6s ease both}.motion-gem-glint{animation:motion-glint 3.6s ease both;filter:drop-shadow(0 0 5px #fff4c6)}
.motion-seven{animation:motion-seven 2.8s cubic-bezier(.45,0,.2,1) calc(var(--i)*.04s) both}.motion-final-star{animation:motion-center 1.2s ease 2s both}
/* A deck fans out, then the already selected card(s) turn face up. */
.motion-card-fan{position:absolute;inset:0;perspective:1000px}.motion-card-fan i{position:absolute;left:calc(50% - 43px);top:calc(50% - 70px);width:86px;height:140px;box-sizing:border-box;border:1px solid #bd9b64;border-radius:7px;background:repeating-linear-gradient(45deg,#16223b 0 9px,#26334d 9px 10px);box-shadow:0 12px 20px #0005;transform-origin:50% 125%;display:grid;place-items:center;animation:motion-fan 2.6s cubic-bezier(.2,.8,.2,1) both}.motion-card-fan i span{font-size:38px;color:#d9ba81;position:absolute;inset:8px;border:1px solid #d9ba8140;display:grid;place-items:center}
.effect-reveal{position:absolute;inset:0;display:grid;place-items:center;perspective:1000px}.effect-card-shell{position:absolute;left:calc(50% - 70px);top:calc(50% - 110px);width:140px;height:220px;perspective:1000px;animation:motion-card-lift 1.4s ease 1.05s both}.effect-card{position:relative;width:100%;height:100%;transform-style:preserve-3d;animation:motion-card-turn 1.8s cubic-bezier(.2,.7,.2,1) 1.65s both}
.effect-card-front,.effect-card-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border:1px solid #d5b274;border-radius:9px;overflow:hidden;background:#17243d;box-shadow:0 15px 30px #0006}
.effect-card-back{background:repeating-linear-gradient(45deg,#19253f 0 12px,#2a3851 12px 13px);display:flex;align-items:center;justify-content:center;flex-direction:column}.effect-card-back:before{content:'';position:absolute;inset:8px;border:1px solid #d8b87870;border-radius:4px}.effect-card-back span{font-size:64px;line-height:1.5}.effect-card-back small{font:8px Georgia,serif;letter-spacing:.19em}.effect-card-front{transform:rotateY(180deg)}
.effect-card-front .drawn-card{width:100%;height:100%;max-width:none;object-fit:cover;margin:0;border-radius:0}
.effect-three .effect-card-shell{left:calc(50% - 40px);top:calc(50% - 65px);width:80px;height:130px;animation-name:motion-three-lift;animation-delay:calc(.9s + var(--i)*.12s)}.effect-three .effect-card{animation-delay:calc(1.7s + var(--i)*.2s)}.effect-three .effect-card-back span{font-size:38px}.effect-three .effect-card-back small{font-size:6px}
/* Carved stone: the selected rune is traced, without drawing another result. */
.motion-rune-stone{inset:12% 19%;border:1px solid #c6ae7b70;border-radius:43% 39% 40% 34% / 27% 29% 28% 30%;background:radial-gradient(ellipse at 30% 20%,#445367,#202b3e 55%,#111b2c);box-shadow:inset 4px 4px 9px #ced9de14,inset -8px -10px 20px #0008,0 22px 36px #0007;animation:motion-rune 2.5s cubic-bezier(.16,.8,.2,1) both}
.method-effect .motion-rune-stone .rune-symbol{width:100%;height:100%;margin:0;padding:24px;box-sizing:border-box;background:none;border:0;border-radius:0;filter:drop-shadow(0 0 4px #edca86)}.motion-rune-stone svg path{stroke-dasharray:1;stroke-dashoffset:1;animation:motion-trace 1.5s ease .8s both}
.method-effect[data-method='iching'] .effect-reveal>svg{width:75%;height:75%;filter:drop-shadow(0 0 7px #d8b87844)}.method-effect[data-method='iching'] [data-line]{animation:motion-line .8s ease calc(var(--i)*.3s) both}
@keyframes motion-nebula{to{transform:rotate(360deg)}}
@keyframes motion-halo{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1.1)}}
@keyframes motion-radiance{0%,100%{opacity:.25}60%{opacity:1}}
@keyframes motion-dust{0%,100%{opacity:.1;transform:translateY(16px)}50%{opacity:.8;transform:translate(var(--drift),-24px)}}
@keyframes motion-stage-ring{from{opacity:0;transform:scale(.65) rotate(-45deg)}to{opacity:1;transform:scale(1) rotate(15deg)}}
@keyframes motion-flare{0%,55%,100%{opacity:0;transform:scale(.4)}75%{opacity:.7;transform:scale(1.2)}}
@keyframes motion-orbit{from{opacity:0;transform:rotate(-140deg) scale(.7)}30%{opacity:1}to{opacity:1;transform:rotate(20deg) scale(1)}}
@keyframes motion-counter{from{opacity:0;transform:rotate(130deg) scale(.7)}to{opacity:1;transform:rotate(-15deg) scale(1)}}
@keyframes motion-trace{to{stroke-dashoffset:0}}
@keyframes motion-star{from{opacity:0;filter:blur(5px)}60%{opacity:1;filter:drop-shadow(0 0 5px #fff0ce)}to{opacity:1;filter:blur(0)}}
@keyframes motion-center{from{opacity:0;transform:scale(.4) rotate(-60deg)}65%{opacity:1;filter:drop-shadow(0 0 8px #ffe3a9)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes motion-number{0%{opacity:0}25%,45%{opacity:1;transform:translate(0,0)}80%,100%{opacity:0;transform:translate(var(--x),var(--y)) scale(.98)}}
@keyframes motion-answer{from{opacity:0;filter:blur(10px)}to{opacity:1;filter:blur(0)}}
@keyframes motion-letter{0%{opacity:0;transform:translateY(-35px) rotate(-15deg)}30%{opacity:.8}100%{opacity:0;transform:translateY(140px) rotate(20deg)}}
@keyframes motion-rise{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes motion-pillar{from{opacity:0;transform:translateY(65px)}60%{opacity:1}to{opacity:1;transform:translateY(0)}}
@keyframes motion-nine{0%{opacity:0;transform:translate(var(--x),var(--y))}20%{opacity:.8}to{opacity:1;transform:translate(0,0)}}
@keyframes motion-calendar{from{opacity:0;transform:rotate(-200deg) scale(.7)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes motion-calendar-back{from{opacity:0;transform:rotate(220deg) scale(.4)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes motion-gem{0%{opacity:0;transform:translateY(45px) rotate(-25deg) scale(.6)}45%{opacity:1;transform:translateY(-10px) rotate(8deg) scale(1)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes motion-shadow{from{opacity:0;transform:scale(.4)}to{opacity:.8;transform:scale(1)}}
@keyframes motion-glint{0%,35%{opacity:0}65%{opacity:1}80%{opacity:.2}100%{opacity:.8}}
@keyframes motion-seven{0%{opacity:0;transform:translate(0,0)}25%,45%{opacity:1;transform:translate(0,0)}90%,100%{opacity:0;transform:translate(var(--x),var(--y))}}
@keyframes motion-fan{0%{opacity:0;transform:translateY(35px) rotate(0)}20%{opacity:1}50%,70%{opacity:1;transform:translateY(0) rotate(calc(var(--slot)*12deg))}100%{opacity:0;transform:translateY(20px) rotate(calc(var(--slot)*15deg)) scale(.8)}}
@keyframes motion-card-lift{from{opacity:0;transform:translateY(50px) scale(.75) rotate(-9deg)}to{opacity:1;transform:translateY(0) scale(1) rotate(0)}}
@keyframes motion-three-lift{from{opacity:0;transform:translateY(40px) scale(.8)}to{opacity:1;transform:translateX(calc(var(--slot)*89px)) scale(1)}}
@keyframes motion-card-turn{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}
@keyframes motion-rune{from{opacity:0;transform:translateY(60px) rotate(-18deg) scale(.7)}60%{opacity:1;transform:translateY(-6px) rotate(3deg) scale(1)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
@keyframes motion-line{from{opacity:0;transform:translateY(10px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
@media(max-width:350px){.method-effect{padding:22px 16px}.effect-stage{width:270px}.effect-three .effect-card-shell{width:72px;height:117px;left:calc(50% - 36px);top:calc(50% - 58px)}.effect-three{transform:scale(.92)}}
@media(max-height:680px){.method-effect{padding-top:18px;padding-bottom:18px}.effect-stage{width:238px;margin-bottom:8px}.effect-brand{font-size:12px;margin-bottom:5px}.effect-category{margin-bottom:6px}.effect-note{margin-bottom:12px}.effect-content h2{font-size:19px}.effect-art:has(.effect-three){width:100%}.effect-card-shell{width:112px;height:176px;left:calc(50% - 56px);top:calc(50% - 88px)}}
@media(max-height:450px) and (min-width:600px){.effect-content{max-width:650px;width:100%;display:grid;grid-template-columns:240px 1fr;column-gap:24px}.effect-stage{grid-column:1;grid-row:1 / 7;margin:auto;width:235px}.effect-brand,.effect-category,.effect-content h2,.effect-note,.effect-actions{grid-column:2}.effect-brand{margin-top:5px}.effect-content h2{font-size:19px;margin-top:10px}.effect-note{font-size:11px}.effect-actions{gap:6px}}
@media(prefers-reduced-motion:reduce){.method-effect *{animation:none!important}}
.tarot-motion-canvas{position:absolute;width:min(92vw,600px);height:145%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:3}.method-effect[data-tarot-motion] .effect-stage-ring,.method-effect[data-tarot-motion] .effect-stage-flare{display:none}
.method-effect[data-tarot-motion] .effect-art{z-index:2}.tarot-motion-canvas{z-index:1;mask-image:radial-gradient(ellipse,black 48%,transparent 73%)}
/* WebKit flattens the 3D context while the lift animates opacity, so backface-visibility alone
   showed the drawn card mirrored before the turn. Hide each face explicitly; 14.4% is where
   motion-card-turn's easing crosses 90deg. Delays mirror the .effect-card rules above. */
.effect-card-front{animation:motion-face-front 1.8s linear 1.65s both}.effect-card-back{animation:motion-face-back 1.8s linear 1.65s both}
.effect-three .effect-card-front,.effect-three .effect-card-back{animation-delay:calc(1.7s + var(--i)*.2s)}
@keyframes motion-face-front{0%,14.39%{visibility:hidden}14.4%,100%{visibility:visible}}
@keyframes motion-face-back{0%,14.39%{visibility:visible}14.4%,100%{visibility:hidden}}
/* Owner request 2026-11-11: the light plays over the card, and the card back is the painted design.
   screen blending keeps the artwork readable under the light. */
.method-effect[data-tarot-motion] .tarot-motion-canvas{z-index:4;mix-blend-mode:screen}
.effect-card-back,.motion-card-fan i{background:#101c36 url(cards/back.webp) center/cover no-repeat}
.effect-card-back:before{content:none}
.effect-card-back span,.effect-card-back small,.motion-card-fan i span{display:none}
/* Restored from the approved motion study (brand/tarot-style-proposals/motion-preview.html), 2026-11-11:
   every card flashes gold as it turns face up; court cards and major arcana also get one foil sweep. */
.effect-card-shell[data-kind]::after{content:'';position:absolute;inset:-2px;border-radius:11px;pointer-events:none;opacity:0;box-shadow:0 0 26px 7px #ffe3a0b3,-16px 0 54px 8px #6cf3ff47,16px 0 54px 8px #d67cff4d,0 14px 60px 10px #ffb45e33;animation:motion-card-glow 1.9s ease-out 2s both}
.effect-card-shell:is([data-kind=page],[data-kind=knight],[data-kind=queen],[data-kind=king],[data-kind=major])::after{box-shadow:0 0 32px 10px #fff0c4d9,-22px 0 70px 14px #5ef0ff73,22px 0 70px 14px #d86bff80,0 -16px 64px 10px #8dff6a40,0 18px 80px 16px #ffb45e59;animation-duration:2.4s}
.effect-card-front::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(115deg,transparent 26%,#ff7d7880 36%,#ffe66a99 41%,#96ff7a99 45%,#ffffffe6 49.5%,#6cfff199 54%,#7b93ff99 58%,#dc78ff80 63%,transparent 72%);background-size:350% 100%}
.effect-card-shell[data-kind] .effect-card-front::after{animation:motion-card-flash .9s ease-out 1.9s both}
.effect-three .effect-card-shell[data-kind]::after{animation-delay:calc(2.05s + var(--i)*.2s)}
.effect-three .effect-card-shell[data-kind] .effect-card-front::after{animation-delay:calc(1.95s + var(--i)*.2s)}
@keyframes motion-card-glow{0%{opacity:0}22%{opacity:1}100%{opacity:0}}
@keyframes motion-card-flash{0%{opacity:0;background:#fff3cf}30%{opacity:.5;background:#fff3cf}100%{opacity:0;background:#fff3cf}}
@keyframes motion-card-foil{0%{opacity:0;background-position:100% 0}22%{opacity:1}100%{opacity:0;background-position:0 0}}
@media(prefers-reduced-motion:reduce){.effect-card-shell::after,.effect-card-front::after{animation:none!important}}
/* Automatic ending: the panel fades away over the result instead of cutting to it. */
.method-effect.effect-leaving{opacity:0;pointer-events:none;transition:opacity .36s ease}
@media(prefers-reduced-motion:reduce){.method-effect.effect-leaving{transition:none}}
/* Owner request 2026-11-11: on screens with room, the single revealed card is larger (was 140x220). */
@media(min-height:700px){.method-effect[data-method=tarot] .effect-stage,.method-effect[data-method=lenormand] .effect-stage{width:min(100%,348px)}.effect-reveal:not(.effect-three) .effect-card-shell{width:188px;height:296px;left:calc(50% - 94px);top:calc(50% - 148px)}.effect-reveal:not(.effect-three) .effect-card-back,.effect-reveal:not(.effect-three) .effect-card-front{border-radius:11px}}
/* Owner request 2026-11-12: three cards are opened one at a time. Each comes forward large, turns, (a rare card
   takes its light,) then settles into its place. --start is set per card by reading_effects.js. */
.effect-three .effect-card-shell{animation:motion-three-seq 2s ease var(--start,0s) both}
.effect-three .effect-card-shell[data-rare]{animation-name:motion-three-seq-rare;animation-duration:3.1s}
.effect-three .effect-card{animation:motion-card-turn 1s cubic-bezier(.2,.7,.2,1) calc(var(--start,0s) + .45s) both}
.effect-three .effect-card-front{animation:motion-face-front 1s linear calc(var(--start,0s) + .45s) both}
.effect-three .effect-card-back{animation:motion-face-back 1s linear calc(var(--start,0s) + .45s) both}
.effect-three .effect-card-shell[data-kind]::after{animation-delay:calc(var(--start,0s) + .75s)}
.effect-three .effect-card-shell[data-kind] .effect-card-front::after{animation-delay:calc(var(--start,0s) + .7s)}
@keyframes motion-three-seq{0%{opacity:0;z-index:5;transform:translateY(40px) scale(1.2)}17%{opacity:1;z-index:5;transform:translateY(0) scale(1.7)}80%{opacity:1;z-index:5;transform:translateY(0) scale(1.7)}100%{opacity:1;z-index:1;transform:translateX(calc(var(--slot)*89px)) scale(1)}}
@keyframes motion-three-seq-rare{0%{opacity:0;z-index:5;transform:translateY(40px) scale(1.2)}11%{opacity:1;z-index:5;transform:translateY(0) scale(1.7)}87%{opacity:1;z-index:5;transform:translateY(0) scale(1.7)}100%{opacity:1;z-index:1;transform:translateX(calc(var(--slot)*89px)) scale(1)}}
.effect-card-front .lenormand-art{border-radius:0}
/* Lenormand has its own card back (an oval with two crescents and a star); tarot keeps cards/back.webp. */
.method-effect[data-method=lenormand] .effect-card-back,.method-effect[data-method=lenormand] .motion-card-fan i{background-image:url(cards/lenormand/back.webp)}