/* ===== 3D layer: pure CSS 3D transforms, no libraries. Everything below is switched off for "reduce motion". ===== */

/* --- poll bars become glossy 3D slabs on the projector and in the landing demo --- */
body.present .ch[data-kind=bars],.d-stage .ch[data-kind=bars]{perspective:1100px}
body.present .ch[data-kind=bars] .bar,.d-stage .ch[data-kind=bars] .bar{transform:rotateX(14deg);transform-style:preserve-3d;transform-origin:50% 100%}
body.present .ch[data-kind=bars] .track,.d-stage .ch[data-kind=bars] .track{transform-style:preserve-3d}
body.present .ch[data-kind=bars] .bar .fill,.d-stage .ch[data-kind=bars] .bar .fill{--ex:color-mix(in srgb,var(--col,var(--c0)) 48%,#000);transform:translateZ(24px);
  box-shadow:0 1px 0 var(--ex),0 2px 0 var(--ex),0 3px 0 var(--ex),0 4px 0 var(--ex),0 5px 0 var(--ex),0 6px 0 var(--ex),0 7px 0 var(--ex),0 20px 24px -8px rgba(0,0,0,.6),0 0 34px -6px var(--col,var(--c0))}
body.present .ch[data-kind=bars] .bar.good .fill{transform:translateZ(48px)}
body.present .ch[data-kind=bars] .bar.dim .fill{transform:translateZ(8px)}
/* donut becomes a tilted disc */
body.present .ch[data-kind=donut] .donut-wrap{perspective:900px}
body.present .ch[data-kind=donut] .donut{transform-style:preserve-3d;transform:rotateX(34deg) rotateZ(-6deg)}
body.present .ch[data-kind=donut] .donut .mid{transform:rotateX(-34deg) translateZ(34px)}
body.present .ch[data-kind=donut] .donut::after{content:"";position:absolute;left:8%;right:8%;bottom:-6%;height:12%;background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%);transform:translateZ(-30px)}

/* --- podium: real 3D blocks that sway, a spinning crown --- */
body.present .res[data-kind=podium]{perspective:1500px}
.podium{transform-style:preserve-3d;transform:rotateX(9deg) rotateY(-14deg);animation:sway3d 9s ease-in-out infinite alternate}
.pod{transform-style:preserve-3d}
.pod .tower{--D:clamp(44px,6.5vw,104px);transform-style:preserve-3d;position:relative}
.pod .tower::before,.pod .tower::after{content:"";position:absolute;background:inherit;pointer-events:none}
.pod .tower::before{left:0;top:0;width:100%;height:var(--D);transform-origin:50% 0;transform:rotateX(-90deg);filter:brightness(1.22);border-radius:22px 22px 0 0}
.pod .tower::after{right:0;top:0;width:var(--D);height:100%;transform-origin:100% 50%;transform:rotateY(-90deg);filter:brightness(.62);border-radius:0 22px 0 0}
.pod .who{perspective:500px}
.crown{display:inline-block;animation:crownspin 4.5s linear infinite}
@keyframes crownspin{to{transform:rotateY(360deg)}}
@keyframes sway3d{from{transform:rotateX(9deg) rotateY(-24deg)}to{transform:rotateX(9deg) rotateY(-7deg)}}

/* --- leaderboard rows swing in from a tilted stage --- */
.lb{perspective:1100px}
.lb .row,[dir=rtl] .lb .row{transform-origin:50% 0;animation-name:row3d;animation-duration:.85s}
@keyframes row3d{from{opacity:0;transform:rotateX(-82deg) translateZ(-140px)}to{opacity:1;transform:none}}
.lb .row:nth-child(-n+3){box-shadow:0 18px 30px -18px rgba(0,0,0,.7)}

/* --- reactions and emoji tumble through space --- */
.floaty{animation-name:floatup3d}
@keyframes floatup3d{0%{transform:perspective(700px) translate3d(0,0,0) rotateY(0) scale(.5);opacity:0}
  12%{opacity:1;transform:perspective(700px) translate3d(0,-80px,60px) rotateY(120deg) scale(1.1)}
  100%{transform:perspective(700px) translate3d(var(--dx,0),-85vh,170px) rotateY(var(--spin,720deg)) scale(1);opacity:0}}
.dock button.pop{animation-name:emopop3d}
@keyframes emopop3d{0%{transform:perspective(320px) rotateY(0)}50%{transform:perspective(320px) rotateY(180deg) scale(1.3)}100%{transform:perspective(320px) rotateY(360deg)}}

