/* ═══════════════════════════════════════════════════════════════════════════ CENTRAL STL — LOADER ANIMATION v5 CRONOLOGIA: 0.0s ──── [Fase 1] Cubo revela (clip-path top→bottom) 3s 3.0s ──── [Fase 2] Bico aparece na base da linha 0.5s 3.0s ──── [Fase 3] Linha revela (clip-path bottom→top) + Bico sobe 3s 6.0s ──── [Fase 4] Estado final fixo 7.0s ──── [Fase 5] Texto aparece 1s 8.0s ──── FIM TÉCNICA-CHAVE: • Cubo e Linha usam clip-path: inset() — revela o FILL original completo em um único movimento direcional, sem ida e volta. • O fill-rule:evenodd herdado do SVG mantém a aparência de wireframe do cubo. • Bico usa SVG (definido no HTML) — confiável em SVG. ═══════════════════════════════════════════════════════════════════════════ */ /* ───────────────────────────────────────────────────────────────────────── VARIÁVEIS — ajuste fino centralizado aqui ───────────────────────────────────────────────────────────────────────── */ :root { /* Fase 1 — cubo */ --p1-delay: 2s; --p1-duration: 3s; /* Fases 2+3 — bico + linha (timings também no HTML como begin/dur) */ --p23-delay: 5s; --p23-duration: 3s; /* Fase 5 — texto */ --p5-delay: 7.5s; --p5-duration: 1s; } /* ═══════════════════════════════════════════════════════════════════════════ PRELOADER — spinner inicial (mín. 2s) antes da animação principal ═══════════════════════════════════════════════════════════════════════════ */ #preloader { position: fixed; inset: 0; z-index: 9999; background: #0d0d0f; display: flex; align-items: center; justify-content: center; transition: opacity 0.45s ease; } #preloader.oculto { opacity: 0; pointer-events: none; } .spinner { width: 54px; height: 54px; border-radius: 50%; border: 4px solid rgba(28, 227, 238, 0.18); border-top-color: #1CE3EE; /* mesma cor da linha do logo */ animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Estado CONGELADO inicial — todas as animações CSS pausadas até o JS adicionar .iniciar no (após o preloader). */ #g-cube, #g-line, #g-text { animation-play-state: paused; } body.iniciar #g-cube, body.iniciar #g-line, body.iniciar #g-text { animation-play-state: running; } /* ───────────────────────────────────────────────────────────────────────── RESET + FUNDO ───────────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { background: #0d0d0f; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* ───────────────────────────────────────────────────────────────────────── CONTAINER ───────────────────────────────────────────────────────────────────────── */ .loader-overlay { display: flex; flex-direction: column; /* logo em cima, frase embaixo */ align-items: center; justify-content: center; width: 100%; min-height: 100vh; } .logo-wrapper { width: min(72vw, 72vh); aspect-ratio: 1 / 1; } .logo-svg { width: 100%; height: 100%; display: block; overflow: visible; } /* ═══════════════════════════════════════════════════════════════════════════ FASE 1 — CUBO WIREFRAME (logo-01) FILL PRESERVADO: fill:#F7F7F7 + fill-rule:evenodd herdado do . O fill-rule:evenodd é o que cria os "buracos" internos do cubo, dando a aparência de wireframe — converter para stroke destruiria isso. ANIMAÇÃO: clip-path inset(0 0 100% 0) → inset(0 0 0 0) Wipe único de CIMA PARA BAIXO em 3 segundos. ═══════════════════════════════════════════════════════════════════════════ */ #g-cube { clip-path: inset(0 0 100% 0); /* nada visível: clipado 100% da base */ animation: cubeReveal var(--p1-duration) cubic-bezier(0.4, 0, 0.2, 1) var(--p1-delay) 1 forwards; } /* Fill correto para os paths do cubo (sem classe .fil0 no HTML embarcado) */ #cube-main, #cube-accent { fill: #F7F7F7; } /* ═══════════════════════════════════════════════════════════════════════════ FASES 2+3 — BICO (logo-02) Controlado 100% por SVG SMIL no HTML ( + ). Este bloco garante apenas o fill correto. A opacidade inicial (0) está como atributo SVG opacity="0" no . ═══════════════════════════════════════════════════════════════════════════ */ #g-nozzle { fill: whitesmoke; } /* ═══════════════════════════════════════════════════════════════════════════ FASE 3 — LINHA AZUL (logo-03) FILL PRESERVADO: fill:#1CE3EE — mantém a forma/espessura original do design. ANIMAÇÃO: clip-path inset(100% 0 0 0) → inset(0 0 0 0) Wipe único de BAIXO PARA CIMA em sincronia com o bico. COMO FUNCIONA O INSET DE BAIXO→CIMA: • inset(100% 0 0 0) = clipa 100% do TOPO → nada visível • inset(50% 0 0 0) = clipa 50% do topo → metade inferior visível • inset(0 0 0 0) = sem clip → tudo visível A borda visível cresce a partir do FUNDO da shape. Movimento único. ✓ ═══════════════════════════════════════════════════════════════════════════ */ #g-line { clip-path: inset(100% 0 0 0); /* nada visível no estado inicial */ animation: lineReveal var(--p23-duration) linear /* timing LINEAR — os keyframes já embutem a curva real do path */ var(--p23-delay) 1 forwards; } #blue-line { fill: #1CE3EE; } /* ═══════════════════════════════════════════════════════════════════════════ FASE 5 — TEXTO (logo-04) ═══════════════════════════════════════════════════════════════════════════ */ #g-text { opacity: 0; animation: textReveal var(--p5-duration) ease-out var(--p5-delay) 1 forwards; } /* ═══════════════════════════════════════════════════════════════════════════ @KEYFRAMES ═══════════════════════════════════════════════════════════════════════════ */ /* ── Fase 1: cubo revela de cima para baixo (wipe único) inset bottom 100%→0% = a base inferior vai aparecendo progressivamente */ @keyframes cubeReveal { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0% 0); } } /* ── Fase 3: linha azul — keyframes sincronizados com a curva REAL do bico ───────────────────────────────────────────────────────────────────────── O path logo-03 tem comprimentos de arco desiguais: • Segs 1-2 (5-13%): dip inicial e retorno, nozzle Y≈2444→2533→2445 • Seg 3 (13-33%): diagonal l465, Y 2445→2182 • Seg 4-5 (33-43%): curvas suaves, Y 2182→2017 • Seg 6 (43-70%): SALTO VERTICAL (~724u), Y 2017→1293 • Segs 7-8 (70-85%): curvas saindo para esquerda, Y 1293→1059 • Segs 9-10 (85-100%):curvas finais, Y 1059→777 inset(X%) = (nozzle_Y − 777) / 1756 × 100 [bounding box: 777…2533] ───────────────────────────────────────────────────────────────────────── Ambos (animateMotion + lineReveal) usam calcMode/timing LINEAR para que os keyframes abaixo mapeiem 1:1 a posição Y real do bico em cada instante. */ @keyframes lineReveal { 0% { clip-path: inset(100% 0 0 0); } /* nada visível — início */ 12% { clip-path: inset(95% 0 0 0); } /* Y≈2444 — após dip inicial */ 32% { clip-path: inset(80% 0 0 0); } /* Y≈2182 — fim do l-diagonal */ 42% { clip-path: inset(71% 0 0 0); } /* Y≈2017 — antes do salto */ 69% { clip-path: inset(29% 0 0 0); } /* Y≈1293 — após salto grande */ 79% { clip-path: inset(21% 0 0 0); } /* Y≈1144 */ 84% { clip-path: inset(16% 0 0 0); } /* Y≈1059 */ 94% { clip-path: inset(4% 0 0 0); } /* Y≈ 842 */ 100% { clip-path: inset(0% 0 0 0); } /* Y≈ 777 — topo, tudo visível*/ } /* ── Fase 5: texto emerge com fade suave */ @keyframes textReveal { from { opacity: 0; } to { opacity: 1; } } /* ═══════════════════════════════════════════════════════════════════════════ FASE 6 — FRASE DE CHAMADA (digitação letra a letra) Fonte Arial (universal), cor #02E5FC. O conteúdo é digitado por JS; aqui ficam estilo, posicionamento e o caret piscante. ═══════════════════════════════════════════════════════════════════════════ */ .tagline-wrap { /*margin-top: -2vh; aproxima a frase do logo */ margin-top: 10px; display: flex; align-items: center; justify-content: center; white-space: nowrap; opacity: 0; /* oculta até o JS liberar */ transition: opacity 0.3s ease-out; } /* JS adiciona .visivel no instante de início da digitação */ .tagline-wrap.visivel { opacity: 1; } .tagline { font-family: Arial, Helvetica, sans-serif; color: #02E5FC; font-size: clamp(0.95rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: 0.02em; } /* Caret de digitação — barra fina ciano que pisca */ .caret { display: inline-block; width: 0.08em; height: 1.1em; margin-left: 0.06em; background: #02E5FC; transform: translateY(0.12em); /* alinha base com o texto */ animation: caretBlink 0.7s step-end infinite; } /* Após terminar a digitação o caret apenas continua piscando no lugar */ .caret.parado { animation: caretBlink 0.9s step-end infinite; } @keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }