/* Main <-> Studio brand switch overlay (~0.8s) */
#brand-switch{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:0;
  background:#111111;display:flex;align-items:center;justify-content:center;
}
#brand-switch.active{pointer-events:auto;opacity:1}
#brand-switch .sw-gold,#brand-switch .sw-w{
  position:absolute;width:min(420px,70vw);height:auto;opacity:0;transform:scale(.92);
}
#brand-switch .sw-swoosh{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,rgba(201,164,92,.0) 30%,rgba(201,164,92,.55) 50%,rgba(201,164,92,.35) 60%,transparent 100%);
  transform:translateX(-100%);opacity:0;
}
#brand-switch.to-studio .sw-gold{animation:sw-fade-out .35s ease forwards}
#brand-switch.to-studio .sw-swoosh{animation:sw-sweep .8s ease-in-out forwards}
#brand-switch.to-studio .sw-w{animation:sw-fade-in .35s ease .4s forwards}
#brand-switch.to-main .sw-w{animation:sw-fade-out .35s ease forwards}
#brand-switch.to-main .sw-swoosh{animation:sw-sweep-rev .8s ease-in-out forwards}
#brand-switch.to-main .sw-gold{animation:sw-fade-in .35s ease .4s forwards}
@keyframes sw-sweep{0%{opacity:0;transform:translateX(-100%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(100%)}}
@keyframes sw-sweep-rev{0%{opacity:0;transform:translateX(100%)}20%{opacity:1}80%{opacity:1}100%{opacity:0;transform:translateX(-100%)}}
@keyframes sw-fade-out{to{opacity:0;transform:scale(1.05)}}
@keyframes sw-fade-in{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  #brand-switch .sw-gold,#brand-switch .sw-w,#brand-switch .sw-swoosh{animation:none !important}
  #brand-switch.to-studio .sw-w,#brand-switch.to-main .sw-gold{opacity:1;transform:none}
}
::view-transition-old(root),::view-transition-new(root){animation-duration:.8s}