/* ========================================================== ANIMATIONS — SSL Lingerie & Modas Keyframes CSS + classes de estado para animações. Interações acionadas por JS ficam em scroll.js, svg-draw.js, parallax.js. ========================================================== */ /* -------------------------------------------------------- PRELOADER — aparecimento suave do logo e do nome -------------------------------------------------------- */ @keyframes preloader-aparecer { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* -------------------------------------------------------- MARQUEE — rolagem lateral infinita -------------------------------------------------------- */ @keyframes marquee-rolar { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* -------------------------------------------------------- HERO — pulso sutil na linha de indicação de scroll -------------------------------------------------------- */ @keyframes scroll-pulsa { 0%, 100% { opacity: 0.2; transform: scaleY(0.65); transform-origin: top; } 50% { opacity: 0.55; transform: scaleY(1); transform-origin: top; } } /* -------------------------------------------------------- SCROLL REVEAL Estado inicial oculto aplicado APENAS quando JS está ativo (.js adicionado ao por main.js antes do DOMContentLoaded). Sem JS → conteúdo sempre visível. -------------------------------------------------------- */ /* Transição compartilhada */ .reveal, .reveal-esquerda, .reveal-direita { transition: opacity var(--t-reveal), transform var(--t-reveal); } /* Estado inicial invisível — só com JS */ .js .reveal { opacity: 0; transform: translateY(36px); } .js .reveal-esquerda { opacity: 0; transform: translateX(-38px); } .js .reveal-direita { opacity: 0; transform: translateX(38px); } /* Estado final — visível */ .reveal-visivel, .js .reveal.reveal-visivel, .js .reveal-esquerda.reveal-visivel, .js .reveal-direita.reveal-visivel { opacity: 1; transform: translate(0); } /* Delays escalonados para grids de cards */ .reveal-delay-1 { transition-delay: 0.10s; } .reveal-delay-2 { transition-delay: 0.22s; } .reveal-delay-3 { transition-delay: 0.34s; } .reveal-delay-4 { transition-delay: 0.46s; } /* -------------------------------------------------------- SVG DRAW — linhas douradas stroke-dasharray e stroke-dashoffset gerenciados via inline style em svg-draw.js. Aqui: só a transição. O !important no prefers-reduced-motion sobrescreve o inline style (CSS !important > inline sem !important). -------------------------------------------------------- */ .svg-linha { transition: stroke-dashoffset 2.2s var(--ease-in-out); } /* -------------------------------------------------------- SHINE LABEL — faixa de luz que cruza o label "VISITE A LOJA" e qualquer .contato__label::before -------------------------------------------------------- */ @keyframes shine-label { 0% { left: -50%; } 35% { left: 160%; } 100% { left: 160%; } } /* -------------------------------------------------------- SHIMMER — faixa de luz que varre o hero Ciclo de 10s: SSL primeiro (0→35%), depois lingerie (38→75%). Ornamentos usam animação SMIL diretamente no SVG. -------------------------------------------------------- */ /* SSL (hero): varre primeiro — 0% a 35% do ciclo de 10s */ @keyframes shimmer-ssl { 0% { background-position: 200% center, 0 0; } 35% { background-position: -100% center, 0 0; } 100% { background-position: -100% center, 0 0; } } /* "lingerie & modas" (hero): aguarda SSL terminar, varre 38%→75% */ @keyframes shimmer-script { 0% { background-position: 200% center, 0 0; } 38% { background-position: 200% center, 0 0; } 75% { background-position: -100% center, 0 0; } 100% { background-position: -100% center, 0 0; } } /* -------------------------------------------------------- DRAMA — rotação lenta das formas geométricas (Pausa em prefers-reduced-motion no bloco final) -------------------------------------------------------- */ @keyframes geo-girar { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* -------------------------------------------------------- FASE 4 — Anel animado do logo (disparo único: carga + hover) -------------------------------------------------------- */ /* Estado inicial: arcos ocultos */ .header__logo-ring .anel-glow, .header__logo-ring .anel-meio, .header__logo-ring .anel-nucleo, .header__logo-ring .anel-spark { opacity: 0; stroke-dashoffset: 0; } /* Camadas centralizadas sobre o mesmo trecho do anel. Glow (245u) e Meio (185u) estendem 52u e 22u além do Núcleo (141u) em ambas as extremidades → fade natural nas pontas sem linecap arredondado. Circunferência: 2π × 138 ≈ 867 unidades SVG */ @keyframes anel-glow-fx { 0% { stroke-dashoffset: -100; opacity: 0.32; } 82% { stroke-dashoffset: -790; opacity: 0.22; } 100% { stroke-dashoffset: -942; opacity: 0; } } @keyframes anel-meio-fx { 0% { stroke-dashoffset: -50; opacity: 0.72; } 82% { stroke-dashoffset: -740; opacity: 0.50; } 100% { stroke-dashoffset: -892; opacity: 0; } } @keyframes anel-nucleo-fx { 0% { stroke-dashoffset: 0; opacity: 1.00; } 82% { stroke-dashoffset: -690; opacity: 0.75; } 100% { stroke-dashoffset: -842; opacity: 0; } } /* Spark: ponto branco-puro no centro do arco → sensação de reflexo metálico */ @keyframes anel-spark-fx { 0% { stroke-dashoffset: -59; opacity: 1.00; } 82% { stroke-dashoffset: -749; opacity: 0.85; } 100% { stroke-dashoffset: -901; opacity: 0; } } .header__logo-ring.is-animando .anel-glow { animation: anel-glow-fx 2.5s ease-out forwards; } .header__logo-ring.is-animando .anel-meio { animation: anel-meio-fx 2.5s ease-out forwards; } .header__logo-ring.is-animando .anel-nucleo { animation: anel-nucleo-fx 2.5s ease-out forwards; } .header__logo-ring.is-animando .anel-spark { animation: anel-spark-fx 2.5s ease-out forwards; } /* -------------------------------------------------------- FASE 4 — Brilhos refinados -------------------------------------------------------- */ /* Glow flash — labels dourados ao entrar na viewport */ @keyframes glow-label { 0% { filter: none; } 25% { filter: drop-shadow(0 0 10px rgba(200, 160, 56, 0.68)); } 100% { filter: none; } } .is-glow { animation: glow-label 1.8s ease-out; } /* Brilho pulsante — filete do manifesto (respiração lenta) */ @keyframes pulso-filete { 0%, 100% { opacity: 0.40; } 50% { opacity: 0.88; } } .manifesto__filete { animation: pulso-filete 4s ease-in-out infinite; } /* Brilho pulsante — ornamento do footer (respiração muito lenta) */ @keyframes pulso-footer-ornamento { 0%, 100% { opacity: 0.20; } 50% { opacity: 0.50; } } .footer__ornamento { animation: pulso-footer-ornamento 6s ease-in-out infinite; } /* ============================================================ FASE 6 — Reveal de texto sofisticado ============================================================ */ /* Manifesto: container revela só com transform — sem opacity. Assim as linhas internas animam a própria opacidade sem conflito (opacidade CSS é multiplicativa; se o pai for 0, os filhos somem). */ .js .manifesto__content.reveal { opacity: 1; } /* Linhas iniciam ocultas */ .js .manifesto__linha { opacity: 0; transform: translateY(18px); transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out); } /* Disparo: .linhas-visiveis adicionado via texto-reveal.js (com pequeno delay) */ .js .manifesto__frase.linhas-visiveis .manifesto__linha { opacity: 1; transform: translateY(0); transition-delay: calc(var(--i, 0) * 0.24s); } /* --- Títulos: palavra por palavra --- */ @keyframes palavra-emerge { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes em-fade { from { opacity: 0; } to { opacity: 1; } } /* Palavras e iniciam invisíveis */ .js .palavra { display: inline-block; opacity: 0; } .js .filosofia__frase em, .js .drama__titulo em, .js .marca__titulo em { opacity: 0; } /* Disparo: palavras surgem em stagger quando .palavras-visiveis é adicionado */ .js .palavras-visiveis .palavra { animation: palavra-emerge 0.50s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 0.055s + 0.10s); } /* surge após as palavras como unidade (delay calculado em JS via --em-delay) */ .js .filosofia__frase.palavras-visiveis em, .js .drama__titulo.palavras-visiveis em, .js .marca__titulo.palavras-visiveis em { animation: em-fade 0.60s var(--ease-out) both; animation-delay: var(--em-delay, 0.35s); } /* ============================================================ PREFERS-REDUCED-MOTION Desativa todas as animações para quem preferir. Os !important nas linhas SVG sobrescrevem inline styles do JS. ============================================================ */ @media (prefers-reduced-motion: reduce) { /* Keyframe animations */ .marquee-faixa__track { animation: none; } .hero__scroll-linha { animation: none; opacity: 0.4; } .preloader__logo, .preloader__marca { animation: none; opacity: 1; } /* Reveal — mostra tudo imediatamente */ .reveal, .reveal-esquerda, .reveal-direita, .js .reveal, .js .reveal-esquerda, .js .reveal-direita { opacity: 1 !important; transform: none !important; transition: none !important; } /* Shimmer hero — remove varredura (-100% esconde a faixa branca) */ .hero__wordmark-ssl, .hero__wordmark-script { animation: none !important; background-position: -100% center, 0 0 !important; } /* Geometria drama — para rotação */ .geo-diamond, .geo-square { animation: none !important; } /* SVG lines — mostra desenhadas imediatamente */ .svg-linha { transition: none !important; stroke-dashoffset: 0 !important; /* sobrescreve o inline style do JS */ stroke-dasharray: none !important; /* restaura linha sólida */ } /* Fase 4 — desativa anel animado do logo */ .header__logo-ring { display: none !important; } /* Fase 4 — desativa glow scroll e pulsantes */ .is-glow { animation: none !important; filter: none !important; } .manifesto__filete { animation: none !important; opacity: 0.6 !important; } .footer__ornamento { animation: none !important; opacity: 0.35 !important; } .universo__card::before, .universo__destaque::before, .contato__btn-whatsapp::before, .contato__label::before { transition: none !important; display: none !important; } /* Fase 6 — mostra texto imediatamente, sem fragmentação */ .js .manifesto__content.reveal { opacity: 1 !important; } .js .manifesto__linha { opacity: 1 !important; transform: none !important; transition: none !important; } .js .manifesto__frase.linhas-visiveis .manifesto__linha { transition-delay: 0s !important; } .js .palavra { opacity: 1 !important; animation: none !important; } .js .filosofia__frase em, .js .drama__titulo em, .js .marca__titulo em { opacity: 1 !important; animation: none !important; } }