.brand-intro { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; overflow: hidden; padding: 24px; color: #f8f7ff; background: radial-gradient(ellipse at 50% 42%, rgba(31, 65, 131, .28), transparent 48%), linear-gradient(135deg, #050519, #07071d 58%, #08142a); opacity: 1; visibility: visible; transition: opacity .62s ease, visibility .62s ease; }
.brand-intro::before, .brand-intro::after { position: absolute; inset: 0; content: ""; pointer-events: none; }
.brand-intro::before { opacity: .32; background-image: radial-gradient(1px 1px at 28px 42px, rgba(230, 244, 255, .8) 99%, transparent), radial-gradient(1px 1px at 143px 92px, rgba(130, 183, 255, .75) 99%, transparent), radial-gradient(1.5px 1.5px at 238px 38px, rgba(220, 220, 255, .8) 99%, transparent); background-size: 370px 190px; }
.brand-intro::after { inset: 50% auto auto 50%; width: min(680px, 115vw); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(41, 94, 255, .1), rgba(147, 37, 248, .055) 38%, transparent 67%); filter: blur(20px); }
.brand-intro.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.brand-intro-content { position: relative; z-index: 1; display: flex; width: min(100%, 540px); flex-direction: column; align-items: center; text-align: center; }
.brand-intro-eye { display: block; width: clamp(230px, 42vw, 350px); height: auto; filter: drop-shadow(0 0 18px rgba(24, 147, 255, .34)); transform-origin: center; animation: brand-intro-blink .58s ease-in-out .72s 1 both; }
.brand-intro-title { min-height: 1.25em; margin: 13px 0 0; font: 700 clamp(30px, 7.4vw, 56px)/1.2 Orbitron, Poppins, sans-serif; letter-spacing: -.06em; filter: drop-shadow(0 0 13px rgba(54, 134, 255, .18)); }
.brand-intro-nokku { color: transparent; background: linear-gradient(180deg, #fff 8%, #e0e9f8 56%, #9eaec9 100%); background-clip: text; -webkit-background-clip: text; }
.brand-intro-ai { color: transparent; background: linear-gradient(180deg, #c8ffff, #24d9ff 58%, #3694ff); background-clip: text; -webkit-background-clip: text; }
.brand-intro-tamil { min-height: 1.55em; margin: 7px 0 0; color: #d9eaff; font: 500 clamp(19px, 4.4vw, 27px)/1.5 "Noto Sans Tamil", Poppins, sans-serif; text-shadow: 0 0 16px rgba(50, 170, 255, .24); }
.brand-intro-caret { display: inline-block; width: 2px; height: .85em; margin-left: 3px; vertical-align: -.03em; background: #50dcff; box-shadow: 0 0 10px rgba(80, 220, 255, .75); animation: intro-caret-blink .7s steps(1, end) infinite; }
.brand-intro-dots { display: inline-flex; min-height: 18px; align-items: center; justify-content: center; gap: 8px; margin-top: 13px; }
.brand-intro-dots i { width: 6px; height: 6px; border-radius: 50%; background: #55dfff; opacity: .25; box-shadow: 0 0 0 rgba(65, 210, 255, 0); animation: intro-loading-dot 1s ease-in-out infinite; }
.brand-intro-dots i:nth-child(2) { background: #9d70ff; animation-delay: .16s; }
.brand-intro-dots i:nth-child(3) { background: #df5cff; animation-delay: .32s; }
@keyframes brand-intro-blink { 0%, 28%, 58%, 100% { transform: scaleY(1); } 38%, 48% { transform: scaleY(.09); } }
@keyframes intro-caret-blink { 50% { opacity: 0; } }
@keyframes intro-loading-dot { 0%, 100% { opacity: .25; transform: translateY(0) scale(.75); box-shadow: 0 0 0 rgba(65, 210, 255, 0); } 50% { opacity: 1; transform: translateY(-4px) scale(1.15); box-shadow: 0 0 11px currentColor; } }
@media (max-width: 480px) { .brand-intro { padding: 20px; } .brand-intro-content { width: 100%; } .brand-intro-eye { width: min(78vw, 300px); } .brand-intro-title { margin-top: 12px; letter-spacing: -.055em; } }
@media (prefers-reduced-motion: reduce) { .brand-intro, .brand-intro-eye { transition-duration: .2s; animation-duration: .2s; } .brand-intro-caret, .brand-intro-dots i { animation: none; opacity: .75; } }