/* fx.css — "futuristic" layer over the explainer look: aurora backgrounds, a perspective light-grid floor,
   floating particles, glass cards with glow, glowing highlights, a framed 3D-tilting animation card,
   and room on the side for the Claude host. Loaded after the page styles, so it only overrides. */

/* ---------- backgrounds ---------- */
.scene.ink{background:radial-gradient(1100px 700px at 12% -5%,rgba(123,97,255,.34),transparent 62%),radial-gradient(900px 700px at 105% 105%,rgba(20,195,154,.20),transparent 60%),radial-gradient(1700px 1100px at 55% 35%,#11205A 0%,#070D2A 55%,#040817 100%)}
.scene.night{background:radial-gradient(1000px 650px at 85% -10%,rgba(80,170,255,.26),transparent 60%),radial-gradient(900px 700px at -5% 105%,rgba(123,97,255,.26),transparent 60%),radial-gradient(1600px 1000px at 50% 30%,#0C1A44 0%,#050A22 60%,#02050F 100%)}
.scene.cobalt{background:radial-gradient(1000px 700px at 88% 8%,rgba(255,201,60,.24),transparent 58%),radial-gradient(1200px 820px at -6% 104%,rgba(160,110,255,.55),transparent 60%),linear-gradient(135deg,#2F57FF 0%,#1F36C8 55%,#24129A 100%)}
.scene.paper{background-color:#F3F6FF;background-image:radial-gradient(900px 620px at 8% -6%,rgba(123,97,255,.17),transparent 62%),radial-gradient(900px 620px at 104% 104%,rgba(20,195,154,.15),transparent 62%),linear-gradient(rgba(47,91,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(47,91,255,.06) 1px,transparent 1px);background-size:auto,auto,60px 60px,60px 60px}

/* light-grid floor (dark scenes) + particles */
.fxfloor{position:absolute;left:-480px;right:-480px;bottom:-60px;height:470px;pointer-events:none;background-image:linear-gradient(rgba(124,240,255,.30) 2px,transparent 2px),linear-gradient(90deg,rgba(124,240,255,.30) 2px,transparent 2px);background-size:110px 110px;transform:perspective(700px) rotateX(64deg);transform-origin:50% 100%;-webkit-mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 40%,transparent 95%);mask-image:linear-gradient(to top,#000 0%,rgba(0,0,0,.7) 40%,transparent 95%)}
.scene.paper .fxfloor{display:none}
.scene.cobalt .fxfloor{background-image:linear-gradient(rgba(255,255,255,.16) 2px,transparent 2px),linear-gradient(90deg,rgba(255,255,255,.16) 2px,transparent 2px)}
.fxp{position:absolute;left:0;top:0;width:8px;height:8px;border-radius:50%;background:#9FF3FF;box-shadow:0 0 12px 3px rgba(124,240,255,.55);pointer-events:none}
.scene.cobalt .fxp{background:#FFE7A0;box-shadow:0 0 12px 3px rgba(255,214,90,.55)}
.scene.paper .fxp{background:#8C7BFF;box-shadow:0 0 10px 2px rgba(123,97,255,.35)}
.ring{border-color:rgba(124,240,255,.13)}
.scene.paper .ring{border-color:rgba(47,91,255,.10)}
.scene.cobalt .ring{border-color:rgba(255,255,255,.14)}

/* ---------- glass cards ---------- */
.scene.ink,.scene.night{--c-card:rgba(255,255,255,.065);--c-cardb:rgba(160,190,255,.20);--c-shadow:0 24px 60px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.16);--c-ub:rgba(255,255,255,.09);--c-track:rgba(160,190,255,.22)}
.scene.night{--c-card:rgba(255,255,255,.06)}
.scene.cobalt{--c-card:rgba(255,255,255,.12);--c-cardb:rgba(255,255,255,.28);--c-shadow:0 24px 60px rgba(10,10,80,.38),inset 0 1px 0 rgba(255,255,255,.25);--c-ub:rgba(255,255,255,.14)}
.scene.paper{--c-card:rgba(255,255,255,.86);--c-cardb:rgba(123,140,255,.22);--c-shadow:0 24px 60px rgba(40,50,140,.14),inset 0 1px 0 #fff;--c-acc:#3F5BFF;--c-hl:#3F5BFF}
.row,.card,.crow,.qbox,.msg .bub,.col{background-image:linear-gradient(160deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%)}
.row.on,.card.on{box-shadow:0 0 0 .25em var(--c-hl),0 0 4em rgba(255,201,60,.32),var(--c-shadow)}
.scene.paper .row.on,.scene.paper .card.on{box-shadow:0 0 0 .25em var(--c-hl),0 0 4em rgba(63,91,255,.25),var(--c-shadow)}
.itile{background-image:linear-gradient(150deg,rgba(255,255,255,.34),rgba(255,255,255,0) 52%);box-shadow:0 1.2em 2.6em -.9em var(--c-acc),inset 0 .2em 0 rgba(255,255,255,.3)}
/* an agent in place of an icon tile */
.itile.agt{background:none;box-shadow:none;overflow:visible}
.itile.agt .agsvg{width:118%;height:118%;overflow:visible;margin-top:-12%}
.card .itile.agt{width:16em;height:16em;margin-bottom:-1em}

/* ---------- headings ---------- */
.scene.ink .h,.scene.night .h,.scene.cobalt .h{text-shadow:0 0 .5em rgba(140,170,255,.28)}
.scene.ink .hl,.scene.night .hl{background:linear-gradient(95deg,#FFE066 0%,#FFB020 55%,#FF7E5F 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 .28em rgba(255,176,32,.45))}
.scene.cobalt .hl{background:linear-gradient(95deg,#FFF3B0 0%,#FFC93C 60%,#FFB020 100%);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 .28em rgba(255,201,60,.5))}
.scene.paper .hl{background:linear-gradient(95deg,#2F57FF 0%,#7B61FF 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.bar{background:linear-gradient(90deg,#7CF0FF,#7B61FF,#FFC93C);box-shadow:0 0 1.6em rgba(124,240,255,.45)}
.scene.paper .bar{box-shadow:0 0 1.2em rgba(123,97,255,.3)}
.tsub{box-shadow:0 .8em 2.4em -.6em rgba(0,0,0,.45)}

/* ---------- the animation card: neon frame + depth ---------- */
.acard{border:4px solid transparent;background:linear-gradient(#0B1230,#0B1230) padding-box,linear-gradient(135deg,#7CF0FF 0%,#7B61FF 50%,#FFC93C 100%) border-box;box-shadow:0 34px 90px rgba(0,0,0,.5),0 0 70px rgba(110,140,255,.38)}
.scene.paper .acard{box-shadow:0 34px 90px rgba(40,50,140,.25),0 0 60px rgba(123,97,255,.25)}

/* ---------- captions: glass pill ---------- */
.caps-karaoke .cap-line{background:rgba(8,13,40,.78);border:2px solid rgba(160,190,255,.22);box-shadow:0 14px 40px rgba(0,0,0,.35);border-radius:22px}
.caps-karaoke .w.on{color:#FFC93C;text-shadow:0 0 18px rgba(255,201,60,.55)}

/* ---------- the Claude host ---------- */
#hostL{position:absolute;left:0;top:0;width:640px;height:640px;margin:-320px 0 0 -320px;z-index:900;pointer-events:none;transform-origin:50% 50%}
#hostL svg{width:100%;height:100%;overflow:visible}
#hostL .hbub{position:absolute;left:455px;top:150px;transform-origin:0 100%;background:#fff;color:#0F1E2B;font:900 64px Rubik,Plex,sans-serif;padding:10px 40px 18px;border-radius:40px;white-space:nowrap;box-shadow:0 18px 50px rgba(0,0,0,.35)}
#hostL .hbub::after{content:"";position:absolute;left:30px;bottom:-22px;border:18px solid transparent;border-top:24px solid #fff;border-bottom:0}
.wrap.hostroom{left:520px}
html[dir=ltr] .wrap.hostroom{left:130px;right:520px}
/* intro card */
.intro-logo{position:absolute;left:0;right:0;top:70px;display:flex;justify-content:center}
.intro-chip{position:absolute;left:0;right:0;top:965px;display:flex;justify-content:center}
.intro-chip span{font:700 40px Plex,Rubik,sans-serif;color:#DCE6FF;padding:10px 34px 14px;border-radius:999px;border:2px solid rgba(160,190,255,.35);background:rgba(255,255,255,.06)}

/* transition streak */
.fxwipe{position:absolute;left:0;top:0;width:120px;height:1080px;z-index:950;pointer-events:none;background:linear-gradient(90deg,transparent 0%,rgba(124,240,255,.0) 30%,rgba(190,250,255,.95) 50%,rgba(124,240,255,0) 70%,transparent 100%);box-shadow:0 0 80px 30px rgba(124,240,255,.25);mix-blend-mode:screen}

/* thinking bubble over the host (cameo) */
#hostL .hthink{position:absolute;left:400px;top:60px;width:150px;height:84px;border-radius:44px;background:#fff;display:flex;align-items:center;justify-content:center;gap:14px;opacity:0;transform-origin:0 100%;box-shadow:0 14px 40px rgba(0,0,0,.3)}
#hostL .hthink::before{content:"";position:absolute;left:4px;bottom:-26px;width:26px;height:26px;border-radius:50%;background:#fff}
#hostL .hthink::after{content:"";position:absolute;left:-14px;bottom:-46px;width:14px;height:14px;border-radius:50%;background:#fff}
#hostL .hthink i{width:18px;height:18px;border-radius:50%;background:#2F5BFF;display:block}
/* team box: teaser + reveal */
.bxw{width:720px;height:720px;margin:-40px auto 0}
.bxo{position:absolute;left:50%;top:50%;width:600px;height:600px;margin:-300px 0 0 -300px;z-index:1;pointer-events:none}
.body .cards{position:relative;z-index:2}
/* business city */
.wrap .body.cityb{display:flex;flex-direction:column;align-items:center}
.city{position:relative;display:flex;justify-content:center;gap:26px;height:400px;width:1120px}
.city .bl{position:relative;width:250px;height:400px;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;transform-origin:50% 100%}
.city .bsvg{width:250px;height:242px;overflow:visible}
.city .bt{font:800 30px Rubik,Plex,sans-serif;color:#fff;margin-top:4px;white-space:nowrap;height:40px}
.scene.paper .city .bt{color:#0F1E2B}
.city .bagt{position:absolute;left:0;right:0;top:50px;display:flex;justify-content:center;gap:2px;z-index:2}
.city .bdoc{position:absolute;right:-4px;top:150px;width:56px;height:56px;border-radius:14px;background:#fff;color:#2F5BFF;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.3);z-index:3}
.city .bdoc svg{width:34px;height:34px}
.city .bclk{position:absolute;left:-4px;top:150px;width:56px;height:56px;z-index:3}
.city .bclk svg{width:100%;height:100%}
.city .clinks{position:absolute;left:0;right:0;top:20px;width:100%;height:200px;z-index:1;pointer-events:none}
.cchips{display:flex;justify-content:center;gap:16px;margin-top:26px;flex-wrap:nowrap}
.cchip{display:flex;align-items:center;gap:10px;padding:12px 22px;border-radius:999px;background:var(--c-card);border:2px solid var(--c-cardb);color:#fff;font:700 28px Plex,Rubik,sans-serif;white-space:nowrap}
.scene.paper .cchip{color:#0F1E2B}
.cchip svg{width:32px;height:32px;color:#FFC93C}
.bprint{position:absolute;left:50%;top:20px;width:520px;height:340px;margin-left:-260px;z-index:4;filter:drop-shadow(0 20px 40px rgba(0,0,0,.35))}
.bprint svg{width:100%;height:100%}
.scr2{position:absolute;left:0;right:0;margin:0 auto;width:fit-content;bottom:30px;font-size:44px !important;background:#FFC93C;color:#0F1E2B;z-index:20;white-space:nowrap}
.lay-screen .scr-wrap{position:relative}