/* A shared visual identity for the masthead, opening scene and artist stage. */
.nav{background:linear-gradient(180deg,#070a0bf2,#070a0b70);border-color:#ffffff18}
.wordmark{gap:12px;letter-spacing:1px;isolation:isolate}
.brand-symbol{width:72px;height:72px;flex:0 0 72px;display:grid;place-items:center;overflow:visible;position:relative}
.brand-symbol::before{content:'';position:absolute;inset:7%;border-radius:50%;background:radial-gradient(ellipse,#ff773d45,transparent 70%);animation:brand-glow 5s ease-in-out infinite;pointer-events:none}
.wordmark .brand-symbol img{position:relative;width:100%;height:100%;max-width:100%;object-fit:contain;border-radius:0;mix-blend-mode:lighten;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent),linear-gradient(0deg,transparent,black 10%,black 90%,transparent);mask-composite:intersect;animation:brand-float 5s ease-in-out infinite}
.brand-name{position:relative;font-size:20px;line-height:1.1;white-space:nowrap}
.brand-name .thin{color:var(--orange)}
.brand-name::after{content:'';position:absolute;left:0;bottom:-7px;width:44px;height:1px;background:var(--orange);box-shadow:0 0 8px #ff773d80;transform-origin:left;animation:brand-signal 5s ease-in-out infinite;pointer-events:none}
.brand-name small{display:block;font-size:6px;font-weight:500;letter-spacing:1.9px;margin-top:9px;color:var(--muted)}
.hero-art{opacity:.44}
.hero-emblem{position:absolute;z-index:-2;right:5%;top:18%;width:min(46vw,700px);aspect-ratio:1;mix-blend-mode:lighten;pointer-events:none;animation:emblem-float 10s ease-in-out infinite}
.hero-emblem img{height:100%;object-fit:contain;mask-image:radial-gradient(ellipse,black 47%,transparent 71%)}
#current{opacity:.6;z-index:-3}
.hero-shade{background:linear-gradient(90deg,#070a0be6,transparent 70%),linear-gradient(0deg,#070a0b,transparent 24%,transparent 85%,#070a0b50)}
.studio{position:relative;isolation:isolate;max-width:none;padding:110px max(6%,calc((100vw - 1364px)/2));overflow:hidden;border-block:1px solid #ffffff14;background:radial-gradient(ellipse at 20% 47%,#102c3255,transparent 49%),radial-gradient(ellipse at 46% 75%,#632c1433,transparent 45%),#070a0b}
.studio::before{content:'';position:absolute;z-index:-1;inset:-15%;background:radial-gradient(ellipse at 23% 40%,#39cfde1a,transparent 35%),radial-gradient(ellipse at 44% 60%,#ff773d21,transparent 36%);animation:studio-light 16s ease-in-out infinite alternate;pointer-events:none}
.studio::after{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#c8efed38 .7px,transparent .9px);background-size:41px 41px;mask-image:linear-gradient(90deg,black,transparent 58%);opacity:.4;pointer-events:none}
.studio-image{isolation:isolate;overflow:visible}
.studio-image img{position:relative;z-index:2;mix-blend-mode:lighten;mask-image:radial-gradient(ellipse,black 46%,transparent 71%);animation:emblem-float 8s ease-in-out infinite}
.symbol-orbits{position:absolute;inset:6%;perspective:700px;pointer-events:none}
.symbol-orbits i{position:absolute;inset:0;border:1px solid #76e6ef47;border-radius:50%;transform:rotate(-28deg) scaleY(.77);box-shadow:inset 0 0 25px #59d9e208,0 0 30px #59d9e208;animation:orbit-breathe 12s ease-in-out infinite alternate}
.symbol-orbits i:nth-child(2){inset:8% -5%;border-color:#ff773d4d;transform:rotate(32deg) scaleY(.69);animation-delay:-4s}
.symbol-orbits i:nth-child(3){inset:12%;border-style:dashed;border-color:#7dd5dd24;transform:rotate(-14deg) scaleY(.87);animation-delay:-8s}
.symbol-orbits i::after{content:'';position:absolute;left:16%;top:10%;width:5px;height:5px;border-radius:50%;background:#ff773d;box-shadow:0 0 18px #ff773d}
.symbol-floor{position:absolute;left:5%;right:5%;bottom:8%;height:16%;border:1px solid #64ece225;border-radius:50%;background:radial-gradient(ellipse,#59d9e21a,transparent 69%);box-shadow:0 12px 65px #41bdcc14;transform:rotate(-6deg)}
.symbol-signature{position:absolute;left:7%;right:7%;bottom:-1%;display:flex;justify-content:space-between;gap:10px;font-size:7px;letter-spacing:1.8px;color:#a9bdb9;border-top:1px solid #a0d6d324;padding-top:16px}
.studio-copy{position:relative;z-index:2}
.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
@keyframes emblem-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes studio-light{from{transform:translate(-2%,-3%);opacity:.65}to{transform:translate(4%,3%);opacity:1}}
@keyframes orbit-breathe{from{translate:0 -4px;opacity:.45}to{translate:0 8px;opacity:1}}
@keyframes brand-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@keyframes brand-glow{0%,100%{opacity:.4;transform:scale(.88)}50%{opacity:.9;transform:scale(1.12)}}
@keyframes brand-signal{0%,100%{transform:scaleX(.55);opacity:.45}50%{transform:scaleX(1);opacity:.9}}
@media(min-width:1600px){.hero-emblem{right:8%;top:16%}}
@media(max-width:1000px){.brand-name{font-size:18px}.nav nav{gap:16px}.studio{padding:85px 6%;gap:40px}.hero-emblem{right:-8%;width:62vw;top:23%;opacity:.75}}
@media(max-width:640px){
 .wordmark{gap:7px}.brand-symbol{width:56px;height:56px;flex-basis:56px}.brand-name{font-size:16px;letter-spacing:.7px}.brand-name small{font-size:4.5px;letter-spacing:1px;margin-top:7px}
 .nav-contact{padding:10px 12px}.nav-contact span{margin-left:6px}
 .hero{min-height:780px}.hero-emblem{width:230px;right:4%;top:auto;bottom:65px;opacity:.72}.hero-art{opacity:.48}.hero-shade{background:linear-gradient(90deg,#070a0b99,transparent),linear-gradient(0deg,#070a0b,transparent 40%)}
 .studio{padding:65px 7%;gap:64px}.studio-image{max-width:460px;width:100%;margin:auto}.symbol-signature{font-size:6px;letter-spacing:1px}.studio::after{mask-image:linear-gradient(black,transparent 50%)}
}
@media(prefers-reduced-motion:reduce){.hero-emblem,.studio-image img,.studio::before,.symbol-orbits i,.wordmark .brand-symbol img,.brand-symbol::before,.brand-name::after{animation:none!important}}