/* iqb-scenes.css · the animated scenes on the IQ Books homepage (drawn by iqb-scenes.js).
   The placeholders in index.html reserve their height here, so nothing moves when the script fills them. */
.iqs{position:relative;margin:clamp(22px,3vw,40px) auto 0;max-width:1200px;width:100%}
.iqs svg{display:block;width:100%;height:auto;overflow:visible}
.iqs svg text{font-style:normal}
.iqs svg text[font-style="italic"]{font-style:italic}
.iqs__panel{position:relative;border-radius:14px}

/* race: two panels and a "vs" between them */
.iqs--race{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(10px,1.6vw,22px);align-items:center;margin-bottom:clamp(26px,3.4vw,48px)}
.iqs--race::before,.iqs--race::after{content:"";display:block;aspect-ratio:580/360;grid-row:1}
.iqs--race::before{grid-column:1}.iqs--race::after{grid-column:3}
.iqs--race.is-built::before,.iqs--race.is-built::after{display:none}
.iqs--race .iqs__panel{aspect-ratio:580/360;box-shadow:0 30px 60px -38px rgba(30,52,80,.55),0 2px 6px rgba(30,52,80,.08);transition:transform .9s cubic-bezier(.2,1.2,.4,1),opacity .6s ease;opacity:0}
.iqs--race .iqs__panel--them{transform:translateX(-28px) rotate(-1.2deg)}
.iqs--race .iqs__panel--us{transform:translateX(28px) rotate(1.2deg)}
.iqs--race.is-in .iqs__panel{opacity:1;transform:none}
.iqs--race.is-in .iqs__panel--us{transition-delay:.12s;box-shadow:0 34px 70px -34px rgba(79,76,142,.6),0 0 0 2px #2c4566}
.iqs__vs{font:italic 400 clamp(18px,2vw,28px)/1 var(--serif,'Fraunces',Georgia,serif);color:var(--ink-3,#6b6b6b)}
.iqs .rw .ac,.iqs .rw .va,.iqs .rw .tk{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .2s ease,transform .45s cubic-bezier(.3,1.8,.5,1)}
.iqs .rw .va{transition-delay:.08s}.iqs .rw .tk{transition-delay:.16s}
.iqs .rw.on .ac,.iqs .rw.on .va,.iqs .rw.on .tk,.iqs .rw.ac-on .ac{opacity:1;transform:none}
.iqs .rw .slot{transition:opacity .2s}
.iqs .rw.on .slot,.iqs .rw.ac-on .slot:first-of-type{opacity:0}
.iqs .rw .hl{opacity:0}
.iqs .rw.on .hl{animation:iqsHl .9s ease both}
@keyframes iqsHl{0%{opacity:.28}100%{opacity:0}}
.iqs .hand{transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.iqs .dd{opacity:0;transition:opacity .15s;filter:drop-shadow(0 8px 12px rgba(20,30,45,.22))}
.iqs .dd.on{opacity:1}
.iqs .rev{opacity:0;transform:scale(.5) rotate(-6deg);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .5s cubic-bezier(.3,1.9,.5,1)}
.iqs .rev.on{opacity:1;transform:rotate(-3deg)}
.iqs .scan{opacity:0}

/* drop */
.iqs--drop .iqs__panel,.iqs--drop:not(.is-built)::before{aspect-ratio:1200/380}
.iqs:not(.is-built)::before{content:"";display:block}
.iqs--race:not(.is-built)::before{aspect-ratio:580/360}
.iqs .flow{fill:none;stroke:#2c4566;stroke-opacity:.35;stroke-width:3;stroke-dasharray:2 10;stroke-linecap:round;animation:iqsMarch 1.2s linear infinite}
@keyframes iqsMarch{to{stroke-dashoffset:-24}}
.iqs .dw{filter:drop-shadow(0 5px 6px rgba(20,30,45,.2))}
.iqs .ring{transform-box:fill-box;transform-origin:center;animation:iqsSpin 16s linear infinite}
.iqs .box{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 16px 20px rgba(20,30,45,.35))}
@keyframes iqsSpin{to{transform:rotate(360deg)}}
.iqs .orow{transition:transform .5s cubic-bezier(.3,1.25,.4,1),opacity .3s}
.iqs .orow .tk{transform-box:fill-box;transform-origin:center}
.iqs .rep .lit{opacity:0;transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform .5s cubic-bezier(.3,1.2,.4,1),opacity .2s}
.iqs .rep .lb{transition:fill .3s}
.iqs .rep.on .lit{opacity:1;transform:none}
.iqs .rep.on .lb{fill:#fff}
.iqs .ready{opacity:0;transition:opacity .2s}
.iqs .ready>*{transform-box:fill-box}
.iqs .ready.on{opacity:1;animation:iqsPop .5s cubic-bezier(.3,1.9,.5,1)}
@keyframes iqsPop{0%{opacity:0}60%{opacity:1}}

/* away */
.iqs--away .iqs__panel,.iqs--away:not(.is-built)::before{aspect-ratio:1200/340}
.iqs--away .iqs__panel{box-shadow:0 34px 70px -40px rgba(30,52,80,.7)}
.iqs .star{animation:iqsTwinkle 3s ease-in-out infinite;animation-delay:var(--d);opacity:calc(.9 - var(--dawn,0) * 1.1)}
@keyframes iqsTwinkle{50%{fill-opacity:.25}}
.iqs .trail{stroke-dasharray:100;stroke-dashoffset:100}
.iqs .card{opacity:0;transition:opacity .25s}
.iqs .card .cb{transform:scale(.7) translateY(8px);transition:transform .55s cubic-bezier(.3,1.7,.5,1);filter:drop-shadow(0 8px 10px rgba(10,16,28,.35))}
.iqs .card.on{opacity:1}
.iqs .card.on .cb{transform:none}
.iqs .pulse{animation:iqsPulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes iqsPulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.4);opacity:0}}

/* sign: the review desk */
.iqs--sign .iqs__panel,.iqs--sign:not(.is-built)::before{aspect-ratio:1200/340}
.iqs .sd-sheet{filter:drop-shadow(0 22px 26px rgba(30,52,80,.22))}
.iqs .sd-row .ac,.iqs .sd-row .tk,.iqs .sd-row .q{opacity:0;transform:scale(.6);transform-box:fill-box;transform-origin:center;transition:opacity .2s,transform .45s cubic-bezier(.3,1.8,.5,1)}
.iqs .sd-row .cf,.iqs .sd-row .cf2{transform:scaleX(0);transform-box:fill-box;transform-origin:0 50%;transition:transform .6s cubic-bezier(.3,1,.4,1)}
.iqs .sd-row.on .ac,.iqs .sd-row.on .tk,.iqs .sd-row.asking .q{opacity:1;transform:none}
.iqs .sd-row.on .cf,.iqs .sd-row.asking .cf,.iqs .sd-row.sure .cf2{transform:none}
.iqs .sd-ask,.iqs .sd-note{opacity:0;transform:scale(.7);transition:opacity .2s,transform .45s cubic-bezier(.3,1.7,.5,1)}
.iqs .sd-note{transform:translateY(8px)}
.iqs .sd-ask.on,.iqs .sd-note.on{opacity:1;transform:none}
.iqs .sd-ask{filter:drop-shadow(0 10px 14px rgba(20,30,45,.3))}
.iqs .sd-ask .o1{transform-box:fill-box;transform-origin:center}
.iqs .sd-btn{transform-box:fill-box;transform-origin:center;transition:transform .12s}
.iqs .sd-btn.press{transform:scale(.93)}
.iqs .sd-stamp{opacity:0;transform:scale(2.4) rotate(-7deg)}
.iqs .sd-stamp.on{opacity:1;transform:rotate(-7deg);transition:transform .2s cubic-bezier(.6,0,.9,.5),opacity .08s}
.iqs .sd-out{opacity:0;transform:translateY(-26px);transition:opacity .3s,transform .6s cubic-bezier(.3,1.4,.5,1)}
.iqs .sd-out.on{opacity:1;transform:none}
.iqs .sd-shackle{transform:translateY(-6px);transition:transform .35s cubic-bezier(.3,1.8,.5,1) .45s}
.iqs .sd-out.on .sd-shackle{transform:none}
.iqs .cur{filter:drop-shadow(0 2px 2px rgba(0,0,0,.25))}
/* meter */
.iqs--meter .iqs__panel,.iqs--meter:not(.is-built)::before{aspect-ratio:1200/250}
.iqs .mt-card{filter:drop-shadow(0 16px 18px rgba(30,52,80,.2))}
.iqs .mt-tag{opacity:0;transform:scale(.4) rotate(-10deg);transform-box:fill-box;transform-origin:center;transition:opacity .15s,transform .5s cubic-bezier(.3,1.9,.5,1)}
.iqs .mt-card.on .mt-tag{opacity:1;transform:rotate(4deg)}
.iqs .mt-arc{transition:stroke-dasharray .5s cubic-bezier(.3,1,.4,1)}
.iqs .mt-delta{opacity:0}
@media (max-width:900px){
  .iqs--sign .iqs__panel,.iqs--sign:not(.is-built)::before{aspect-ratio:400/470}
  .iqs--meter .iqs__panel,.iqs--meter:not(.is-built)::before{aspect-ratio:400/400}
}

/* how: the four step drawings in #how, rebuilt in place (the static drawings in index.html are the no-script fallback) */
[data-iqs="how"].is-built .flow__viz{height:auto !important;aspect-ratio:280/190;display:block}
[data-iqs="how"] .hw svg{display:block;width:100%;height:100%}
[data-iqs="how"] .hw svg text{font-style:normal}
[data-iqs="how"]:not(.is-live) .hw *{animation-play-state:paused!important}
[data-iqs="how"] .flow__stage{transition:transform .5s cubic-bezier(.2,1.3,.4,1),box-shadow .4s}
[data-iqs="how"] .flow__stage.hw-on{transform:translateY(-8px);box-shadow:0 24px 40px -22px rgba(30,52,80,.55),0 0 0 2px #4f4c8e}
.hw .tk,.hw .hw-src,.hw .hw-in,.hw .hw-doc,.hw .hw-rec,.hw .hw-chk .tk{transform-box:fill-box;transform-origin:center}
.hw .hw-src{opacity:.35;transition:opacity .3s ease calc(var(--k) * .15s)}
.hw.go .hw-src{opacity:1}
.hw .hw-in{opacity:0;transform:translateY(-46px);transition:opacity .25s ease calc(var(--k) * .5s + .3s),transform .7s cubic-bezier(.3,1.3,.4,1) calc(var(--k) * .5s + .3s)}
.hw.go .hw-in{opacity:1;transform:none}
.hw .hw-in .tk{opacity:0;transform:scale(.2);transition:opacity .2s ease calc(var(--k) * .5s + .9s),transform .45s cubic-bezier(.3,1.9,.5,1) calc(var(--k) * .5s + .9s)}
.hw.go .hw-in .tk{opacity:1;transform:none}
.hw .flow{fill:none;stroke:#2c4566;stroke-opacity:.5;stroke-width:2.5;stroke-dasharray:2 8;stroke-linecap:round;animation:iqsMarch 1s linear infinite}
.hw .pulse{animation:iqsPulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
.hw .hw-doc{opacity:0;transform:translateY(-90px) rotate(-20deg);transition:opacity .2s ease calc(var(--k) * .55s + .2s),transform .75s cubic-bezier(.4,1.5,.5,1) calc(var(--k) * .55s + .2s)}
.hw.go .hw-doc{opacity:1;transform:none}
.hw .hw-ph{fill:#b8c5d8;transition:fill .12s,r .12s}
.hw .hw-ph.on{fill:#80508c}
.hw.done .hw-ph.on{fill:#2c4566}
.hw .hw-rec{opacity:0;transform:translateY(8px) scale(.8);transition:opacity .25s,transform .5s cubic-bezier(.3,1.8,.5,1)}
.hw.done .hw-rec{opacity:1;transform:none}
.hw .hw-chk .tk{opacity:0;transform:scale(.2);transition:opacity .2s ease calc(var(--k) * .35s + .2s),transform .45s cubic-bezier(.3,1.9,.5,1) calc(var(--k) * .35s + .2s)}
.hw.go .hw-chk .tk{opacity:1;transform:none}
.hw .hw-sig{stroke-dasharray:100;stroke-dashoffset:100}
.hw.go .hw-sig{stroke-dashoffset:0;transition:stroke-dashoffset .9s cubic-bezier(.5,.1,.4,1) 1.3s}
.hw .hw-stamp{opacity:0;transform:scale(2.4) rotate(-12deg)}
.hw.go .hw-stamp{opacity:1;transform:rotate(-12deg);transition:transform .2s cubic-bezier(.6,0,.9,.5) 2.3s,opacity .08s linear 2.3s}
@media (prefers-reduced-motion:reduce){[data-iqs="how"] .hw *,[data-iqs="how"] .flow__stage{animation:none!important;transition:none!important}}

/* nothing loops while its scene is off screen */
.iqs:not(.is-live) *{animation-play-state:paused!important}

@media (max-width:900px){
  .iqs{max-width:460px}
  .iqs--race::before,.iqs--race::after,.iqs--race .iqs__panel{aspect-ratio:400/360}
  .iqs--race{grid-template-columns:1fr;justify-items:center}
  .iqs--race::before,.iqs--race::after{grid-column:1;grid-row:auto;width:100%}
  .iqs--race .iqs__panel{width:100%}
  .iqs--drop .iqs__panel,.iqs--drop:not(.is-built)::before{aspect-ratio:400/640}
  .iqs--away .iqs__panel,.iqs--away:not(.is-built)::before{aspect-ratio:400/600}
}
@media (prefers-reduced-motion:reduce){
  .iqs *,.iqs *::before,.iqs *::after{animation:none!important;transition:none!important}
  .iqs--race .iqs__panel{opacity:1;transform:none}
}