/* A complete logo-only first view; the interface is revealed afterwards. */
.brand-intro{position:fixed;inset:0;z-index:100;display:grid;place-items:center;overflow:hidden;background:#f6f2e8;opacity:0;visibility:hidden;pointer-events:none;transition:opacity 520ms ease}
.brand-intro[hidden]{display:none!important}
.brand-intro-logo{display:block;width:148px;max-width:44vw;height:auto;aspect-ratio:1;border-radius:50%;opacity:0;transform-origin:50% 50%;--logo-home-x:0px;--logo-home-y:0px;--logo-home-scale:.5}
html[data-brand-intro=show] .brand-intro{opacity:1;visibility:visible;pointer-events:auto}
html[data-brand-intro=reveal] .brand-intro{opacity:0;visibility:visible;pointer-events:none}
.brand-intro.is-playing .brand-intro-logo{opacity:1;animation:brand-intro-mark 1600ms cubic-bezier(.22,.65,.3,1) both;will-change:transform,opacity}
.has-brand-intro .hub{transition:none}
.has-brand-intro .backdrop{transition:opacity 600ms ease}
.has-brand-intro .glass-link{animation:none}
html[data-brand-intro=show] .hub{visibility:hidden;opacity:0;pointer-events:none}
html[data-brand-intro=show] .backdrop{opacity:0}
html[data-brand-intro=show] .skip-link{visibility:hidden}
@keyframes brand-intro-mark{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.58) rotate(-20deg)}
  18%{opacity:1;transform:translate3d(0,0,0) scale(1.09) rotate(8deg)}
  38%{opacity:1;transform:translate3d(0,0,0) scale(.96) rotate(-5deg)}
  58%,76%{opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0deg)}
  100%{opacity:1;transform:translate3d(var(--logo-home-x),var(--logo-home-y),0) scale(var(--logo-home-scale)) rotate(0deg)}
}

.brand-intro-wordmark{position:absolute;top:calc(50% + min(74px,22vw) + 16px);left:50%;transform:translateX(-50%);color:#0b452e;font-family:SarbonSans,Arial,sans-serif;font-size:clamp(21px,5.8vw,26px);font-weight:700;line-height:1.15;letter-spacing:.14em;white-space:nowrap;opacity:0}
.brand-intro.is-playing .brand-intro-wordmark{opacity:1;animation:brand-intro-name 1600ms ease both}
@keyframes brand-intro-name{
  0%,12%{opacity:0;transform:translate(-50%,10px)}
  30%,72%{opacity:1;transform:translate(-50%,0)}
  100%{opacity:0;transform:translate(-50%,-8px)}
}
/* These entrances begin only after the 1.6-second logo phase. */
html[data-brand-intro=reveal] .brand-wordmark,
html[data-brand-intro=reveal] .language-switch,
html[data-brand-intro=reveal] .sound-toggle,
html[data-brand-intro=reveal] .welcome h1,
html[data-brand-intro=reveal] .glass-link{animation:brand-interface-in 520ms cubic-bezier(.2,.65,.3,1) backwards}
html[data-brand-intro=reveal] .brand-wordmark{animation-delay:0ms}
html[data-brand-intro=reveal] .language-switch,html[data-brand-intro=reveal] .sound-toggle{animation-delay:40ms}
html[data-brand-intro=reveal] .welcome h1{animation-delay:80ms}
html[data-brand-intro=reveal] .glass-link:nth-child(1){animation-delay:120ms}
html[data-brand-intro=reveal] .glass-link:nth-child(2){animation-delay:180ms}
html[data-brand-intro=reveal] .glass-link:nth-child(3){animation-delay:240ms}
html[data-brand-intro=reveal] .glass-link:nth-child(4){animation-delay:300ms}
@keyframes brand-interface-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
  .brand-intro,.has-brand-intro .hub,.has-brand-intro .backdrop{transition:none}
  .brand-intro.is-playing .brand-intro-logo{animation:none!important;opacity:1;transform:none}
  .brand-intro.is-playing .brand-intro-wordmark{animation:none!important;opacity:1;transform:translateX(-50%)}
}