section[data-section="hero"] { overflow:clip; }
.pai-studio { position:relative; height:350px; isolation:isolate; color:#282331; --creation:0; --scene-progress:0; }
.pai-studio-stage { position:absolute; inset:0 0 34px; perspective:1000px; }
.pai-studio-halo { position:absolute; inset:30px 10px 10px 20px; border-radius:50%; background:radial-gradient(ellipse,#e3dcfa99,transparent 70%); }
.pai-studio-work { position:absolute; inset:0; transition:opacity .6s,transform .9s cubic-bezier(.22,.7,.2,1); }
.pai-studio-person { position:absolute; width:390px; max-width:90%; height:auto; right:3%; bottom:-8px; object-fit:contain; filter:drop-shadow(0 12px 10px #48247c08); transform-origin:bottom center; animation:pai-person-enter .9s both; }
.pai-studio-brief { position:absolute; top:90px; left:4px; width:155px; padding:17px 15px; background:#fffdfb; border:1px solid #e3ddec; box-shadow:0 12px 30px #31223b09; border-radius:3px; transform:rotate(-7deg); }
.pai-studio-brief>span { font-size:8px; color:#887a9a; letter-spacing:.1em; }
.pai-studio-brief strong { display:block; font-size:13px; line-height:1.35; margin:10px 0 13px; font-weight:600; }
.pai-studio-brief i { display:block; width:90%; height:3px; margin:5px 0; background:#e9e3ef; }
.pai-studio-brief i:nth-of-type(2) { width:66%; }
.pai-studio-brief i:nth-of-type(3) { width:78%; }
.pai-studio-brief small { display:block; margin-top:15px; font-size:8px; color:#8b8099; }
.pai-studio-sheets { position:absolute; top:102px; right:0; width:78px; height:95px; }
.pai-studio-sheets>i { display:block; position:absolute; inset:0; padding:14px 10px; background:#fff; border:1px solid #d9cdeb; border-radius:3px; box-shadow:0 9px 20px #503e6610; opacity:0; transform:translate(-40px,85px) rotate(-15deg) scale(.3); transition:transform .8s cubic-bezier(.2,.7,.2,1),opacity .5s; }
.pai-studio-sheets b { display:block; width:20px; height:20px; background:#d2bff2; margin-bottom:13px; }
.pai-studio-sheets span { display:block; height:3px; background:#ddd5ea; margin:5px 0; }
.pai-studio[data-scene="1"] .pai-studio-sheets>i { opacity:1; transform:translate(-5px,0) rotate(10deg); }
.pai-studio[data-scene="1"] .pai-studio-sheets>i:nth-child(2) { transform:translate(-30px,15px) rotate(-3deg); transition-delay:.2s; }
.pai-studio[data-scene="1"] .pai-studio-sheets>i:nth-child(3) { transform:translate(-57px,36px) rotate(-15deg); transition-delay:.4s; }
.pai-studio[data-scene="1"] .pai-studio-person { transform:translate(-12px,5px) scale(.97); transition:transform 1s; }
.pai-studio-gallery { position:absolute; inset:0; opacity:0; visibility:hidden; transform:translateY(18px) scale(.88); transition:opacity .6s,transform .8s cubic-bezier(.22,.7,.2,1),visibility .6s; }
.pai-studio[data-scene="2"] .pai-studio-work,.pai-studio[data-scene="3"] .pai-studio-work,.pai-studio[data-scene="4"] .pai-studio-work { opacity:0; transform:translate(-40px,30px) scale(.82); pointer-events:none; }
.pai-studio[data-scene="2"] .pai-studio-gallery,.pai-studio[data-scene="3"] .pai-studio-gallery,.pai-studio[data-scene="4"] .pai-studio-gallery { opacity:1; visibility:visible; transform:none; }
.pai-studio-cover { position:absolute; margin:0; inset:27px 14px auto; opacity:.65; transform:translate(-12px,-8px) rotate(-5deg) scale(.92); transition:transform .85s cubic-bezier(.2,.7,.2,1),opacity .6s; z-index:1; }
.pai-studio-cover:nth-child(2) { transform:translate(12px,7px) rotate(5deg) scale(.94); }
.pai-studio-cover:nth-child(3) { transform:translate(3px,11px) rotate(-2deg) scale(.96); }
.pai-studio-cover img { display:block; width:100%; aspect-ratio:16/9; height:auto; object-fit:cover; border:4px solid #fff; border-radius:4px; box-shadow:0 18px 35px -15px #30203755; }
.pai-studio-cover figcaption { display:flex; justify-content:space-between; align-items:center; gap:10px; margin:18px 4px 0; opacity:0; font-size:11px; }
.pai-studio-cover figcaption small { color:#8c819b; font-size:9px; }
.pai-studio-cover.is-front { z-index:4; opacity:1; transform:translate(0,0) rotate(0) scale(1); }
.pai-studio-cover.is-front figcaption { opacity:1; transition:opacity .4s .4s; }
.pai-studio-gallery-label { position:absolute; top:0; left:18px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:#8c819b; }
.pai-studio-controls { position:absolute; bottom:0; left:14px; right:8px; height:29px; display:flex; align-items:center; gap:10px; }
.pai-studio-caption { font-size:10px; color:#85798f; flex:1; }
.pai-studio-tabs { display:flex; align-items:center; gap:3px; }
.pai-studio-tabs button { position:relative; width:16px; height:28px; border:0; background:none; padding:0; cursor:pointer; }
.pai-studio-tabs button::before { content:""; position:absolute; inset:12px 2px; background:#dcd5e8; border-radius:2px; }
.pai-studio-tabs button[aria-pressed="true"]::before { background:#805ed0; }
.pai-studio-pause { display:grid; place-items:center; width:28px; height:28px; flex-shrink:0; border:1px solid #e1d9ed; border-radius:50%; background:transparent; color:#89779f; padding:8px; cursor:pointer; }
.pai-studio-pause svg { width:10px; height:10px; fill:currentColor; }
.pai-studio button:focus-visible { outline:2px solid #805ed0; outline-offset:3px; }
.pai-studio button:hover { color:#6231b9; }
@keyframes pai-person-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
.pai-studio[data-paused] * { animation:none!important; }
@media(max-width:600px) {
 .pai-studio { height:315px; }
 .pai-studio-person { width:340px; max-width:95%; right:-7%; bottom:0; }
 .pai-studio-brief { top:93px; width:125px; padding:12px; }
 .pai-studio-brief strong { font-size:11px; }
 .pai-studio-sheets { width:65px; height:83px; right:-5px; top:100px; }
 .pai-studio-cover { inset:43px 5px auto; }
 .pai-studio-cover figcaption { display:block; margin-top:21px; }
 .pai-studio-cover figcaption small { display:block; margin-top:4px; }
 .pai-studio-gallery-label { top:15px; left:5px; }
 .pai-studio-controls { left:0; right:0; gap:5px; }
 .pai-studio-caption { font-size:9px; max-width:175px; }
 .pai-studio-tabs { margin-left:auto; }
}
@media(prefers-reduced-motion:reduce) { .pai-studio * { animation:none!important; transition:none!important; } }
.pai-studio-person { width:410px; max-width:100%; right:-2%; bottom:-14px; }
.pai-studio-cover { inset:25px 0 auto; width:min(450px,calc(100% - 28px)); margin:0 auto; }
.pai-studio-cover figcaption { margin-top:12px; }
@media(max-width:600px) {
 .pai-studio-person { width:355px; max-width:100%; right:-8%; bottom:0; }
 .pai-studio-cover { top:43px; width:calc(100% - 10px); }
 .pai-studio-cover figcaption { margin-top:18px; }
}
/* Four registered illustration frames; the scene clock advances the hands. */
.pai-studio .pai-studio-typing { width:450px; height:auto; aspect-ratio:3/2; right:-2%; bottom:-8px; background:url('/pai-typing-sprite-20261103.png') 0 0/200% 200% no-repeat; }
.pai-studio .pai-studio-typing[data-frame="0"] { background-position:0 0; }
.pai-studio .pai-studio-typing[data-frame="1"] { background-position:100% 0; }
.pai-studio .pai-studio-typing[data-frame="2"] { background-position:0 100%; }
.pai-studio .pai-studio-typing[data-frame="3"] { background-position:100% 100%; }
@media(max-width:600px) { .pai-studio .pai-studio-typing { width:355px; max-width:100%; right:-8%; bottom:0; } }

/* Thoughts arrive with the typing clock, then dissolve with the work scene. */
.pai-studio .pai-studio-typing { width:380px; right:0; bottom:-8px; }
.pai-studio-brief { top:110px; }
.pai-thoughts { position:absolute; inset:0; pointer-events:none; z-index:2; }
.pai-thought { position:absolute; display:flex; align-items:center; gap:8px; padding:10px 13px; white-space:nowrap; border:1px solid #e2daef; border-radius:11px; background:#ffffffed; color:#60536e; font-size:11px; font-weight:500; box-shadow:0 6px 20px #49336108; opacity:0; transform:translateY(7px) scale(.97); transition:opacity .28s,transform .38s cubic-bezier(.2,.7,.2,1); }
.pai-thought:nth-child(1) { top:0; left:35px; transform:translateY(7px) rotate(-4deg); }
.pai-thought:nth-child(2) { top:4px; right:8px; transform:translateY(7px) rotate(3deg); }
.pai-thought:nth-child(3) { top:48px; left:130px; background:#eee7fc; border-color:#ddd0f4; color:#69459c; }
.pai-thought:nth-child(3)::after { content:""; position:absolute; right:36px; bottom:-12px; width:5px; height:5px; background:#cdbce7; border-radius:50%; box-shadow:5px 9px 0 -1px #d9ccee; }
.pai-thought i { font-style:normal; display:grid; place-items:center; width:15px; height:15px; border:1px solid #bfaed7; color:#8a6aaf; border-radius:50%; font-size:10px; }
.pai-thought svg { width:15px; height:15px; fill:none; stroke:#9676bd; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.pai-studio[data-thoughts="1"] .pai-thought:nth-child(1),.pai-studio[data-thoughts="2"] .pai-thought:nth-child(-n+2),.pai-studio[data-thoughts="3"] .pai-thought { opacity:1; transform:translateY(0); }
.pai-studio[data-thoughts] .pai-thought:nth-child(1) { rotate:-4deg; }
.pai-studio[data-thoughts] .pai-thought:nth-child(2) { rotate:3deg; }
@media(max-width:600px) {
 .pai-studio .pai-studio-typing { width:320px; right:-7%; bottom:0; }
 .pai-studio-brief { top:106px; }
 .pai-thought { padding:8px 9px; font-size:9px; gap:5px; border-radius:9px; }
 .pai-thought:nth-child(1) { top:6px; left:0; }
 .pai-thought:nth-child(2) { top:9px; right:0; }
 .pai-thought:nth-child(3) { top:48px; left:65px; }
 .pai-thought i,.pai-thought svg { width:12px; height:12px; }
}
@media(prefers-reduced-motion:reduce) { .pai-thought { transition:none; } }
