/* Homepage-only layout; shared navigation, content and design tokens stay in site.css. */
.home-hero { position:relative; overflow:hidden; min-height:100svh; }
.home-hero .hero-stage { position:relative; min-height:700px; height:calc(100svh - 88px); max-height:1080px; }
.home-hero .hero-copy-wrap { position:relative; z-index:2; display:flex; align-items:center; width:100%; height:100%; padding:24px 40px 96px; pointer-events:none; }
.home-hero .hero-copy { display:flex; flex-direction:column; align-items:flex-start; gap:28px; max-width:480px; width:45%; pointer-events:auto; }
.home-hero .hero-scene { position:absolute; inset:0; width:100%; height:100%; user-select:none; -webkit-user-select:none; }
.home-hero #hero-canvas,.home-hero #hero-poster { display:block; position:absolute; inset:0; width:100%; height:100%; }
.home-hero #hero-poster { object-fit:cover; object-position:center; opacity:1; transition:opacity .6s,visibility .6s; pointer-events:none; }
.home-hero #hero-canvas { opacity:0; cursor:grab; touch-action:pan-y; transition:opacity .6s; }
.home-hero #hero-canvas.is-hovering { cursor:pointer; }
.home-hero #hero-canvas.is-dragging { cursor:grabbing; }
.home-hero #hero-canvas:focus-visible { outline:2px solid #b8dcff; outline-offset:-6px; }
.home-hero .scene-ready #hero-canvas { opacity:1; }
.home-hero .scene-ready #hero-poster { opacity:0; visibility:hidden; }
.home-hero .scene-fallback #hero-canvas { display:none; }
.home-hero .scene-fallback #hero-poster { opacity:1; visibility:visible; }
.home-hero .hero-scene::before { content:""; position:absolute; left:0; right:0; top:0; height:90px; z-index:1; pointer-events:none; background:linear-gradient(#131c30,rgba(19,28,48,0)); }
.home-hero #hero-canvas,.home-hero #hero-poster { -webkit-mask-image:linear-gradient(#000 0%,#000 87%,transparent 100%); mask-image:linear-gradient(#000 0%,#000 87%,transparent 100%); }
.home-hero .scene-ui { position:absolute; z-index:3; left:53%; right:40px; bottom:24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 20px; }
.home-hero .rl-hint { margin:0; color:#c5ddfa; font-size:11px; line-height:1.5; text-shadow:0 1px 8px #020716; transition:opacity .6s; }
.home-hero .rl-hint.is-hidden { opacity:.65; }
.home-hero .scene-controls { display:flex; align-items:center; gap:0; padding:0 5px; background:rgba(2,7,22,.76); border:1px solid rgba(144,183,242,.16); border-radius:4px; backdrop-filter:blur(10px); }
.home-hero .scene-controls button { min-height:44px; padding:10px 11px; border:0; background:transparent; color:#d3e3f7; font:inherit; font-size:11px; cursor:pointer; white-space:nowrap; }
.home-hero .scene-controls button+button { border-left:1px solid rgba(144,183,242,.14); }
.home-hero .scene-controls button:hover { color:white; background:rgba(144,183,242,.09); }
.home-hero .scene-controls button:focus-visible { outline:2px solid #b8dcff; outline-offset:2px; }
.home-hero .hero-scene:not(.scene-ready) .scene-ui { visibility:hidden; pointer-events:none; }
.home-hero .scene-fallback .scene-ui { display:none; }
.home-hero .hero-sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:900px) {
  .home-hero { min-height:0; }
  .home-hero .hero-stage { display:flex; flex-direction:column; height:auto; min-height:0; max-height:none; }
  .home-hero .hero-copy-wrap { height:auto; padding:46px 40px 0; }
  .home-hero .hero-copy { width:100%; max-width:620px; }
  .home-hero .hero-scene { position:relative; inset:auto; height:min(650px,115vw); min-height:550px; }
  .home-hero .scene-ui { left:20px; right:20px; bottom:20px; gap:6px; }
  .home-hero .rl-hint { flex-basis:100%; text-align:center; font-size:10px; }
}
@media (max-width:640px) {
  .home-hero .hero-copy-wrap { padding-top:36px; }
  .home-hero .hero-copy { gap:24px; }
  .home-hero .hero-scene { height:550px; }
}
@media (prefers-reduced-motion:reduce) {
  .home-hero #hero-canvas,.home-hero #hero-poster,.home-hero .rl-hint { transition:none; }
}


.home-hero .hero-scene:not(.scene-ready) #scene-description { display:none; }

.home-hero .hero-title { font-size:clamp(44px,4.8vw,76px); font-weight:500; line-height:1.06; letter-spacing:-.035em; color:var(--color-neutral-100); margin:0; }
.home-hero .hero-title em { background:none; color:var(--color-accent-300); filter:none; }