/* A single soft burst, then the supplied brand mark. No flashing or sound. */
.brand-intro {
  position: fixed; inset: 0; margin: 0; padding: 0; border: 0;
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  overflow: hidden; background: #fff8f9; color: #c70a3c;
  overscroll-behavior: contain;
}
.brand-intro::backdrop { background: #fff8f9; }
.brand-intro-stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.brand-intro:not(.is-playing) .brand-intro-stage { visibility: hidden; }
.brand-intro:not(.is-playing) .brand-intro-stage * { animation-play-state: paused; }
.brand-intro-glow { position: absolute; width: min(84vw,600px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle,#ffdce7 0%,#fff0f5 48%,#fff8f900 72%); animation: intro-glow 1300ms 120ms both; }
.brand-intro-ring { position: absolute; width: 90px; height: 90px; border: 12px solid #f5a2ba; border-radius: 50%; animation: intro-ring 800ms 160ms cubic-bezier(.15,.7,.2,1) both; }
.brand-intro-shard { position: absolute; left: 50%; top: 50%; width: 15px; height: 25px; margin: -12px 0 0 -7px; border-radius: 4px; background: #c70a3c; animation: intro-shard 1000ms var(--delay,160ms) cubic-bezier(.12,.64,.27,1) both; }
.brand-intro-shard:nth-child(3n) { background: #f59ab7; border-radius: 50%; width: 14px; height: 14px; }
.brand-intro-shard:nth-child(3n + 1) { background: #ffd1df; border: 2px solid #e54672; width: 20px; height: 27px; }
.brand-intro-mark { position: relative; width: min(69vw,360px); text-align: center; animation: intro-mark 1050ms 220ms cubic-bezier(.2,.8,.2,1) both; }
.brand-intro-logo { position: relative; display: block; width: 100%; aspect-ratio: 1132/793; overflow: hidden; }
.brand-intro-logo img { display: block; position: absolute; width: 110.78%; height: auto; max-width: none; left: -5.74%; top: -30.39%; }
.brand-intro-tagline { margin: 26px 0 0; font: 600 11px/1.7 'DM Sans',sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #8a324c; animation: intro-tagline 400ms 850ms both; }
.brand-intro-skip { position: absolute; right: max(24px,env(safe-area-inset-right)); bottom: max(24px,env(safe-area-inset-bottom)); min-height: 44px; padding: 11px 18px; border: 1px solid #e1b6c3; border-radius: 999px; background: #fffafc; color: #84233f; font: 500 13px/1.5 'DM Sans',sans-serif; cursor: pointer; }
.brand-intro-skip:hover { background: #ffe8ef; }
.brand-intro-skip:focus-visible { outline: 3px solid #c70a3c; outline-offset: 4px; }
.brand-intro.is-ending { animation: intro-exit 220ms ease-in forwards; pointer-events: none; }
@keyframes intro-glow { 0% { opacity: 0; transform: scale(.2); } 35% { opacity: 1; } 100% { opacity: .8; transform: scale(1.1); } }
@keyframes intro-ring { from { opacity: .8; transform: scale(.1); } to { opacity: 0; transform: scale(6); } }
@keyframes intro-shard { 0% { opacity: 0; transform: translate(0,0) scale(.1) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x),var(--y)) scale(.7) rotate(var(--turn)); } }
@keyframes intro-mark { 0% { opacity: 0; transform: scale(.2) rotate(-8deg); } 38% { opacity: 1; transform: scale(1.08) rotate(2deg); } 62%,100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes intro-tagline { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes intro-exit { to { opacity: 0; transform: scale(1.025); } }
@media (max-width: 600px) {
  .brand-intro-mark { width: min(73vw,310px); }
  .brand-intro-tagline { font-size: 10px; letter-spacing: .13em; margin-top: 22px; }
}
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none; } .brand-intro * { animation: none !important; } }