/* Reference sky and city plate behind the existing live hero artwork. */
body { position:relative; isolation:isolate; display:flow-root; }
body::before { content:''; position:absolute; left:0; right:0; top:0; height:100svh; z-index:-1; background:#e9f4fb url('assets/hero-reference-backplate.png') center top / cover no-repeat; pointer-events:none; }
.hero-hd { background:transparent; }
.hero-hd::before { background:linear-gradient(90deg,#fff7e6ed 0%,#fff7e6b0 24%,#fff7e630 43%,transparent 58%); }
.hero-hd .hero-art { overflow:hidden; mask-image:linear-gradient(to right,transparent,#000 8%,#000),linear-gradient(to bottom,transparent,#000 12%,#000 96%,transparent); -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000),linear-gradient(to bottom,transparent,#000 12%,#000 96%,transparent); }
.header .brand { position:relative; isolation:isolate; border-radius:8px; }
.header .brand-vector { animation:brand-float 5.5s ease-in-out infinite; }
.header .brand::after { content:''; pointer-events:none; position:absolute; inset:0; border-radius:8px; background:linear-gradient(110deg,transparent 25%,#fff0 40%,#ffffffa6 50%,#fff0 60%,transparent 75%); background-size:250% 100%; background-position:140% 0; opacity:0; animation:brand-shine 8s ease-in-out infinite; }
.header .brand:is(:hover,:focus-visible) .brand-vector { filter:drop-shadow(0 3px 7px #ff68182b); }
@keyframes brand-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-2px); } }
@keyframes brand-shine { 0%,65%,100% { background-position:140% 0; opacity:0; } 70% { opacity:.65; } 88% { background-position:-40% 0; opacity:0; } }
@media(min-width:901px) {
 .hero-hd .hero-canvas { width:min(66%,calc((100svh - var(--header-height) - 18px) * 1.1774)); }
 .hero-hd .mobile-hero-copy { width:40%; }
 .hero-hd .mobile-hero-copy h1 { font-size:clamp(44px,min(5vw,8.5svh),88px); }
}
@media(max-width:700px) { body::before { height:950px; background-position:42% top; } .hero-hd::before { background:linear-gradient(#fff7e6e8,#fff7e6d9 48%,transparent 75%); } }
.dark-mode::before { opacity:.22; }
@media(prefers-reduced-motion:reduce) { .header .brand-vector,.header .brand::after { animation:none; } }



@media(max-width:700px) {
 .hero-hd .scene-caption { right:19%; bottom:7%; max-width:72%; padding:9px 10px; gap:7px; }
 .hero-hd .scene-caption strong { font-size:11px; }
 .hero-hd .scene-caption small { font-size:9px; }
 .hero-hd .hero-motion { right:3%; bottom:21%; }
}