/* Paint intro and 3-D booklet, modelled on the reference recording. Loaded on the homepage only. */

/* ---------- paint intro: pink layer with a Pinkage-shaped shadow, rubbed away with the mouse ---------- */
.paint-intro{position:fixed;inset:0;width:100%;height:100%;z-index:1000;display:block;transition:opacity .28s ease}
.paint-intro.is-done{opacity:0;pointer-events:none}

/* ---------- 3-D booklet (wide screens, motion allowed; the static booklet stays for everyone else) ---------- */
@media(min-width:761px){
  body.has-book3d .book-section{height:calc(100svh + 250vh);min-height:2500px}
  body.has-book3d .studio-book{width:min(1080px,72vw)!important;height:auto!important;aspect-ratio:auto!important;background:none!important;box-shadow:none!important;filter:none!important;rotate:0deg!important;translate:0 0!important;transform:none!important;padding:0!important}
  body.has-book3d .studio-book:after,body.has-book3d .book-spread,body.has-book3d .book-flip{display:none!important}
  .bk{position:relative;width:100%;aspect-ratio:1.5}
  .bk-book{position:absolute;inset:0;perspective:2400px;perspective-origin:50% 50%;transition:transform .5s cubic-bezier(.4,.1,.3,1);transform-origin:75% 50%}
  .bk[data-step="0"] .bk-book{transform:scale(.9)}
  .bk-sheet{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:left center;transform-style:preserve-3d;transition:transform .42s cubic-bezier(.5,.05,.3,1);z-index:calc(10 - var(--i))}
  .bk-sheet.is-flipped{transform:rotateY(-180deg);z-index:calc(1 + var(--i))}
  .bk-sheet.is-flipping{z-index:30}
  .bk-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fbfaf6 url('/assets/gpt/paper-crumple-tile.webp') center/640px;box-shadow:0 14px 30px #6a5a0030}
  .bk-front{border-radius:0 7px 7px 0;background-image:linear-gradient(90deg,#d3d0c6 0,#f4f2ec 2.5%,#fbfaf600 6%),url('/assets/gpt/paper-crumple-tile.webp')}
  .bk-back{transform:rotateY(180deg);border-radius:7px 0 0 7px;background-image:linear-gradient(270deg,#d3d0c6 0,#f4f2ec 2.5%,#fbfaf600 6%),url('/assets/gpt/paper-crumple-tile.webp')}
  .bk-inner{position:absolute;inset:0;padding:11% 10%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
  .bk-inner.bk-art{padding:8%}
  .bk-inner.bk-portrait{justify-content:flex-end;padding-bottom:0}
  .bk-cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;text-align:center}
  .bk-caps{font:clamp(46px,5vw,84px)/1 var(--display);color:var(--pink);-webkit-text-stroke:1.5px #522243;paint-order:stroke fill;text-shadow:4px 4px 0 var(--yellow)}
  .bk-cover em{font:clamp(60px,6.6vw,112px)/.85 var(--script);font-style:normal;color:var(--yellow);-webkit-text-stroke:1px #6e6308;paint-order:stroke fill;margin:-.08em 0 -.02em}
  .bk-spark{position:absolute;font-style:normal;font-size:clamp(28px,2.6vw,46px);line-height:1;color:var(--yellow);-webkit-text-stroke:1.5px #6e6308;paint-order:stroke fill;opacity:0;scale:.3;transition:opacity .35s ease,scale .45s cubic-bezier(.3,1.5,.5,1)}
  .bk-face.is-on .bk-spark{opacity:1;scale:1}
  .bk-spark.s1{top:12%;left:14%;rotate:-15deg}.bk-spark.s2{bottom:10%;right:12%;rotate:20deg;transition-delay:.15s}.bk-spark.s3{top:9%;right:10%;rotate:12deg;transition-delay:.25s}
  .bk-face.bk-front .bk-spark{opacity:1;scale:1}
  .bk-founder{width:84%;max-height:82%;object-fit:contain;object-position:bottom;filter:drop-shadow(7px 0 0 #ff64d5) drop-shadow(-7px 0 0 #ff64d5) drop-shadow(0 7px 0 #ff64d5) drop-shadow(0 -7px 0 #ff64d5);transform:translateY(12px) scale(.96);opacity:0;transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.2,.4,1)}
  .bk-face.is-on .bk-founder{opacity:1;transform:translateY(0) scale(1)}
  .bk-tape{display:inline-block;padding:7px 18px;font:clamp(14px,1.1vw,19px)/1.6 var(--hand);color:#fff;rotate:-2deg;background:#58b441 url('/assets/gpt/paper-crumple-tile.webp') center/420px;background-blend-mode:multiply;box-shadow:2px 3px 0 #0000001a}
  .bk-tape.orange{background-color:#f0712a;rotate:1.5deg}.bk-tape.blue{background-color:#4285da;rotate:-1.5deg}.bk-tape.pink{background-color:#ed60c5}
  .bk-text{font:clamp(14px,1.08vw,19px)/1.8 var(--hand);color:#242124;margin:24px 0 0;max-width:30ch;text-align:center}
  .bk-target{width:34%;max-height:26%;object-fit:contain;margin-bottom:22px}
  .bk-sketch,.bk-monitor{width:100%;height:100%;object-fit:contain}
  .bk-end .bk-text{margin-top:18px}
  /* handwriting appears letter by letter in random order; sketches draw in from the left */
  .bk-face .decode .ch{opacity:0}
  .bk-face.is-on .decode .ch{animation:bk-ch .05s steps(1) forwards;animation-delay:var(--d)}
  .bk-face .draw{clip-path:inset(0 100% 0 0)}
  .bk-face.is-on .draw{animation:bk-draw 1.3s cubic-bezier(.55,.05,.4,1) .2s forwards}
  @keyframes bk-ch{to{opacity:1}}
  @keyframes bk-draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  /* shared pause control: no letter or draw animation, flips stay since the visitor drives them */
  .motion-paused .bk-face .decode .ch{opacity:1;animation:none}
  .motion-paused .bk-face .draw{clip-path:none;animation:none}
  .motion-paused .bk-founder,.motion-paused .bk-spark{opacity:1;transform:none;scale:1;transition:none}
}
@media(max-width:760px){.bk{display:none}}
@media(prefers-reduced-motion:reduce){.bk{display:none}.paint-intro{display:none}}
/* ---------- booklet doodles (cropped from gpt-images/booklet-doodles.png) and the founder photo outline ---------- */
@media(min-width:761px){
  .bk-doodle{position:absolute;width:15%;height:auto;pointer-events:none;opacity:0;scale:.4;transition:opacity .3s ease,scale .5s cubic-bezier(.3,1.5,.5,1)}
  .bk-face.is-on .bk-doodle{opacity:1;scale:1}
  .bk-doodle.d1{top:7%;left:10%;width:13%;rotate:-12deg;transition-delay:.9s}
  .bk-doodle.d2{top:9%;right:8%;width:17%;rotate:18deg;transition-delay:1.1s}
  .bk-doodle.d3{bottom:12%;left:12%;width:15%;rotate:-8deg;transition-delay:1.3s}
  .bk-doodle.d4{top:10%;right:9%;width:17%;rotate:10deg;transition-delay:1.1s}
  .bk-doodle.d5{bottom:12%;left:10%;width:12%;rotate:-14deg;transition-delay:1.3s}
  .bk-doodle.d6{top:6%;right:7%;width:14%;rotate:12deg;transition-delay:1.5s}
  .bk-doodle.d7{bottom:8%;right:8%;width:16%;rotate:-10deg;transition-delay:1.4s}
  .bk-doodle.d8{bottom:6%;left:6%;width:15%;rotate:8deg;transition-delay:1.5s}
  .motion-paused .bk-doodle{opacity:1;scale:1;transition:none}
}
/* Pass 2: a centred closed cover, readable spreads and explicit page controls. */
.book-controls{display:none}
@media(min-width:761px) and (min-height:520px){
 body.has-book3d .book-stage{padding:105px 0 24px;min-height:0;gap:12px}
 body.has-book3d .studio-book{width:min(1080px,78vw,calc((100svh - 280px)*1.5))!important}
 .bk[data-step="0"] .bk-book{transform:translateX(-25%) scale(.9)}
 .bk-text{font:clamp(16px,1.28vw,21px)/1.75 var(--sans);max-width:29ch;margin-top:22px}
 .bk-tape{font-size:clamp(12px,1vw,17px);line-height:1.7;padding:7px 12px}
 .bk-face.is-on .draw{animation-duration:.7s;animation-delay:.1s}
 .bk-doodle{transition-delay:.35s!important}
 body.has-book3d .book-controls{display:flex;align-items:center;gap:20px;font:13px/1.4 var(--sans);color:#302922}
 .book-position{min-width:190px;text-align:center}
 .book-controls button{width:44px;height:44px;border:1px solid #302922;background:#fffdf4;color:#302922;border-radius:50%;font-size:23px;cursor:pointer}
 .book-controls button:disabled{opacity:.35;cursor:default}
 .book-controls button:focus-visible{outline:3px solid #302922;outline-offset:4px}
 body.has-book3d .book-link{font-size:20px;padding:11px 20px}
}
@media(min-width:761px) and (max-height:519px){
 .bk{display:none}
 .book-section{height:auto;min-height:0;padding:60px 0}
 .book-stage{position:relative;height:auto;min-height:0;padding:35px 0}
 .book-spread.spread-a{opacity:1!important}.book-spread.spread-b,.book-flip{display:none}
}

/* ---------- fit the page-turn booklet to shorter laptop windows: text scales with the book, not the window ---------- */
@media(min-width:761px) and (min-height:520px){
 .bk{container-type:inline-size}
 .bk-text{font-size:clamp(12px,1.95cqw,21px);margin-top:clamp(10px,2cqw,22px)}
 .bk-tape{font-size:clamp(10px,1.55cqw,17px);padding:clamp(4px,.6cqw,7px) clamp(8px,1.1cqw,12px)}
 .bk-caps{font-size:clamp(34px,7.6cqw,84px)}
 .bk-cover em{font-size:clamp(44px,10cqw,112px)}
 .bk-inner{padding:9% 8%}
}
@media(min-width:761px) and (min-height:520px) and (max-height:760px){
 body.has-book3d .book-stage{padding:92px 0 14px;gap:8px}
 body.has-book3d .studio-book{min-height:0!important}
 body.has-book3d .studio-book{width:min(1080px,78vw,calc((100svh - 215px)*1.5))!important}
 body.has-book3d .book-link{font-size:17px;padding:8px 16px}
 .book-controls button{width:38px;height:38px;font-size:20px}
}

/* ---------- founder card: shown above the simple booklet when the page-turn booklet is not running ---------- */
.book-founder-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:end;gap:6%;width:min(900px,90%);margin:0 auto 26px;padding:7% 7% 0;background:#fbfaf6 url('/assets/gpt/paper-crumple-tile.webp') center/640px;box-shadow:0 14px 30px #6a5a0030;border-radius:7px;rotate:-1deg}
.bfc-photo{width:100%;height:auto;display:block;filter:drop-shadow(6px 0 0 #ff64d5) drop-shadow(-6px 0 0 #ff64d5) drop-shadow(0 6px 0 #ff64d5) drop-shadow(0 -6px 0 #ff64d5)}
.bfc-text{align-self:center;text-align:center;padding-bottom:7%}
.bfc-text .book-tape{background:#58b441 url('/assets/gpt/tape-green.webp') center/100% 100%;color:#fff;font-size:clamp(13px,1.5vw,18px);line-height:1.6;padding:7px 14px;white-space:nowrap}
.bfc-text p{font:16px/1.75 var(--sans);color:#242124;margin:18px auto 0;max-width:30ch}
body.has-book3d .book-founder-card{display:none}
@media(max-width:760px){
 .book-founder-card{grid-template-columns:1fr;gap:0;width:100%;padding:34px 22px 0;rotate:0deg}
 .bfc-photo{width:78%;margin:0 auto;order:2}
 .bfc-text{order:1;padding-bottom:24px}
 .bfc-text p{font-size:15px}
}
body.has-book3d .studio-book{min-height:0!important}