/* Four-second brand opening. Coordinates preserve the approved logo artwork. */
body.intro-running { overflow: hidden; }
#brand-intro {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center; overflow: hidden;
  background: #051930; color: #fff;
  animation: intro-dismiss 4s linear both;
}
#brand-intro[hidden] { display: none; }
.intro-art { display: block; width: min(1120px, 94vw); height: auto; overflow: hidden; mix-blend-mode: lighten; }
.intro-icon { animation: intro-position 2.4s cubic-bezier(.22,.75,.2,1) both; }
.intro-left { transform-origin: 368px 580px; animation: intro-open-left 1.15s cubic-bezier(.16,1,.3,1) both; }
.intro-right { transform-origin: 368px 580px; animation: intro-open-right 1.15s cubic-bezier(.16,1,.3,1) both; }
.intro-candle { animation: intro-pop .65s cubic-bezier(.2,.9,.3,1.25) both; }
.intro-candle-one { transform-origin: 394px 523px; animation-delay: .8s; }
.intro-candle-two { transform-origin: 455px 485px; animation-delay: .97s; }
.intro-candle-three { transform-origin: 518px 455px; animation-delay: 1.14s; }
.intro-wordmark { transform-origin: 365px 560px; animation: intro-wordmark 1s cubic-bezier(.16,.9,.25,1) 1.65s both; }
.intro-finished { animation: intro-finish .18s linear 2.8s both; }
#intro-skip {
  position: absolute; bottom: max(28px, env(safe-area-inset-bottom)); right: max(24px, env(safe-area-inset-right));
  padding: 12px 18px; min-height: 44px; background: transparent;
  border: 1px solid #ffffff30; border-radius: 999px; color: #b7c0cd;
  font: inherit; font-size: 12px; cursor: pointer;
}
#intro-skip:hover { color: #fff; border-color: #a5ef76; }
#intro-skip:focus-visible { outline: 2px solid #a5ef76; outline-offset: 4px; }
@keyframes intro-open-left {
  0%, 8% { opacity: 0; transform: perspective(700px) rotateY(86deg) rotate(-8deg); }
  22% { opacity: 1; }
  76% { transform: perspective(700px) rotateY(-6deg) rotate(1deg); }
  100% { opacity: 1; transform: perspective(700px) rotateY(0) rotate(0); }
}
@keyframes intro-open-right {
  0%, 8% { opacity: 0; transform: perspective(700px) rotateY(-86deg) rotate(8deg); }
  22% { opacity: 1; }
  76% { transform: perspective(700px) rotateY(6deg) rotate(-1deg); }
  100% { opacity: 1; transform: perspective(700px) rotateY(0) rotate(0); }
}
@keyframes intro-pop {
  0% { opacity: 0; transform: translateY(85px) scaleY(0); }
  22% { opacity: 1; }
  72% { transform: translateY(-10px) scaleY(1.08); }
  100% { opacity: 1; transform: translateY(0) scaleY(1); }
}
@keyframes intro-position {
  0%, 60% { transform: translateX(525px); }
  100% { transform: translateX(0); }
}
@keyframes intro-wordmark {
  0% { opacity: 0; transform: translate(290px, 50px) scale(.02) rotate(-12deg); }
  28% { opacity: 1; }
  72% { transform: translate(5px, -14px) scale(1.02) rotate(1deg); }
  100% { opacity: 1; transform: translate(0, 0) scale(1) rotate(0); }
}
@keyframes intro-finish { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-dismiss {
  0%, 90% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) {
  #brand-intro { animation: none; }
  #brand-intro .intro-art * { animation: none; }
  .intro-icon, .intro-wordmark { visibility: hidden; }
  .intro-finished { opacity: 1; }
}