.brand-intro {
  --z-intro: 60;
  position: fixed;
  inset: 0;
  z-index: var(--z-intro);
  display: none;
  place-items: center;
  background: #fffdf8;
  pointer-events: none;
}
.intro-signature { width: min(62vw, 26rem); height: auto; max-height: 58dvh; overflow: visible; fill: #8f1943; }
.brand-intro.intro-playing { display: grid; animation: intro-exit 380ms ease-out 3820ms both; }
.signature-by { opacity: 0; animation: signature-finish 220ms ease-out forwards; }
.signature-stroke { opacity: 0; stroke-dasharray: 1 2; stroke-dashoffset: 1; animation: ink-write var(--write-duration) linear var(--write-delay) forwards; }
.signature-heart { transform-box: view-box; transform-origin: 19975.49px 6911.16px; }
.intro-playing .signature-heart { animation: signature-heartbeat 420ms cubic-bezier(0.25, 1, 0.5, 1) 3060ms both; }
.signature-sparkles { pointer-events: none; }
.signature-glitter,.signature-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.intro-playing .signature-glitter { animation: signature-glitter 620ms cubic-bezier(.16,1,.3,1) var(--glitter-delay) both; }
.intro-playing .signature-glint { fill: #e4ba63; filter: drop-shadow(0 0 4px rgb(201 160 80 / .72)); animation: signature-glint 740ms cubic-bezier(.16,1,.3,1) var(--glint-delay) both; }
.signature-dust { fill: #f7dda0; filter: drop-shadow(0 0 2px rgb(240 202 114 / .8)); }
@keyframes signature-heartbeat { 0%, 100% { transform: scale(1); } 36% { transform: scale(1.13); } }
@keyframes signature-glitter { 0% { opacity: 0; transform: scale(.18); } 24% { opacity: .95; transform: scale(1); } 58% { opacity: .52; transform: scale(.72); } 100% { opacity: 0; transform: scale(.15); } }
@keyframes signature-glint { 0% { opacity: 0; transform: scale(.2) rotate(0deg); } 26% { opacity: 1; transform: scale(1) rotate(18deg); } 60% { opacity: .62; transform: scale(.7) rotate(32deg); } 100% { opacity: 0; transform: scale(.18) rotate(45deg); } }
@keyframes ink-write { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes signature-finish { to { opacity: 1; } }
@keyframes intro-exit { from { opacity: 1; visibility: visible; } to { opacity: 0; visibility: hidden; } }
@keyframes intro-soft { 0% { opacity: 0; } 35% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
.brand-intro.intro-reduced { display: grid; animation: intro-soft 900ms ease-out both !important; }
.intro-reduced .signature-stroke, .intro-reduced .signature-by { opacity: 1; stroke-dashoffset: 0; animation: none !important; }
.intro-reduced .signature-heart { transform: none; animation: none !important; }
.intro-reduced .signature-sparkles { display: none; }
@media (prefers-reduced-motion: reduce) {
  .intro-playing { display: none; }
}