/* ============================================================ Scroll-reveal transitions + hero entrance - Active only when JS added `.reveal-on` to (no-JS = no hiding) - Disabled for users who prefer reduced motion - `.is-visible` is toggled by IntersectionObserver in js/main.js - Reveal animates the `translate` + `opacity` properties, leaving `transform` free for the hover-lift micro-interactions in styles.css. ============================================================ */ @media (prefers-reduced-motion: no-preference) { :root { --reveal-ease: cubic-bezier(0.16, 1, 0.3, 1); --reveal-dur: 0.7s; --reveal-stagger-dur: 0.6s; --hover-dur: 0.28s; } /* ---- Single elements: fade + rise as a unit ---- */ .reveal-on :is( .hero__media, .diferenciais .section-head, .method__intro, .method__accordion, .idiomas h2, .idiomas .lead, .bridge, .modalidades h2, .modalidades .lead, .band-note, .empresas__card, .int-head, .int-video, .int-ideal, .int-origin, .quemsomos h2, .quemsomos__lead, .depoimentos h2, .contact-card ) { opacity: 0; translate: 0 28px; transition: opacity var(--reveal-dur) var(--reveal-ease), translate var(--reveal-dur) var(--reveal-ease), transform var(--hover-dur) var(--reveal-ease), box-shadow var(--hover-dur) var(--reveal-ease); will-change: opacity, translate, transform; } .reveal-on :is( .hero__media, .diferenciais .section-head, .method__intro, .method__accordion, .idiomas h2, .idiomas .lead, .bridge, .modalidades h2, .modalidades .lead, .band-note, .empresas__card, .int-head, .int-video, .int-ideal, .int-origin, .quemsomos h2, .quemsomos__lead, .depoimentos h2, .contact-card ).is-visible { opacity: 1; translate: 0 0; } /* ---- Grids: children cascade in (stagger via --d) ---- */ .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ) > * { opacity: 0; translate: 0 22px; transition: opacity var(--reveal-stagger-dur) var(--reveal-ease) var(--d, 0s), translate var(--reveal-stagger-dur) var(--reveal-ease) var(--d, 0s), transform var(--hover-dur) var(--reveal-ease), box-shadow var(--hover-dur) var(--reveal-ease); will-change: opacity, translate, transform; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > * { opacity: 1; translate: 0 0; } /* Grid stagger steps */ .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(1) { --d: 0s; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(2) { --d: 0.07s; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(3) { --d: 0.14s; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(4) { --d: 0.21s; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(5) { --d: 0.28s; } .reveal-on :is( .feature-grid, .chips, .format-grid, .int-cards, .org-grid, .founders, .offices ).is-visible > *:nth-child(n + 6) { --d: 0.35s; } /* ---- Hero: sequenced entrance on first load ---- */ .reveal-on .hero__content > * { opacity: 0; translate: 0 20px; transition: opacity 0.8s var(--reveal-ease) var(--d, 0s), translate 0.8s var(--reveal-ease) var(--d, 0s); will-change: opacity, translate; } .reveal-on .hero__content.is-visible > * { opacity: 1; translate: 0 0; } .reveal-on .hero__content.is-visible > *:nth-child(1) { --d: 0.05s; } .reveal-on .hero__content.is-visible > *:nth-child(2) { --d: 0.16s; } .reveal-on .hero__content.is-visible > *:nth-child(3) { --d: 0.27s; } .reveal-on .hero__content.is-visible > *:nth-child(4) { --d: 0.38s; } .reveal-on .hero__content.is-visible > *:nth-child(5) { --d: 0.49s; } .reveal-on .hero__content.is-visible > *:nth-child(6) { --d: 0.60s; } /* Hero image drifts in a touch after the text starts */ .reveal-on .hero__media { translate: 0 24px; scale: 1.03; transition: opacity var(--reveal-dur) var(--reveal-ease) 0.2s, translate var(--reveal-dur) var(--reveal-ease) 0.2s, scale var(--reveal-dur) var(--reveal-ease) 0.2s; } .reveal-on .hero__media.is-visible { scale: 1; } } /* ============================================================ Mobile nav overlay — center fade + scale, staggered items. Scoped to mobile so it never hides the desktop nav, and to no-preference so reduced-motion users get the plain fade. ============================================================ */ @media (max-width: 768px) and (prefers-reduced-motion: no-preference) { /* Whole panel grows from center as it fades in */ .nav-menu { transform: scale(0.96); transform-origin: center; transition: opacity 0.3s var(--reveal-ease), transform 0.34s var(--reveal-ease), visibility 0s linear 0.34s; } .site-nav.is-open .nav-menu { transform: scale(1); transition: opacity 0.3s var(--reveal-ease), transform 0.34s var(--reveal-ease), visibility 0s; } /* Each link / CTA / social row rises + fades in, cascading via --d */ .nav-menu .nav-links li, .nav-menu .site-nav__cta, .nav-menu__social { opacity: 0; translate: 0 16px; transition: opacity 0.5s var(--reveal-ease) var(--d, 0s), translate 0.5s var(--reveal-ease) var(--d, 0s); will-change: opacity, translate; } .site-nav.is-open .nav-menu .nav-links li, .site-nav.is-open .nav-menu .site-nav__cta, .site-nav.is-open .nav-menu__social { opacity: 1; translate: 0 0; } /* Stagger steps (only on open; close fades out as a unit) */ .site-nav.is-open .nav-links li:nth-child(1) { --d: 0.08s; } .site-nav.is-open .nav-links li:nth-child(2) { --d: 0.14s; } .site-nav.is-open .nav-links li:nth-child(3) { --d: 0.20s; } .site-nav.is-open .nav-links li:nth-child(4) { --d: 0.26s; } .site-nav.is-open .nav-links li:nth-child(5) { --d: 0.32s; } .site-nav.is-open .nav-links li:nth-child(6) { --d: 0.38s; } .site-nav.is-open .site-nav__cta { --d: 0.44s; } .site-nav.is-open .nav-menu__social { --d: 0.50s; } }