/* Premium Motion Design Framework (Linear / Scale AI Inspired) */ /* Keyframes */ @keyframes fadeUp { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeScale { 0% { opacity: 0; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } } @keyframes pulseStatus { 0% { opacity: 0.5; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0.5; transform: scale(0.95); } } @keyframes heroBreath { 0% { opacity: 0.02; transform: scale(1); } 50% { opacity: 0.05; transform: scale(1.05); } 100% { opacity: 0.02; transform: scale(1); } } @keyframes fadeScaleDropdown { 0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.98); } 100% { opacity: 1; transform: translateX(-50%) translateY(8px) scale(1); } } /* ── O PORTAO no-js ──────────────────────────────────────────────────────── Todo estado de repouso ESCONDIDO desta folha vive atras de `.js`, a classe que `js/core/html.js` poe no quando (e so quando) ha JS e IntersectionObserver. Sem a classe, o repouso e VISIVEL e a pagina le inteira; com ela, a animacao e a de sempre. Nao remova o prefixo `.js` destes blocos: sem ele, um observer que nao roda apaga o site inteiro. */ /* Utilities */ .js .js-observe-fade, .js .reveal-up { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform; } .js-observe-fade.visible, .reveal-up.visible { opacity: 1; transform: translateY(0); } /* Stagger reveals */ .stagger-1 { transition-delay: 100ms; } .stagger-2 { transition-delay: 200ms; } .stagger-3 { transition-delay: 300ms; } .stagger-4 { transition-delay: 400ms; } .stagger-5 { transition-delay: 500ms; } .stagger-6 { transition-delay: 600ms; } /* Internal Card Staggers (when parent is visible) */ .js .js-observe-fade .reveal-internal { opacity: 0; transform: translateY(8px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .js-observe-fade.visible .reveal-internal { opacity: 1; transform: translateY(0); } .js-observe-fade.visible .stagger-child-1 { transition-delay: 300ms; } .js-observe-fade.visible .stagger-child-2 { transition-delay: 400ms; } .js-observe-fade.visible .stagger-child-3 { transition-delay: 500ms; } .js-observe-fade.visible .stagger-child-4 { transition-delay: 600ms; } .js-observe-fade.visible .stagger-child-5 { transition-delay: 700ms; } .js-observe-fade.visible .stagger-child-6 { transition-delay: 800ms; } /* reveal-up children inside js-observe-fade sections */ .js .js-observe-fade .reveal-up { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .js-observe-fade.visible .reveal-up { opacity: 1; transform: translateY(0); } .js-observe-fade.visible .reveal-up.stagger-1 { transition-delay: 100ms; } .js-observe-fade.visible .reveal-up.stagger-2 { transition-delay: 200ms; } .js-observe-fade.visible .reveal-up.stagger-3 { transition-delay: 300ms; } .js-observe-fade.visible .reveal-up.stagger-4 { transition-delay: 400ms; } .js-observe-fade.visible .reveal-up.stagger-5 { transition-delay: 500ms; } .js-observe-fade.visible .reveal-up.stagger-6 { transition-delay: 600ms; } /* SVG Drawing & Bar Growth */ .js .js-draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1) 400ms; } .js-observe-fade.visible .js-draw-path { stroke-dashoffset: 0; } .js .js-draw-ring { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.5s cubic-bezier(0.16, 1, 0.3, 1) 400ms; } .js-observe-fade.visible .js-draw-ring { /* Dynamic offset based on percentage */ } .js .js-grow-bar { transform-origin: bottom center; transform: scaleY(0); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .js-observe-fade.visible .js-grow-bar { transform: scaleY(1); } /* Hero Sequences */ .hero-anim-0 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0ms forwards; opacity: 0; } .hero-anim-1 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 150ms forwards; opacity: 0; } .hero-anim-2 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards; opacity: 0; } .hero-anim-3 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 450ms forwards; opacity: 0; } .hero-anim-4 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 650ms forwards; opacity: 0; } .hero-anim-5 { animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 850ms forwards; opacity: 0; } /* Dashboard Utilities */ .status-pulse { animation: pulseStatus 3s ease-in-out infinite; } .progress-fill { width: 0%; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: 200ms; } .js-observe-fade.visible .progress-fill, .reveal-up.visible .progress-fill, .hero-anim-4 .progress-fill { /* The inline style target width will override this if we use JS, or we can use CSS var */ } /* Background Breath */ .hero-breathing-bg { position: absolute; top: -10%; left: -10%; right: -10%; bottom: -10%; background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.06) 0%, transparent 60%); animation: heroBreath 15s ease-in-out infinite; pointer-events: none; z-index: 0; } /* Accessibility */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* A SAIDA de reduced-motion. Zerar a duracao nao basta: o estado de repouso continuava `opacity: 0` e a visibilidade ainda dependia do observer. Quem pediu menos movimento nao arma a animacao — le a pagina inteira, parada. */ .js .js-observe-fade, .js .reveal-up, .js .js-observe-fade .reveal-up, .js .js-observe-fade .reveal-internal { opacity: 1 !important; transform: none !important; } .js .js-draw-path, .js .js-draw-ring { stroke-dashoffset: 0 !important; } .js .js-grow-bar { transform: scaleY(1) !important; } }