/* Opening brand animation; CSS-only so the page always becomes accessible. */
.brand-intro { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; overflow: hidden; background: #fff; pointer-events: none; animation: intro-curtain 3s cubic-bezier(.76,0,.24,1) forwards; }
.brand-intro-center { position: relative; width: min(64vw, 430px); text-align: center; }
.brand-intro-logo { position: relative; overflow: hidden; animation: intro-logo 1.2s cubic-bezier(.16,1,.3,1) both; }
.brand-intro-logo img { display: block; width: 100%; height: auto; }
.brand-intro-logo::after { content: ""; position: absolute; inset: -60% -40%; background: linear-gradient(110deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%); transform: translateX(-100%); animation: intro-shine 1s .5s ease-in-out both; }
.brand-intro-center p { margin: 25px 0 30px; font-size: clamp(11px, 2.5vw, 15px); font-weight: 400; letter-spacing: .22em; color: #303a29; animation: intro-copy .8s .3s both; }
.brand-intro-line { position: relative; display: block; height: 4px; width: min(100%, 240px); margin: auto; background: rgba(0,0,0,.4); border-radius: 2px; isolation: isolate; }
.brand-intro-line::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #83d919, #a2f80f); transform-origin: left; animation: intro-progress 1.65s .25s linear both; }
@keyframes intro-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.brand-intro-glow { position: absolute; width: min(100vw, 800px); aspect-ratio: 1; background: radial-gradient(circle, rgba(162,248,15,.12), transparent 66%); animation: intro-copy 1.5s both; }
@keyframes intro-logo { from { opacity: 0; transform: translateY(18px) scale(.96); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes intro-copy { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes intro-shine { to { transform: translateX(100%); } }
@keyframes intro-curtain { 0%, 70% { clip-path: inset(0); visibility: visible; } 99% { clip-path: inset(0 0 100% 0); visibility: visible; } 100% { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .brand-intro { display: none; } .brand-intro *, .brand-intro *::before, .brand-intro *::after { animation: none; } }
@media print { .brand-intro { display: none; } }