/* --- cards tilt toward the pointer with a moving shine (tilt added by fx3d.js) --- */
[data-tilt][data-tilt]{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ly,0px));transition:transform .35s var(--ease),box-shadow .3s,border-color .2s;will-change:transform;position:relative}
[data-tilt][data-tilt].on{transition:transform .07s linear,box-shadow .3s,border-color .2s;--ly:-4px;box-shadow:0 26px 40px -22px rgba(14,16,40,.5)}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.3),transparent 62%);mix-blend-mode:soft-light}
[data-tilt].on::after{opacity:1}

/* --- landing hero: layers float at different depths and follow the pointer (or drift by themselves) --- */
.demo{perspective:1400px}
.demo .d-stage{transform:perspective(1400px) rotateY(calc(-8deg + var(--px,0) * 7deg)) rotateX(calc(3deg - var(--py,0) * 6deg));transition:transform .2s linear;transform-style:preserve-3d}
.demo .d-phone{animation:floaty3d 7s ease-in-out infinite}
@keyframes floaty3d{0%,100%{transform:perspective(1000px) rotate(-5deg) translate3d(0,0,70px) rotateY(calc(-8deg + var(--px,0) * 14deg)) rotateX(calc(var(--py,0) * -10deg))}
  50%{transform:perspective(1000px) rotate(-3deg) translate3d(0,-10px,90px) rotateY(calc(-8deg + var(--px,0) * 14deg)) rotateX(calc(var(--py,0) * -10deg))}}
@media(max-width:900px){.demo .d-stage{transform:perspective(1200px) rotateY(calc(var(--px,0) * 8deg)) rotateX(calc(2deg - var(--py,0) * 4deg))}}

/* --- quiz reveal: answers flip over like cards --- */
.btn.flipin{animation:flipin .8s var(--spring) both;animation-delay:calc(var(--i,0) * 100ms);backface-visibility:hidden}
@keyframes flipin{from{opacity:0;transform:perspective(700px) rotateX(-100deg)}to{opacity:1;transform:perspective(700px) rotateX(0)}}
.result-banner{animation:verdict .9s .45s var(--spring) both;backface-visibility:hidden}
.verdict{margin:14px 0 4px;padding:14px 16px;border-radius:var(--r-md);font:700 18px var(--fd);text-align:center;animation:verdict .9s .45s var(--spring) both;backface-visibility:hidden}
.verdict.good{background:rgba(20,200,143,.16);color:#0b8f66}.verdict.wrong{background:rgba(239,68,68,.12);color:#c23030}.verdict.none{background:var(--tint);color:var(--muted)}
@keyframes verdict{from{opacity:0;transform:perspective(700px) rotateY(-95deg)}to{opacity:1;transform:perspective(700px) rotateY(0)}}

/* --- presenter countdown: a thick 3D ring --- */
body.present .p-timer{--pct:100;width:clamp(96px,10.5vw,150px);height:clamp(96px,10.5vw,150px);min-width:0;padding:0;display:grid;place-items:center;border-radius:50%;border:0;font-size:clamp(22px,2.6vw,40px);
  background:radial-gradient(closest-side,#0a0f2c 70%,transparent 72%),conic-gradient(var(--ringc,var(--vio)) calc(var(--pct) * 1%),rgba(255,255,255,.13) 0);
  transform:perspective(600px) rotateX(24deg) rotateY(-20deg);
  box-shadow:0 1px 0 #1c1458,0 2px 0 #1c1458,0 3px 0 #1c1458,0 4px 0 #1c1458,0 5px 0 #1c1458,0 6px 0 #1c1458,0 7px 0 #1c1458,0 8px 0 #1c1458,0 26px 30px -10px rgba(0,0,0,.7)}
body.present .p-timer.low{--ringc:#ef4444;animation:ringlow 1s ease-in-out infinite}
@keyframes ringlow{50%{transform:perspective(600px) rotateX(24deg) rotateY(-20deg) translateZ(30px) scale(1.06)}}

@media (prefers-reduced-motion:reduce){
  .podium,.crown,.demo .d-phone,.lb .row,.floaty,.btn.flipin,.verdict,.result-banner,body.present .p-timer.low{animation:none!important}
  body.present .ch[data-kind=bars] .bar,.d-stage .ch[data-kind=bars] .bar,.demo .d-stage,[data-tilt][data-tilt]{transform:none}
  .podium{transform:none}
}
@media print{.podium,.lb,.bar{transform:none!important}}