/* Splash / intro — alinhado ao visual streetwear da home (preto, branco, tipografia forte) */ /* Quem já viu a animação leva a classe `splash-seen` no via script inline no (fragments/splash-init), antes do body renderizar. Esconder daqui evita o flicker do overlay piscando antes do JS principal removê-lo. */ html.splash-seen .splash-overlay { display: none !important; } html.splash-seen body.splash-active { overflow: auto; } .splash-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 1; visibility: visible; transition: opacity 0.65s ease, visibility 0s linear; } .splash-overlay.splash-overlay--exit { opacity: 0; transform: scale(1.05); pointer-events: none; transition: opacity 0.65s ease, transform 0.65s ease, visibility 0s linear 0.65s; visibility: hidden; } .splash-overlay__bg { position: absolute; inset: 0; background: radial-gradient( ellipse 120% 80% at 50% 40%, #1a1a1a 0%, #000 55%, #000 100% ); z-index: 0; } .splash-overlay__grain { position: absolute; inset: 0; z-index: 1; opacity: 0.18; background-image: url(../public/background/stardust.png); pointer-events: none; } .splash-overlay__content { position: relative; z-index: 2; text-align: center; max-width: 36rem; } .splash-overlay__title { margin: 0 0 1.25rem; font-family: Inter, system-ui, sans-serif; font-weight: 900; font-style: italic; letter-spacing: -0.04em; line-height: 1; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); font-size: clamp(2.75rem, 12vw, 5.5rem); display: flex; flex-wrap: wrap; justify-content: center; gap: 0.02em; } .splash-overlay__letter { display: inline-block; opacity: 0; transform: translateY(0.35em) scale(0.92); animation: splash-letter-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(0.06s * var(--splash-i, 0) + 0.1s); } .splash-overlay__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.75rem 1rem; } .splash-overlay__desc { margin: 0 0 2rem; font-family: "Barlow Condensed", Inter, sans-serif; font-weight: 300; font-size: clamp(0.95rem, 3.5vw, 1.125rem); letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); line-height: 1.5; opacity: 0; transform: translateY(0.5rem) scale(0.98); animation: splash-desc-in 0.85s ease 0.5s forwards; } @keyframes splash-letter-in { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes splash-desc-in { to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes splash-btn-in { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .splash-overlay { transition-duration: 0.25s; } .splash-overlay.splash-overlay--exit { transition-duration: 0.25s; } .splash-overlay__letter { animation: none; opacity: 1; transform: none; } .splash-overlay__desc { animation: none; opacity: 1; transform: none; } .splash-overlay__enter { animation: none; opacity: 1; } } body.splash-active { overflow: hidden; } .splash-overlay__divider { width: 32px; height: 1px; background: rgba(255, 255, 255, 0.25); margin: 18px auto 18px; opacity: 0; animation: splash-desc-in 0.7s ease 0.3s forwards; } .splash-overlay__desc em { font-style: normal; color: #fff; font-weight: 400; } .splash-overlay__badge { margin-top: 28px; display: inline-flex; align-items: center; gap: 8px; opacity: 0; animation: splash-desc-in 0.7s ease 0.7s forwards; } .splash-overlay__badge-line { width: 20px; height: 1px; background: rgba(255, 255, 255, 0.2); display: inline-block; } .splash-overlay__badge-text { font-family: 'Barlow Condensed', monospace; font-size: 10px; letter-spacing: 0.3em; color: rgba(255, 255, 255, 0.18); text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .splash-overlay__divider, .splash-overlay__badge { animation: none; opacity: 1; } }