/* One short authored scene, on demand. No animated account state. */
.experience-stage.motion{background:#211811;color:#fff4dc;pointer-events:auto;isolation:isolate}
.experience-stage.motion::before{content:"";position:absolute;inset:0;background:linear-gradient(#21181155,#21181122 50%,#211811dd),url('/assets/tavern/tabletop.webp') center/cover;z-index:-1}
.experience-stage.motion .experience-scene{width:min(100%,760px);height:min(100svh,800px);padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;position:relative}
.motion-art{position:absolute;inset:0 0 28%;display:grid;place-items:center;perspective:1000px;overflow:visible}
.motion .experience-caption{position:relative;padding:20px 24px 84px;max-width:540px;animation:caption-arrive .45s 1.6s both}
.motion .experience-caption strong{font-family:UpGradeAlegreya,Georgia,serif;font-weight:600;font-size:clamp(2rem,7vw,3.5rem);line-height:1.05;display:block;color:#fff4dc}
.motion .experience-caption p{font:16px/1.5 system-ui;color:#f1dec2;max-width:34ch;margin:14px auto 0}
.motion .experience-skip{position:absolute;right:24px;bottom:24px;border:1px solid #f1dec255;border-radius:8px;padding:10px 18px;background:#211811;color:#fff4dc;font:inherit;cursor:pointer;min-height:44px}
.motion .experience-skip:focus-visible{outline:3px solid #ffc56a;outline-offset:4px}
.motion .welcome-wordmark{width:175px;margin:0 auto 14px;display:block;background:#fff5dc;padding:10px;border-radius:3px}
.seven-dice{--d:clamp(48px,12vw,76px);position:relative;width:calc(var(--d)*4.6);height:calc(var(--d)*4.1);perspective:1000px;transform:translateY(4%);filter:drop-shadow(0 20px 14px #120a0790)}
.die-position{width:var(--d);height:var(--d);position:absolute;left:50%;top:50%;transform-style:preserve-3d;animation:die-drop 1.65s var(--delay) cubic-bezier(.22,.7,.28,1) both}
.die-cube{width:100%;height:100%;position:relative;transform-style:preserve-3d;transform:rotateX(-18deg) rotateY(-24deg);animation:die-roll 1.65s var(--delay) cubic-bezier(.16,.8,.28,1) both}
.die-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);gap:11%;padding:14%;box-sizing:border-box;background:var(--dice-color);border:1px solid #ffffff25;border-radius:10%;backface-visibility:hidden;box-shadow:inset 0 2px 4px #ffffff30,inset -5px -8px 14px #0003}
.die-face i.pip{border-radius:50%;background:var(--pip);box-shadow:inset 0 1px 2px #0006}
.face-0{transform:translateZ(calc(var(--d)/2))}.face-1{transform:rotateY(180deg) translateZ(calc(var(--d)/2));filter:brightness(.6)}.face-2{transform:rotateY(90deg) translateZ(calc(var(--d)/2));filter:brightness(.7)}.face-3{transform:rotateY(-90deg) translateZ(calc(var(--d)/2));filter:brightness(.85)}.face-4{transform:rotateX(90deg) translateZ(calc(var(--d)/2));filter:brightness(1.15)}.face-5{transform:rotateX(-90deg) translateZ(calc(var(--d)/2));filter:brightness(.65)}
.die-0{--x:-1.12;--y:-1.36;--from:-1.5;z-index:7}.die-1{--x:.06;--y:-1.39;--from:1.4;z-index:6}.die-2{--x:-1.1;--y:-.28;--from:-2;z-index:5}.die-3{--x:.08;--y:-.3;--from:2;z-index:4}.die-4{--x:-1.24;--y:.85;--from:-1;z-index:2}.die-5{--x:-.25;--y:1.03;--from:.8;z-index:8}.die-6{--x:.82;--y:.75;--from:2;z-index:1}
@keyframes die-drop{0%{transform:translate(calc(var(--from)*var(--d)),calc(-100vh))}43%{transform:translate(calc(var(--x)*var(--d)*1.5),calc((var(--y) + .55)*var(--d)))}59%{transform:translate(calc(var(--x)*var(--d)*1.25),calc((var(--y) - .65)*var(--d)))}76%{transform:translate(calc(var(--x)*var(--d)*1.06),calc((var(--y) + .1)*var(--d)))}89%{transform:translate(calc(var(--x)*var(--d)),calc((var(--y) - .06)*var(--d)))}100%{transform:translate(calc(var(--x)*var(--d)),calc(var(--y)*var(--d)))}}
@keyframes die-roll{0%{transform:rotateX(320deg) rotateY(-300deg) rotateZ(40deg)}43%{transform:rotateX(40deg) rotateY(-75deg) rotateZ(-15deg)}65%{transform:rotateX(-32deg) rotateY(-17deg) rotateZ(5deg)}100%{transform:rotateX(-18deg) rotateY(-24deg)}}
@keyframes caption-arrive{from{opacity:0;filter:blur(5px);transform:translateY(8px)}to{opacity:1;filter:blur(0);transform:none}}
.dispatch-letter{position:absolute;width:150px;height:98px;background:#f0dfbb;box-shadow:0 12px 24px #0006;transform:rotate(-8deg);animation:letter-dispatch 2.7s both;border-radius:3px}
.dispatch-letter::before{content:"";position:absolute;inset:0;background:#dfc799;clip-path:polygon(0 0,100% 0,50% 60%)}
.seal{position:absolute;left:calc(50% - 19px);top:38%;width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:#8c3226;color:#f3d198;border:3px double #b9593b;font:22px Georgia}
.dispatch-owl{position:absolute;width:min(80vw,380px);height:auto;animation:owl-dispatch 2.7s both;object-fit:contain;filter:drop-shadow(0 18px 18px #0005)}
@keyframes letter-dispatch{0%{opacity:0;transform:translateY(50px) rotate(-8deg) scale(.8)}15%,38%{opacity:1;transform:translateY(20px) rotate(-8deg)}47%{opacity:0;transform:translate(20px,-10px) rotate(5deg) scale(.8)}100%{opacity:0}}
@keyframes owl-dispatch{0%,28%{opacity:0;transform:translate(-50vw,-100px) scale(.6) rotate(-10deg)}43%{opacity:1;transform:translate(-10px,0) scale(.85) rotate(0)}61%{opacity:1;transform:translate(25px,-15px) scale(1)}100%{opacity:0;transform:translate(90vw,-50vh) scale(.3) rotate(12deg)}}
.energy-capsule{position:absolute;width:122px;height:122px;border-radius:50%;background:linear-gradient(#cc562f 0 46%,#281c19 46% 54%,#efdfbd 54%);border:3px solid #ebbc6b;box-shadow:inset -15px -12px 22px #0005,0 18px 28px #0005;display:grid;place-items:center;animation:capsule-dispatch 2.7s both}
.energy-capsule span{border-radius:50%;background:#fff3db;border:7px solid #352821;width:30px;height:30px;font:18px Georgia;display:grid;place-items:center;color:#352821}
.energy-rings{position:absolute;width:230px;height:230px}.energy-rings i{position:absolute;inset:0;border:1px solid #efc779;border-radius:50%;animation:capture-ring 2.7s both}.energy-rings i:nth-child(2){inset:25px;animation-delay:.08s}.energy-rings i:nth-child(3){inset:50px;animation-delay:.16s}
@keyframes capsule-dispatch{0%{transform:translateY(90px) scale(.5);opacity:0}22%{transform:translateY(0) scale(1);opacity:1}40%{transform:rotate(-18deg)}50%{transform:rotate(18deg)}65%{transform:rotate(0) scale(1.05)}100%{transform:translateY(-48vh) scale(.08);opacity:0}}
@keyframes capture-ring{0%,15%{transform:scale(1.6);opacity:0}36%{opacity:.8}59%{transform:scale(.3);opacity:0}100%{opacity:0}}
.dispatch-card,.duel-card{position:absolute;width:138px;height:196px;background:#244b3e;border:5px double #ddba72;border-radius:9px;box-shadow:0 22px 30px #0006;animation:card-dispatch 2.7s both;display:grid;place-items:center;color:#efcc86}
.card-corner{position:absolute;top:8px;left:12px;font:24px Georgia}.card-rune{font:100px Georgia}.card-rule{position:absolute;bottom:17px;left:18px;right:18px;height:18px;border-block:1px solid #ddba7277}
.card-portal{position:absolute;width:230px;height:230px;border:2px solid #e3b762;border-radius:50%;box-shadow:0 0 35px #deab4933,inset 0 0 30px #e3b76222;animation:portal-dispatch 2.7s both}
@keyframes card-dispatch{0%{transform:rotateY(-100deg) translateY(60px);opacity:0}32%{transform:rotateY(0) translateY(0) rotate(-8deg);opacity:1}65%{transform:rotateY(12deg) rotate(5deg) scale(1.07);opacity:1}100%{transform:translate(65vw,-50vh) rotate(30deg) scale(.15);opacity:0}}
@keyframes portal-dispatch{0%{transform:rotateX(65deg) scale(.2);opacity:0}38%,62%{transform:rotateX(30deg) scale(1);opacity:1}100%{transform:rotateX(10deg) scale(1.8);opacity:0}}
.duel-card{background:#6b3c28;border-color:#dba451;animation:duel-dispatch 2.7s both}.duel-card span{font:80px Georgia;color:#f2cb79}.duel-card b{position:absolute;inset:18px;border:1px solid #e4b96e}
.duel-field{position:absolute;width:310px;height:190px;display:flex;gap:12px;transform:rotateX(55deg);animation:portal-dispatch 2.7s both}.duel-field i{flex:1;border:1px solid #d8ae65;background:#c89a4322}
.duel-trail{position:absolute;width:240px;height:2px;background:#edc574;animation:duel-trail 2.7s both}
@keyframes duel-dispatch{0%{transform:translateY(130px) rotateY(180deg) scale(.6);opacity:0}33%{transform:translateY(0) rotateY(0);opacity:1}59%{transform:rotateY(0) scale(1.06);opacity:1}100%{transform:translateY(-55vh) rotateY(360deg) scale(.1);opacity:0}}
@keyframes duel-trail{0%,54%{transform:scaleX(0);opacity:0}66%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1.5);opacity:0}}
.jump-stars{position:absolute;width:1px;height:1px}.jump-stars i{position:absolute;left:0;top:0;width:2px;height:var(--length);background:linear-gradient(transparent,#f9e6b4);transform-origin:top;animation:star-dispatch 2.7s var(--lag) both}
.jump-ship{position:absolute;width:76px;height:128px;background:#d8d2bd;clip-path:polygon(50% 0,70% 47%,100% 86%,64% 76%,50% 100%,36% 76%,0 86%,30% 47%);animation:ship-dispatch 2.7s both;box-shadow:inset -18px 0 #8a9390}.jump-ship i{position:absolute;inset:30% 44% 10%;background:#35554f}
@keyframes star-dispatch{0%,23%{transform:rotate(var(--angle)) translateY(10px) scaleY(.1);opacity:0}50%{opacity:.8}82%{transform:rotate(var(--angle)) translateY(95px) scaleY(2.4);opacity:.9}100%{transform:rotate(var(--angle)) translateY(230px) scaleY(3);opacity:0}}
@keyframes ship-dispatch{0%{transform:translateY(90px) scale(1.3);opacity:0}25%,48%{transform:translateY(15px) scale(1);opacity:1}82%,100%{transform:translateY(-150px) scale(.02);opacity:0}}
.spin-arena{position:absolute;width:270px;height:200px;border:2px solid #efbd68;border-radius:50%;transform:rotateX(55deg);box-shadow:inset 0 0 35px #bc7e2533;animation:portal-dispatch 2.7s both}
.battle-top{position:absolute;width:150px;height:150px;background:#bb5633;border:9px double #efc77f;border-radius:36%;display:grid;place-items:center;box-shadow:inset -15px -8px 0 #6f3527,0 15px 25px #0005;animation:top-dispatch 2.7s both}.battle-top i{position:absolute;inset:18px;border:3px solid #f4c67d;border-radius:32%;transform:rotate(45deg)}.battle-top b{background:#d4b166;color:#33241d;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;font:28px Georgia}
@keyframes top-dispatch{0%{transform:translate(-45vw,-100px) rotate(0) scale(.4);opacity:0}22%{transform:translate(0,10px) rotate(540deg) scale(1);opacity:1}67%{transform:translate(10px,0) rotate(1900deg) scale(1);opacity:1}100%{transform:translate(70vw,-30px) rotate(2900deg) scale(.4);opacity:0}}
@media(max-height:540px) and (orientation:landscape){.motion .experience-scene{flex-direction:row;align-items:flex-end}.motion-art{inset:0 45% 0 0;transform:scale(.7)}.motion .experience-caption{margin-left:45%;padding-bottom:70px;font-size:18px}.seven-dice{--d:45px}}
@media(prefers-reduced-motion:reduce){.motion *, .motion *::before,.motion *::after{animation:none!important;transition:none!important}.die-position{transform:translate(calc(var(--x)*var(--d)),calc(var(--y)*var(--d)))}.motion .experience-caption{animation:none}}
.motion:not(.welcome) .experience-caption{animation-delay:0s}.seven-dice{transform:translateY(25%)}

/* Snowy owl: articulated WebGL wings, talons and carried letter. */
.experience-stage.magic.motion::before{display:none}.experience-stage.magic.motion .experience-scene{width:100%;height:100svh;max-height:none}.magic .motion-art{inset:0;display:block;perspective:none}.owl-viewport{position:absolute;inset:0;background:#172031;display:grid;place-items:center}.owl-viewport canvas{display:block;width:100%;height:100%}.owl-loading{color:#efe3cc;font:1.1rem Georgia,serif}.magic .experience-caption{z-index:1;width:100%;max-width:none;background:linear-gradient(transparent,#111927ed);padding:35px 24px 85px;pointer-events:none;animation-delay:2.5s}.magic .experience-skip{z-index:2}.magic .experience-caption strong{font-size:clamp(1.8rem,6vw,3rem)}

.owl-film video{display:block;width:100%;height:100%;object-fit:contain;background:#100e0c}.owl-film-stage .experience-caption{animation-delay:3.8s;background:linear-gradient(transparent,#100e0ce8)}

/* Star Wars cinema: contain keeps the complete portrait shot visible. */
.experience-stage.space.starwars-film-stage::before{display:none}.space.starwars-film-stage .experience-scene{width:100%;height:100svh;max-height:none}.space.starwars-film-stage .motion-art{inset:0;display:block;perspective:none}.starwars-viewport{position:absolute;inset:0;display:grid;place-items:center;background:#100e0c}.starwars-film video{display:block;width:100%;height:100%;object-fit:contain}.space.starwars-film-stage .experience-caption{z-index:1;width:100%;max-width:none;padding:30px 24px 85px;pointer-events:none;background:linear-gradient(transparent,#100e0ce8)}.space.starwars-film-stage .experience-skip{z-index:2}
