/* iq-popup.css · the pop-up book layer shared by the six landing pages.
   Loaded after iq-landing-polish.css. Adds: a pop-up book interlude after each hero
   (built by iq-popup.js from the page's data-scene), fold-up words on section headlines,
   and a paper fold on the cards the polish layer already reveals. Heroes are untouched. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500&display=swap');

/* ---- the interlude ---- */
.iqpop{position:relative;padding:clamp(56px,8vw,110px) 0 clamp(20px,4vw,40px);text-align:center;overflow:visible}
.iqpop__inner{max-width:1180px;margin:0 auto;padding:0 clamp(16px,4vw,48px);display:flex;flex-direction:column;align-items:center}
.iqpop__eb{font:500 .74rem/1.3 var(--mono,'JetBrains Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3,#6b6b6b);display:inline-flex;gap:10px;align-items:center}
.iqpop__eb::before{content:"";width:28px;height:3px;border-radius:3px;background:var(--iqpop-accent,var(--brand,#1a1a1a))}
.iqpop__h{font:400 clamp(2.2rem,4.6vw,4rem)/1.02 var(--serif,'Fraunces',Georgia,serif) !important;letter-spacing:-.025em !important;margin:14px 0 18px !important;max-width:18ch;color:var(--ink,#1a1a1a)}
.iqpop__h em{font-style:italic;color:var(--iqpop-accent,var(--brand))}
.iqpop__typer{display:inline-flex;align-items:center;gap:10px;font:500 clamp(.74rem,1.3vw,.9rem)/1 var(--mono,'JetBrains Mono',monospace);background:#fff;border:1px solid var(--rule,#e4dfd5);border-radius:999px;padding:10px 16px 10px 12px;box-shadow:0 10px 30px -18px rgba(30,52,80,.3);max-width:100%;overflow:hidden;white-space:nowrap;min-height:40px;color:var(--ink,#1a1a1a)}
.iqpop__typer .d{width:8px;height:8px;border-radius:50%;background:var(--iqpop-accent,var(--brand));flex:none;animation:iqpopPing 2s infinite}
.iqpop__typer .r,.iqpop__typer .a{color:var(--ink-3,#6b6b6b)}
.iqpop__typer .o{font-weight:600;color:var(--iqpop-accent,var(--brand))}
.iqpop__typer .c{width:2px;height:1.1em;background:var(--iqpop-accent,var(--brand));animation:iqpopBlink 1s steps(1) infinite}
@keyframes iqpopPing{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--iqpop-accent,#4a9080) 50%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
@keyframes iqpopBlink{50%{opacity:0}}
.iqpop__note{font:500 .68rem/1.4 var(--mono,'JetBrains Mono',monospace);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3,#6b6b6b);margin-top:6px}

/* ---- the book ---- */
.iqpop__wrap{position:relative;width:min(1080px,calc(100% - 28px));margin-top:clamp(24px,4vw,48px);perspective:2300px;perspective-origin:50% 0%;padding-bottom:20%;--px:0;--py:0}
.iqpop__book{position:relative;width:100%;aspect-ratio:100/40;transform-style:preserve-3d;transform:rotateX(calc(-24deg + var(--py) * 2.5deg)) rotateY(calc(var(--px) * 5deg));transform-origin:50% 100%}
.iqpop__cover{position:absolute;inset:-12px -14px 0;border-radius:10px 10px 0 0;transform:translateZ(-4px);background:linear-gradient(180deg,var(--iqpop-cover-hi),var(--iqpop-cover));box-shadow:0 34px 70px -20px rgba(20,30,45,.5)}
.iqpop__up{position:absolute;inset:0;border-radius:4px 4px 0 0;overflow:hidden;background:repeating-linear-gradient(180deg,transparent 0 27px,color-mix(in srgb,var(--iqpop-accent) 13%,transparent) 27px 28px),#fff}
.iqpop__up::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(20,30,45,.16),transparent 16%);pointer-events:none}
.iqpop__plate{position:absolute;top:14px;left:18px;width:clamp(90px,14%,150px);opacity:.9}
.iqpop__folio{position:absolute;top:16px;right:18px;font:500 .68rem var(--mono,'JetBrains Mono',monospace);letter-spacing:.14em;text-transform:uppercase;color:var(--iqpop-accent)}
.iqpop__floor{position:absolute;left:0;top:100%;width:100%;height:78%;transform-origin:50% 0;transform:rotateX(90deg);transform-style:preserve-3d;background:#f5f2ed}
.iqpop__floor::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,30,45,.22),transparent 12%),repeating-linear-gradient(180deg,transparent 0 22px,color-mix(in srgb,var(--iqpop-accent) 16%,transparent) 22px 23px);pointer-events:none}
.iqpop__floor .cf{position:absolute;inset:0 -14px -14px;background:var(--iqpop-cover);transform:translateZ(-4px);border-radius:0 0 10px 10px}
.iqpop__slot{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1%);width:calc(var(--w) * 1%);height:0;transform-style:preserve-3d}
.iqpop__slot::before{content:"";position:absolute;left:8%;right:8%;top:-10px;height:22px;border-radius:50%;background:radial-gradient(closest-side,rgba(20,30,45,.3),transparent);opacity:0;transition:opacity .8s ease calc(var(--i) * 95ms + .2s)}
.iqpop__piece{position:absolute;left:0;bottom:0;width:100%;height:auto;display:block;overflow:visible;transform-origin:50% 100%;transform:rotateX(-179deg);backface-visibility:hidden;
  transition:transform 1.05s cubic-bezier(.2,1.35,.42,1) calc(var(--i) * 95ms);filter:drop-shadow(0 -1px 0 rgba(255,255,255,.9)) drop-shadow(0 6px 6px rgba(20,30,45,.22))}
.iqpop__book.is-open .iqpop__piece{transform:rotateX(-90deg)}
.iqpop__book.is-open .iqpop__slot::before{opacity:1}
/* moving parts */
.iqpop .slip{animation:iqpopDrift 18s linear infinite;animation-delay:var(--d)}
@keyframes iqpopDrift{from{transform:translateX(-200px)}to{transform:translateX(1030px)}}
.iqpop .slip .tab{animation:iqpopCoded 18s linear infinite;animation-delay:var(--d)}
.iqpop .slip .raw{animation:iqpopRaw 18s linear infinite;animation-delay:var(--d)}
@keyframes iqpopCoded{0%,72.4%{opacity:0;transform:translateY(8px)}75%,100%{opacity:1;transform:none}}
@keyframes iqpopRaw{0%,72.4%{opacity:1}74%,100%{opacity:0}}
.iqpop .thread{stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.4s ease calc(var(--k,0) * 180ms + 1s)}
.iqpop__book.is-open .thread{stroke-dashoffset:0}
.iqpop .tick{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.3);transition:all .45s cubic-bezier(.3,1.6,.5,1) calc(var(--k,0) * 160ms + 1.2s)}
.iqpop__book.is-open .tick{opacity:1;transform:none}
.iqpop .grow{transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,1.3,.4,1) calc(var(--k,0) * 70ms + .9s)}
.iqpop__book.is-open .grow{transform:none}
.iqpop .spin{transform-box:fill-box;transform-origin:center;animation:iqpopSpin 30s linear infinite}
@keyframes iqpopSpin{to{transform:rotate(360deg)}}
.iqpop .pulse{animation:iqpopPulse 2.4s ease-in-out infinite}
@keyframes iqpopPulse{50%{opacity:.3}}

/* ---- fold-up headline words ---- */
.iqfold{perspective:900px}
.iqfold .w{display:inline-block;white-space:nowrap}
.iqfold .wi{display:inline-block;transform-origin:50% 92%;transform:rotateX(-92deg);opacity:0;
  transition:transform 1s cubic-bezier(.2,1.4,.4,1) calc(var(--k) * 60ms + .1s),opacity .3s linear calc(var(--k) * 60ms + .1s)}
.iqfold.is-in .wi{transform:none;opacity:1}
.iqfold .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- cards fold up like paper (on top of the polish layer's reveal) ---- */
html.iq-polish.iq-pop .iqc:not(.stg){transform-origin:50% 100%;rotate:x -62deg;
  transition:opacity .6s ease var(--d,0s),translate .8s var(--iq-ease,cubic-bezier(.2,.8,.2,1)) var(--d,0s),scale .8s var(--iq-ease,cubic-bezier(.2,.8,.2,1)) var(--d,0s),rotate 1s cubic-bezier(.2,1.3,.42,1) var(--d,0s),box-shadow .35s ease}
html.iq-polish.iq-pop .iqc.iqc--in{rotate:none}

@media (max-width:600px){
  .iqpop__book{aspect-ratio:100/46}
  .iqpop__wrap{padding-bottom:26%}
  .iqpop__typer{font-size:.68rem}
}
@media (prefers-reduced-motion:reduce){
  .iqpop *,.iqfold .wi{animation:none!important;transition:none!important}
  .iqpop__piece{transform:rotateX(-90deg)}
  .iqfold .wi{transform:none;opacity:1}
  .iqpop .thread{stroke-dashoffset:0}.iqpop .tick,.iqpop .grow{opacity:1;transform:none}
  .iqpop .slip .tab{opacity:1}.iqpop .slip .raw{opacity:0}
  html.iq-polish.iq-pop .iqc:not(.stg){rotate:none}
}
/* page typography must not leak into the book */
.iqpop__folio{font-style:normal !important}