/* ========================================================================== MOTION DESIGN EDITORIAL & RIGOROSO Regra: O site deve continuar sofisticado mesmo se todas as animações forem removidas. As animações são complementares, discretas e de padrão editorial internacional. ========================================================================== */ :root { --motion-duration-headline: 800ms; --motion-duration-block: 700ms; --motion-duration-line: 850ms; --motion-duration-image: 900ms; --motion-ease: cubic-bezier(0.22, 1, 0.36, 1); --motion-distance: 20px; } /* ========================================================================== PROGRESSIVE ENHANCEMENT: Por padrão, todos os elementos são 100% visíveis e sem transformações. Apenas quando a classe .motion-enhanced estiver ativa no (JS ativo e sem solicitação de movimento reduzido) os estados iniciais de transição operam. ========================================================================== */ /* 1. HEADLINES (Fade + translateY máximo 20px | 600–900ms | cubic-bezier(.22,1,.36,1)) */ .motion-enhanced .motion-headline { opacity: 0; transform: translateY(20px); transition: opacity var(--motion-duration-headline) var(--motion-ease), transform var(--motion-duration-headline) var(--motion-ease); will-change: opacity, transform; } .motion-enhanced .motion-headline.is-visible { opacity: 1; transform: translateY(0); } /* 2. LINHAS HORIZONTAIS (Width / ScaleX 0 → 100% | Origem à esquerda) */ .motion-enhanced .editorial-section-nav__line, .motion-enhanced .motion-line { transform: scaleX(0); transform-origin: left center; transition: transform var(--motion-duration-line) var(--motion-ease); will-change: transform; } .motion-enhanced .editorial-section-nav__line.is-visible, .motion-enhanced .motion-line.is-visible { transform: scaleX(1); } /* 3. IMAGENS (Reveal com overflow hidden + hover scale máximo 1.015) */ .motion-image-reveal { overflow: hidden; position: relative; } .motion-enhanced .motion-image-reveal img { opacity: 0; transform: scale(1.04); transition: opacity var(--motion-duration-image) var(--motion-ease), transform var(--motion-duration-image) var(--motion-ease); will-change: opacity, transform; } .motion-enhanced .motion-image-reveal.is-visible img { opacity: 1; transform: scale(1); } /* Hover extremamente discreto nas imagens: scale máximo 1.015, nada de zoom exagerado */ .portfolio-item__frame img, .motion-image-reveal img, .hero-photo-wrapper img { transition: transform 0.65s var(--motion-ease); } .portfolio-item:hover .portfolio-item__frame img, .motion-image-reveal:hover img, .hero-photo-wrapper:hover img { transform: scale(1.015) !important; } /* 4. CARDS E BLOCOS (Stagger extremamente discreto: 75ms de atraso sequencial) */ .motion-enhanced .motion-block { opacity: 0; transform: translateY(18px); transition: opacity var(--motion-duration-block) var(--motion-ease), transform var(--motion-duration-block) var(--motion-ease); transition-delay: calc(var(--stagger-index, 0) * 75ms); will-change: opacity, transform; } .motion-enhanced .motion-block.is-visible { opacity: 1; transform: translateY(0); } /* 5. LINKS & AÇÕES (Seta deslocando aproximadamente 4px no hover) */ .btn-editorial .arrow, .btn-cta-grand__arrow, .portfolio-item__indicator, .journey-step__arrow, .arrow-shift { display: inline-block; transition: transform 0.28s var(--motion-ease); will-change: transform; } .btn-editorial:hover .arrow, .btn-cta-grand:hover .btn-cta-grand__arrow, .btn-link:hover .arrow-shift, a:hover .arrow-shift { transform: translateX(4px); } /* Microinteração refinada da seta diagonal ↗ do portfólio */ .portfolio-item:hover .portfolio-item__indicator { transform: translate(3px, -3px); } /* 6. HEADER (Transição suave e imperceptível ao scroll) */ .site-header { transition: background-color 0.4s var(--motion-ease), border-color 0.4s var(--motion-ease), backdrop-filter 0.4s var(--motion-ease), -webkit-backdrop-filter 0.4s var(--motion-ease); } /* 7. ROLAGEM CONTÍNUA DA LANDING PAGE (YOYO SUAVE SEM ESPAÇO EM BRANCO) */ @keyframes lpAutoScrollContinuous { 0%, 8% { transform: translateY(0); } 44%, 56% { transform: translateY(var(--scroll-distance, -320px)); } 92%, 100% { transform: translateY(0); } } .lp-scroll-img { animation: lpAutoScrollContinuous 15s cubic-bezier(0.42, 0, 0.58, 1) infinite; } /* ========================================================================== ACESSIBILIDADE: PREFERS-REDUCED-MOTION Se o usuário tiver preferência por redução de movimento ativada no sistema, todas as animações, transições e atrasos são anulados imediatamente. ========================================================================== */ @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; } .motion-enhanced .motion-headline, .motion-enhanced .motion-block, .motion-enhanced .editorial-section-nav__line, .motion-enhanced .motion-line, .motion-enhanced .motion-image-reveal img, .lp-scroll-img { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; animation: none !important; } .portfolio-item:hover .portfolio-item__frame img, .motion-image-reveal:hover img, .hero-photo-wrapper:hover img { transform: none !important; } .btn-editorial:hover .arrow, .btn-cta-grand:hover .btn-cta-grand__arrow, .portfolio-item:hover .portfolio-item__indicator { transform: none !important; } }