/* Lion movement exists exclusively in the MP4/WebM. No CSS animation. */
html.brand-intro-active { overflow: hidden; }
html.brand-intro-active, html.brand-intro-active body { background: #fff !important; }
html.brand-intro-active body > :not(#brand-intro) { visibility: hidden; }
#brand-intro[hidden] { display: none; }
#brand-intro {
  position: fixed; inset: 0; z-index: 100000;
  display: grid; place-items: center; padding: 24px;
  background: #fff; color: #123d2f;
}
#brand-intro .intro-composition { width: min(100%, 1040px); text-align: center; }
#brand-intro video {
  display: block; width: 100%; max-height: 68svh; aspect-ratio: 1248 / 768;
  object-fit: contain; visibility: hidden; background: transparent;
  /* Static edge treatment blends only the empty reference margins into the page.
     All character motion remains in the real video; no animated CSS effects. */
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
#brand-intro video.has-frame { visibility: visible; }
#intro-label { margin: 22px 0 16px; font-size: 13px; letter-spacing: .08em; }
.intro-meter { display: flex; align-items: center; gap: 14px; width: min(300px, 100%); margin: auto; }
#intro-progress { flex: 1; min-width: 0; height: 2px; appearance: none; border: 0; background: #dbe5df; color: #a3813e; }
#intro-progress::-webkit-progress-bar { background: #dbe5df; }
#intro-progress::-webkit-progress-value { background: #a3813e; }
#intro-progress::-moz-progress-bar { background: #a3813e; }
#intro-value { min-width: 4ch; font-size: 12px; font-variant-numeric: tabular-nums; }
#intro-skip { position: absolute; bottom: max(24px, env(safe-area-inset-bottom)); right: 24px; background: transparent; color: #123d2f; border: 1px solid #c8d5cd; border-radius: 24px; padding: 10px 20px; cursor: pointer; }
#intro-skip:focus-visible { outline: 2px solid #c5a567; outline-offset: 4px; }
#intro-play { position:absolute; bottom:max(80px,calc(env(safe-area-inset-bottom) + 76px)); border:1px solid #a3813e; border-radius:24px; background:#123d2f; color:#fff; padding:13px 24px; cursor:pointer; }
#intro-play[hidden] { display:none; }
#intro-play:focus-visible { outline:2px solid #a3813e; outline-offset:4px; }
@media (max-width: 600px) { #brand-intro { padding: 16px; } #intro-label { font-size: 12px; } }