/* Local integration preview. Existing site content and gallery remain intact. */
.hero{background:linear-gradient(180deg,#1c1c1a 0%,#191a17 72%,#111210 100%);border-bottom:0}
.hero:before{display:none}
.hero #stage{inset:75px 2% 160px 51%;pointer-events:none;cursor:default;opacity:1}
.hero #stage canvas{background:transparent;touch-action:auto}
.hero h1{left:27%;top:40%;width:43%}
.hero .hero-top,.hero h1,.hero .hero-bottom{z-index:3}
.hero #hero-particles{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero .pointer-note{left:50%;bottom:32px;letter-spacing:1.4px}
#hero-unfold{display:none}
#hero-motion{z-index:4}
.hero .hero-intro{max-width:390px}
.hero .hero-intro p{font-size:17px;line-height:1.65;color:#e4e1d6}
.hero .work-link{font-size:13px;font-weight:600;color:#f5ebd8}
.hero .pointer-note{font-size:12px!important;color:#cccbbd;letter-spacing:1.5px}
.work:has(.screening-room)>.section-head{flex-direction:column;align-items:center;gap:26px;text-align:center}
.work:has(.screening-room) .filters{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.work:has(.screening-room) .filters button{font-size:16px;font-weight:600;min-height:50px;padding:13px 25px;border:1px solid #ee742e;border-radius:30px;color:#ffab73;background:#ee641b0d;transition:background .2s,color .2s}
.work:has(.screening-room) .filters button:hover,.work:has(.screening-room) .filters button:focus-visible{background:#ee641b28;color:#fff0df}
.work:has(.screening-room) .filters button.active{background:#f47a2b;color:#171813;border-color:#f47a2b}
.work:has(.screening-room){padding-top:65px}
.hero-spaceship{position:absolute;width:48px;height:32px;margin:-16px 0 0 -24px;z-index:20;pointer-events:none;opacity:0;transform:rotate(var(--ship-angle,0deg));transition:transform .12s ease-out;filter:drop-shadow(0 2px 4px #0008)}
.hero-spaceship{width:72px;height:48px;margin:-24px 0 0 -36px}
.hero-spaceship svg{width:72px;height:48px;overflow:visible}
.hero.ship-active,.hero.ship-active *{cursor:none!important}
.hero.ship-active .hero-spaceship{opacity:1}
.ship-flame{opacity:.15;transform-origin:-13px 0;transform:scaleX(.35);transition:opacity .15s,transform .15s}
.is-moving .ship-flame{opacity:1;transform:scale(1.6,1.25);animation:ship-thrust .1s infinite alternate}
@keyframes ship-thrust{to{transform:scale(1.25,1.1);opacity:.8}}
.ship-smoke{position:absolute;z-index:19;pointer-events:none;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle,#d2ccc3a0 0%,#aaa49c50 35%,#99938a00 72%);animation:ship-smoke-out 1.5s ease-out forwards}
@keyframes ship-smoke-out{0%{opacity:.5;transform:scale(.45)}100%{opacity:0;transform:translate(var(--smoke-x),var(--smoke-y)) scale(2.6)}}
@media(prefers-reduced-motion:reduce){.hero-spaceship{transition:none}.is-moving .ship-flame{animation:none}}
@media(max-width:700px){
 .hero{height:850px}
 .hero h1{left:50%;top:16%;width:70%}
 .hero #stage{inset:220px 0 auto;height:350px}
 .hero .hero-bottom{bottom:107px!important}
 .hero .pointer-note{bottom:55px;font-size:10px!important;white-space:normal;width:88%;text-align:center}
 .hero .hero-intro p{font-size:15px;margin-bottom:16px}
 .hero .work-link{font-size:12px}
 .work:has(.screening-room) .filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:440px}
 .work:has(.screening-room) .filters button{font-size:14px;padding:12px 16px}
 #hero-motion{bottom:15px;left:6%}
}
/* Readability and founder section, 0.9.1 preview. */
.hero .hero-top{font-size:14px;line-height:1.5;color:#e4e1d6;letter-spacing:1px;gap:24px}
.hero .hero-intro{max-width:440px}
.hero .hero-intro p{font-size:20px;line-height:1.6}
.clients .clients-head{font-size:16px;line-height:1.5;letter-spacing:1.2px}
.process-caption{font-size:13px;color:#d1d0c1;line-height:1.5}
footer .footer-top{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:28px 70px;align-items:center}
footer .footer-top>span{grid-column:1/-1;font-size:14px;letter-spacing:1.5px}
footer .footer-top>a{font-size:clamp(56px,7.6vw,118px);letter-spacing:-.055em;line-height:1.02;display:block;position:relative;padding-right:40px}
footer .footer-top>a>span{position:absolute;right:0;top:0;font-size:45px}
.founder-card{max-width:380px;justify-self:end;color:#1c1c1a}
.founder-portrait{aspect-ratio:4/3;border:1px solid #1c1c1a60;background:#1c1c1a0b;display:flex;align-items:center;justify-content:center;margin-bottom:24px;border-radius:4px;font:12px monospace;letter-spacing:2px}
.founder-card .founder-role{font-size:12px;letter-spacing:1.6px;margin:0 0 10px}
.founder-card h3{font-size:32px;font-weight:500;letter-spacing:-1px;margin:0 0 15px}
.founder-card p{font-size:17px;line-height:1.65;margin:0}
@media(max-width:700px){
.hero .hero-top{font-size:10px;flex-direction:column;gap:6px;padding-top:22px}
.hero .hero-top .location{display:block}
.hero .hero-intro p{font-size:17px}
.clients .clients-head{font-size:13px;gap:10px}
.process-caption{font-size:12px}
footer .footer-top{grid-template-columns:1fr;gap:30px}
footer .footer-top>a{font-size:17vw}
.founder-card{max-width:100%;justify-self:stretch}
.founder-portrait{max-width:380px}
}
.founder-portrait{position:relative;isolation:isolate;aspect-ratio:1/1;overflow:visible;border:0;background:none;margin:18px 0 28px}
.founder-portrait:before{content:'';position:absolute;inset:12% 0 0;background:#1c1c1a;border-radius:50% 50% 5px 5px;z-index:-1;transform:rotate(-4deg)}
.founder-portrait img{position:absolute;bottom:0;left:0;width:100%;height:112%;object-fit:contain;object-position:center bottom;mask-image:linear-gradient(#000 92%,transparent 100%)}
.founder-portrait>span{position:absolute;bottom:18px;left:-18px;font-size:12px;line-height:1.25;letter-spacing:1px;background:#f4ebd9;color:#1c1c1a;padding:12px 14px;transform:rotate(-5deg);box-shadow:3px 3px 0 #1c1c1a}
/* Film collage leads into the studio story. */
.collage-approach .production-collage{grid-row:1}
.collage-approach .ribbon-pause{grid-row:2;margin-bottom:36px}
.collage-approach .approach-copy,.collage-approach .process-visual{grid-row:3}
@media(max-width:700px){.collage-approach .approach-copy{grid-row:3}.collage-approach .process-visual{grid-row:4}.collage-approach .ribbon-pause{margin-bottom:20px}}
/* Falling clappers sit between the particle field and the head. */
.hero #stage{z-index:2}
.battle-hud{position:absolute;left:4.3%;top:170px;z-index:5;font:11px monospace;letter-spacing:1px;color:#f6d6ca;background:#171914bc;padding:9px 12px;border-radius:12px;pointer-events:none}
.upgrade-panel{width:min(960px,94vw);padding:38px;border:1px solid #ffffff38;border-radius:24px;background:linear-gradient(145deg,#252824,#121411);color:#f4ebd9;box-shadow:0 28px 100px #0009}
.upgrade-panel::backdrop{background:#080b09d9;backdrop-filter:blur(5px)}
.upgrade-panel h2{font-size:clamp(27px,4vw,44px);margin:12px 0;font-weight:500;letter-spacing:-1.5px}.upgrade-panel>p{color:#b7b9ae;font-size:14px}.upgrade-panel .upgrade-kicker{font:10px monospace;letter-spacing:2px;color:#f39153}
.weapon-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}.weapon-cards button{--weapon:#a6f76b;display:flex;flex-direction:column;text-align:left;gap:14px;padding:24px 20px;border:1px solid #ffffff26;border-radius:16px;background:linear-gradient(140deg,#ffffff0e,#ffffff02);color:#f4ebd9;cursor:pointer;transition:transform .2s,border-color .2s}
.weapon-cards button:nth-child(2){--weapon:#ff9d67}.weapon-cards button:nth-child(3){--weapon:#64ccff}.weapon-cards button:hover,.weapon-cards button:focus-visible{transform:translateY(-5px);border-color:var(--weapon);outline:2px solid var(--weapon);outline-offset:3px}.weapon-icon{font-size:52px;color:var(--weapon);height:65px}.weapon-cards small{font:9px monospace;color:#aaafa4;letter-spacing:1px}.weapon-cards strong{font-size:23px;letter-spacing:-1px}.weapon-cards p{font-size:13px;line-height:1.7;color:#bdc0b5;flex:1;margin:0}.weapon-cards b{font:10px monospace;color:var(--weapon);margin-top:15px}.restart-game{padding:15px 25px;border:0;border-radius:30px;background:#ee641b;color:#171712;font-weight:bold;cursor:pointer}
@media(max-width:700px){.upgrade-panel{padding:22px;max-height:85vh;overflow:auto}.weapon-cards{grid-template-columns:1fr;gap:10px}.weapon-cards button{padding:15px;gap:8px}.weapon-icon{font-size:30px;height:35px}.battle-hud{top:164px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.weapon-cards button{transition:none}}
.hero{user-select:none;-webkit-user-select:none}.hero img,.hero canvas{-webkit-user-drag:none}.battle-hud{max-width:90%;line-height:1.7}.weapon-cards button[data-weapon="shield"]{--weapon:#64ccff}.weapon-cards button[data-weapon="flower"]{--weapon:#cba0ff}.weapon-cards button[data-weapon="heal"]{--weapon:#a6f76b}
.hp-playground{position:relative;height:210px;margin:24px 0}.hp-refill{position:absolute;left:0;top:0;white-space:nowrap}.brave-game{position:relative;max-width:100%}
/* Static nebula layers: no new animation or rendering loop. */
.hero[data-space="blue"]{background:radial-gradient(ellipse at 78% 25%,#29446799,transparent 60%),radial-gradient(ellipse at 10% 68%,#35285577,transparent 65%),#0c1423}
.hero[data-space="red"]{background:radial-gradient(ellipse at 50% 38%,#67252599,transparent 62%),radial-gradient(ellipse at 90% 70%,#42213a66,transparent 50%),#190d13;box-shadow:inset 0 0 140px 45px #08060bc9}
.ship-palette{position:absolute;right:4.3%;bottom:28px;z-index:7;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #ffffff30;border-radius:30px;background:#141922db;color:#dedee6;font:10px monospace;letter-spacing:1px}
.ship-palette button{width:25px;height:25px;border-radius:50%;background:var(--swatch);border:2px solid transparent;cursor:pointer;padding:0}.ship-palette button[aria-pressed="true"]{outline:2px solid #fff;outline-offset:3px}.ship-palette button:focus-visible{outline:3px solid #ff9a50;outline-offset:4px}
@media(max-width:700px){.ship-palette{bottom:45px;gap:8px}.ship-palette span{font-size:8px}}
.hero-spaceship{width:94px;height:63px;margin:-31.5px 0 0 -47px}.hero-spaceship svg{width:94px;height:63px}
.ship-models{position:absolute;right:4.3%;bottom:88px;z-index:7;display:flex;gap:7px;padding:8px;border:1px solid #ffffff30;border-radius:18px;background:#141922e8}.ship-models button{display:flex;flex-direction:column;align-items:center;gap:3px;background:transparent;border:1px solid transparent;border-radius:10px;color:#eae9e2;padding:5px 8px;cursor:pointer;font:9px monospace;letter-spacing:1px}.ship-models svg{width:58px;height:39px}.ship-models button[aria-pressed="true"]{border-color:#ff9c59;background:#ff9c5918}.ship-models button:focus-visible{outline:2px solid #ff9c59}.ship-models .ship-flame{opacity:.65;animation:none;transform:none}
@media(max-width:700px){.ship-models{bottom:103px}.ship-models svg{width:44px;height:30px}.ship-models button{padding:4px 6px}}
/* Keep the selector below the hero copy and its work link. */
.hero:has(.ship-models){padding-bottom:170px}.ship-models{bottom:78px}
.hero:has(.ship-models) .hero-bottom{margin-bottom:110px}

/* Heading smoothing happens in the shared frame loop, matching the firing direction. */
.hero-spaceship{transition:none}