/* ── Index motion · agencia ── Hero load + scroll reveals. Sin deps. */ :root { --hm-ease: cubic-bezier(0.19, 1, 0.22, 1); --hm-ease-soft: cubic-bezier(0.22, 1, 0.36, 1); --hm-duration: 0.85s; --hm-distance: 22px; } /* ── Reveal base ── Solo ocultar con html.js (script inline en ). */ html.js .js-reveal { opacity: 0; transform: translate3d(0, var(--hm-distance), 0); transition: opacity var(--hm-duration) var(--hm-ease), transform var(--hm-duration) var(--hm-ease); transition-delay: var(--reveal-delay, 0ms); } html.js .js-reveal.is-inview { opacity: 1; transform: translate3d(0, 0, 0); } .js-reveal.is-animating { will-change: opacity, transform; } html.js .js-reveal--fade { transform: none; } html.js .js-reveal--fade.is-inview { transform: none; } html.js .js-reveal--scale { transform: translate3d(0, 14px, 0) scale(0.985); } html.js .js-reveal--scale.is-inview { transform: translate3d(0, 0, 0) scale(1); } /* Stagger children */ .js-reveal-stagger > .js-reveal:nth-child(1) { --reveal-delay: 0ms; } .js-reveal-stagger > .js-reveal:nth-child(2) { --reveal-delay: 70ms; } .js-reveal-stagger > .js-reveal:nth-child(3) { --reveal-delay: 140ms; } .js-reveal-stagger > .js-reveal:nth-child(4) { --reveal-delay: 210ms; } .js-reveal-stagger > .js-reveal:nth-child(5) { --reveal-delay: 280ms; } .js-reveal-stagger > .js-reveal:nth-child(6) { --reveal-delay: 350ms; } /* ── Hero load (tradicional) ── */ .hero .eyebrow, .hero h1, .hero .subtitle, .hero .hero-ctas, .hero .hero-stage, .hero .hero-stage__float { transition: opacity 0.9s var(--hm-ease), transform 0.9s var(--hm-ease); } html.js .hero:not(.is-ready) .eyebrow, html.js .hero:not(.is-ready) h1, html.js .hero:not(.is-ready) .subtitle, html.js .hero:not(.is-ready) .hero-ctas { opacity: 0; transform: translate3d(0, 18px, 0); } html.js .hero:not(.is-ready) .hero-stage { opacity: 0; transform: translate3d(0, 18px, 0) scale(0.98); } html.js .hero:not(.is-ready) .hero-stage__float--phone { opacity: 0; transform: translate3d(-10px, 14px, 0); } html.js .hero:not(.is-ready) .hero-stage__float--toast { opacity: 0; transform: translate3d(10px, -14px, 0); } .hero.is-ready .eyebrow { opacity: 1; transform: none; transition-delay: 0.05s; } .hero.is-ready h1 { opacity: 1; transform: none; transition-delay: 0.14s; } .hero.is-ready .subtitle { opacity: 1; transform: none; transition-delay: 0.26s; } .hero.is-ready .hero-ctas { opacity: 1; transform: none; transition-delay: 0.38s; } .hero.is-ready .hero-stage { opacity: 1; transform: none; transition-delay: 0.3s; } .hero.is-ready .hero-stage__float--phone { opacity: 1; transform: none; transition-delay: 0.44s; } .hero.is-ready .hero-stage__float--toast { opacity: 1; transform: none; transition-delay: 0.52s; } .hero.is-ready h1 .accent { display: inline-block; animation: hero-accent-in 0.85s var(--hm-ease) 0.42s both; } @keyframes hero-accent-in { from { opacity: 0; transform: scale(0.55); } to { opacity: 1; transform: scale(1); } } /* ── Parallax de capas · hero stage ── Progressive enhancement: solo donde exista scroll-driven animation. Usa la propiedad `translate` (independiente), NO `transform`: la coreografía de carga resetea `transform: none` y anularía el efecto. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .hero-stage__base, .hero-stage__float--phone, .hero-stage__float--toast { animation: hero-parallax linear both; animation-timeline: view(); animation-range: entry 30% exit 100%; } .hero-stage__base { --parallax-shift: -3%; } .hero-stage__float--phone { --parallax-shift: -8%; } .hero-stage__float--toast { --parallax-shift: -14%; } } } @keyframes hero-parallax { from { translate: 0 0; } to { translate: 0 var(--parallax-shift, 0); } } /* ── Bento cells ── */ .bento .cell.js-reveal { transition: opacity var(--hm-duration) var(--hm-ease), transform var(--hm-duration) var(--hm-ease), box-shadow 0.35s var(--hm-ease-soft); } .cell.js-reveal .mock-dash--photo, .cell.js-reveal .mock-stage-img { transition: transform 1.2s var(--hm-ease); transform: scale(1.03); } .cell.js-reveal.is-inview .mock-dash--photo, .cell.js-reveal.is-inview .mock-stage-img { transform: scale(1); } /* ── Cards / stack ── */ .grid-cards.js-reveal-stagger .card-item, .stack-grid.js-reveal-stagger .stack-item { transition: opacity var(--hm-duration) var(--hm-ease), transform var(--hm-duration) var(--hm-ease), box-shadow 0.35s var(--hm-ease-soft), border-color 0.35s var(--hm-ease-soft); } /* Approach icons · entrada + hover suave */ .grid-cards .card-icon { transform-origin: left center; } .grid-cards .card-icon img { display: block; transform: scale(0.88) translateY(8px); opacity: 0; transition: opacity 0.65s var(--hm-ease), transform 0.75s var(--hm-ease); transition-delay: calc(var(--reveal-delay, 0ms) + 120ms); } .grid-cards .card-item.is-inview .card-icon img { opacity: 1; transform: scale(1) translateY(0); } @media (hover: hover) and (pointer: fine) { .grid-cards .card-item.is-inview .card-icon img { transition: opacity 0.65s var(--hm-ease), transform 0.45s var(--hm-ease-soft); } .grid-cards .card-item:hover .card-icon img { transform: scale(1.06) translateY(-2px); } } /* ── CTA / section heads / footer ── */ .cta-panel.js-reveal, .section-head.js-reveal, .site-footer.js-reveal { transition: opacity var(--hm-duration) var(--hm-ease), transform var(--hm-duration) var(--hm-ease); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --hm-duration: 0.01ms; --hm-distance: 0px; } .js-reveal, .js-reveal.is-inview, .hero:not(.is-ready) .eyebrow, .hero:not(.is-ready) h1, .hero:not(.is-ready) .subtitle, .hero:not(.is-ready) .hero-ctas, .hero:not(.is-ready) .hero-stage, .hero:not(.is-ready) .hero-stage__float--phone, .hero:not(.is-ready) .hero-stage__float--toast, .hero.is-ready .eyebrow, .hero.is-ready h1, .hero.is-ready .subtitle, .hero.is-ready .hero-ctas, .hero.is-ready .hero-stage, .hero.is-ready .hero-stage__float--phone, .hero.is-ready .hero-stage__float--toast { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .cell.js-reveal .mock-dash--photo, .cell.js-reveal .mock-stage-img { transform: none !important; transition: none !important; } .grid-cards .card-icon img, .grid-cards .card-item.is-inview .card-icon img, .grid-cards .card-item:hover .card-icon img { opacity: 1 !important; transform: none !important; transition: none !important; } .hero.is-ready h1 .accent { animation: none !important; } }