/* 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(-240px)}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}

/* ---- the book as the hero (hero[data-iqpop-hero] > [data-iqpop-mount]) ---- */
.iqpop--hero{padding:0;width:100%;text-align:center;display:flex;flex-direction:column;align-items:center}
.iqpop--hero .iqpop__inner{max-width:none;padding:0;width:100%}
.iqpop--hero .iqpop__wrap{width:min(1200px,calc(100% - 40px));margin-top:0;padding-bottom:17%;perspective:2600px}
.iqpop--hero .iqpop__book{aspect-ratio:100/27;transform:rotateX(calc(-27deg + var(--py) * 2.5deg)) rotateY(calc(var(--px) * 5deg))}
.iqpop--hero .iqpop__floor{height:110%}
.iqpop--hero .iqpop__cover{box-shadow:0 44px 90px -24px rgba(20,30,45,.55)}
@media (max-width:600px){
  .iqpop--hero .iqpop__wrap{width:calc(100% - 24px);padding-bottom:26%}
  .iqpop--hero .iqpop__book{aspect-ratio:100/36}
  .iqpop--hero .iqpop__floor{height:90%}
}

/* the hero's ribbon, worn across the book's top edge (built by iq-popup.js from [data-iqpop-ribbon]).
   It stands up with the book, the band unfurls from the middle, the tails swing out, then the words rise. */
.iqpop__ribbon{position:absolute;left:50%;top:0;z-index:3;width:max-content;font:500 clamp(15px,2vw,29px)/1.15 var(--serif,'Fraunces',Georgia,serif);letter-spacing:-.01em;color:var(--iqpop-accent);
  transform-origin:50% 100%;transform:translate(-50%,-64%) translateZ(26px) rotateX(80deg);opacity:0;
  filter:drop-shadow(0 12px 14px rgba(20,30,45,.24)) drop-shadow(0 2px 2px rgba(20,30,45,.16));
  transition:transform 1.05s cubic-bezier(.2,1.3,.42,1) .7s,opacity .3s ease .7s}
.iqpop__book.is-open .iqpop__ribbon{transform:translate(-50%,-64%) translateZ(26px);opacity:1}
.iqpop__ribbon .b{position:relative;z-index:2;display:block;padding:.5em 1.35em .58em;background:linear-gradient(180deg,#fffefb,#f3eee5);clip-path:inset(0 50% 0 50%);transition:clip-path .9s cubic-bezier(.7,0,.2,1) .8s}
.iqpop__ribbon .b::before{content:"";position:absolute;inset:.3em .4em;border-block:1px dashed color-mix(in srgb,var(--iqpop-accent) 24%,transparent);pointer-events:none}
.iqpop__ribbon .b::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#5b6eae,#c4576a,#4a9080,#c4576a,#5b6eae) 0 0/200% 100%;animation:iqpopShimmer 9s linear infinite}
@keyframes iqpopShimmer{to{background-position:-200% 0}}
.iqpop__ribbon .tx{position:relative;display:block;white-space:nowrap}
.iqpop__ribbon em{font-style:italic;font-weight:400}
.iqpop__ribbon .rw{display:inline-block;opacity:0;transform:translateY(.4em);transition:opacity .45s ease calc(var(--k) * 90ms + 1.45s),transform .75s cubic-bezier(.2,1.35,.4,1) calc(var(--k) * 90ms + 1.45s)}
.iqpop__ribbon em .rw{background:linear-gradient(90deg,#5b6eae,#c4576a 55%,#4a9080);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.iqpop__ribbon .t{position:absolute;z-index:0;top:.45em;height:100%;width:2.2em;background:linear-gradient(180deg,var(--iqpop-cover-hi),var(--iqpop-accent));transform:scaleX(0);transition:transform .65s cubic-bezier(.2,1.4,.4,1) 1.35s}
.iqpop__ribbon .t.l{left:-1.65em;transform-origin:100% 50%;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,.6em 50%)}
.iqpop__ribbon .t.r{right:-1.65em;transform-origin:0 50%;clip-path:polygon(0 0,100% 0,calc(100% - .6em) 50%,100% 100%,0 100%)}
.iqpop__ribbon .f{position:absolute;z-index:1;top:100%;width:.55em;height:.45em;background:var(--iqpop-cover);opacity:0;transition:opacity .2s ease 1.35s}
.iqpop__ribbon .f.l{left:0;clip-path:polygon(0 0,100% 0,100% 100%)}
.iqpop__ribbon .f.r{right:0;clip-path:polygon(0 0,100% 0,0 100%)}
.iqpop__book.is-open .iqpop__ribbon .b{clip-path:inset(0)}
.iqpop__book.is-open .iqpop__ribbon .rw,.iqpop__book.is-open .iqpop__ribbon .f{opacity:1;transform:none}
.iqpop__book.is-open .iqpop__ribbon .t{transform: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}
  .iqpop__ribbon{transform:translate(-50%,-64%) translateZ(26px);opacity:1}
  .iqpop__ribbon .b{clip-path:none}.iqpop__ribbon .rw,.iqpop__ribbon .f{opacity:1;transform:none}.iqpop__ribbon .t{transform:none}
}
/* page typography must not leak into the book */
.iqpop__folio{font-style:normal !important}