/* ── Case motion · agencia (ligero, sin deps) ── Reveal al scroll, easing expo, tipografía editorial. Sin nested double-fade; will-change se limpia al terminar. */ :root { --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1); --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1); --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --motion-duration: 0.85s; --motion-distance: 22px; --motion-duration-fast: 0.55s; } /* ── Reveal base ── Solo ocultar con html.js (script inline en ). Sin JS el contenido hardcodeado con .js-reveal no queda invisible. */ html.js .js-reveal { opacity: 0; transform: translate3d(0, var(--motion-distance), 0); transition: opacity var(--motion-duration) var(--ease-out-expo), transform var(--motion-duration) var(--ease-out-expo); transition-delay: var(--reveal-delay, 0ms); } html.js .js-reveal.is-inview { opacity: 1; transform: translate3d(0, 0, 0); } /* Solo mientras anima (JS quita will-change al terminar) */ .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.988); } html.js .js-reveal--scale.is-inview { transform: translate3d(0, 0, 0) scale(1); } /* Stagger */ .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; } /* Decision rail + impact grid · mismo staggered */ .decision-rail.js-reveal-stagger > .decision:nth-child(1), .impact-grid.js-reveal-stagger > .impact-card:nth-child(1) { --reveal-delay: 0ms; } .decision-rail.js-reveal-stagger > .decision:nth-child(2), .impact-grid.js-reveal-stagger > .impact-card:nth-child(2) { --reveal-delay: 90ms; } /* ── Masthead load ── */ .story-masthead .story-brand { transition: opacity 0.65s var(--ease-out-expo), transform 0.65s var(--ease-out-expo); } .story-masthead .story-deck { transition: opacity 0.9s var(--ease-out-expo) 0.1s, transform 0.9s var(--ease-out-expo) 0.1s; } html.js .story-masthead:not(.is-ready) .story-brand, html.js .story-masthead:not(.is-ready) .story-deck { opacity: 0; transform: translate3d(0, 14px, 0); } html.js .story-masthead.is-ready .story-brand, html.js .story-masthead.is-ready .story-deck { opacity: 1; transform: translate3d(0, 0, 0); } /* Hero media · mask reveal + Ken Burns sutil. La imagen se "descubre" de arriba a abajo (clip-path) en vez de flotar con el fade-up genérico. El `round` conserva el radio del frame: sin él las esquinas se cuadran mientras dura la animación. */ html.js .story-media.js-reveal--scale .figure-frame { overflow: hidden; border-radius: inherit; clip-path: inset(0 0 100% 0 round var(--radius-media, 14px)); transition: clip-path 1.15s var(--ease-out-expo); } html.js .story-media.js-reveal--scale.is-inview .figure-frame { clip-path: inset(0 0 0 0 round var(--radius-media, 14px)); } html.js .story-media.js-reveal--scale .figure-frame img { transition: transform 1.5s var(--ease-out-expo); transform: scale(1.035); } html.js .story-media.js-reveal--scale.is-inview .figure-frame img { transform: scale(1); } /* Figuras body · hover solo en proof sueltas (no stages / split) */ .story-body .figure-block:not(.figure-block--b2c-flow) > .figure-frame { transition: transform 0.5s var(--ease-out-soft), box-shadow 0.5s var(--ease-out-soft); } @media (hover: hover) and (pointer: fine) { .story-body .figure-block:not(.figure-block--b2c-flow):not(.figure-block--secondary):hover > .figure-frame { transform: translateY(-2px); box-shadow: 0 16px 44px -20px rgba(16, 16, 18, 0.2); } /* Sin hover lift dentro de stages (el marco ya es la escena) */ .decision__stage .figure-block:hover > .figure-frame, .impact-stage .figure-block:hover > .figure-frame, .split-show .figure-block:hover > .figure-frame { transform: none; box-shadow: none; } } /* Section titles · ritmo editorial */ .story-section h2 { max-width: 18ch; text-wrap: balance; } .story-section h3 { max-width: 28ch; } /* Decision stages · sombra solo en spotlight (board oscuro) */ .decision__stage { box-shadow: none; } .decision__stage--spotlight { box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 24px 56px -28px rgba(0, 0, 0, 0.55); transition: box-shadow 0.45s var(--ease-out-soft); } /* Impact cards · hover + reveal coexisten */ .impact-grid .impact-card.js-reveal { transition: opacity var(--motion-duration) var(--ease-out-expo), transform var(--motion-duration) var(--ease-out-expo), box-shadow 0.35s var(--ease-out-soft), border-color 0.35s var(--ease-out-soft); } .impact-grid .impact-card.js-reveal.is-inview { /* hover transform se aplica encima una vez visible */ } /* Takeaway */ .impact-takeaway { transition: opacity var(--motion-duration) var(--ease-out-expo), transform var(--motion-duration) var(--ease-out-expo); } /* Compact cards */ .decision--compact { transition: opacity var(--motion-duration) var(--ease-out-expo), transform var(--motion-duration) var(--ease-out-expo), border-color 0.3s var(--ease-out-soft), box-shadow 0.3s var(--ease-out-soft); } @media (hover: hover) and (pointer: fine) { .decision--compact:hover { border-color: var(--color-border-strong, #d6d3d1); box-shadow: var(--shadow-rest, 0 1px 2px rgba(16, 16, 18, 0.04)); } } /* Nav */ .case-nav a { transition: color 0.25s ease, transform 0.3s var(--ease-out-soft); } @media (hover: hover) and (pointer: fine) { .case-nav a:hover { transform: translateX(-2px); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { :root { --motion-duration: 0.01ms; --motion-distance: 0px; } .js-reveal, .js-reveal.is-inview, .story-masthead:not(.is-ready) .story-brand, .story-masthead:not(.is-ready) .story-deck, .story-masthead.is-ready .story-brand, .story-masthead.is-ready .story-deck, .story-media.js-reveal--scale .figure-frame img, .story-media.js-reveal--scale.is-inview .figure-frame img { opacity: 1 !important; transform: none !important; transition: none !important; } .story-media.js-reveal--scale .figure-frame, .story-media.js-reveal--scale.is-inview .figure-frame { clip-path: none !important; transition: none !important; } .story-body .figure-block:hover > .figure-frame, .impact-card:hover, .decision--compact:hover { transform: none !important; } }