/* Volese-inspired motion layer for Le Pain d'Ici. Progressive enhancement: content is VISIBLE by default. Initial hidden states only activate after JavaScript adds the `.motion-enabled` class to . */ :root { --motion-ease: cubic-bezier(.22, 1, .36, 1); --motion-ease-soft: cubic-bezier(.2, .72, .25, 1); --motion-duration: .88s; } /* Default / JS-failure fallback: everything remains visible. */ [data-motion] { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } [data-parallax] { translate: 0 0; } html.motion-enabled [data-motion] { transition-property: opacity, transform, filter, clip-path; transition-duration: var(--motion-duration); transition-timing-function: var(--motion-ease); transition-delay: var(--motion-delay, 0ms); } /* Hero: large editorial entrance, similar to Elementor motion effects. */ html.motion-enabled [data-motion="hero-title"]:not(.is-visible) { opacity: 0; transform: translateY(70px) scale(.985); filter: blur(8px); } html.motion-enabled [data-motion="hero-copy"]:not(.is-visible) { opacity: 0; transform: translateY(28px); filter: blur(3px); } html.motion-enabled [data-motion="hero-media"]:not(.is-visible) { opacity: .15; transform: scale(1.12); filter: brightness(.68) saturate(.88); } html.motion-enabled [data-motion="hero-media"].is-visible { transform: scale(1.035); filter: brightness(1) saturate(1); transition-duration: 1.02s; } /* Section typography. */ html.motion-enabled [data-motion="title-reveal"]:not(.is-visible) { opacity: 0; transform: translateY(46px); filter: blur(4px); } html.motion-enabled [data-motion="fade-up"]:not(.is-visible), html.motion-enabled [data-motion="footer-rise"]:not(.is-visible), html.motion-enabled [data-motion="form-item"]:not(.is-visible), html.motion-enabled [data-motion="counter"]:not(.is-visible) { opacity: 0; transform: translateY(32px); } /* Buttons arrive slightly after copy and retain tactile hover feedback. */ html.motion-enabled [data-motion="button-pop"]:not(.is-visible) { opacity: 0; transform: translateY(20px) scale(.93); } html.motion-enabled [data-motion="button-pop"].is-visible { transition-duration: .82s; } @media (hover:hover) { html.motion-enabled [data-motion="button-pop"].is-visible:hover { transform: translateY(-2px) scale(1.018); } } /* Image mask/reveal effects. */ html.motion-enabled [data-motion="image-reveal-left"]:not(.is-visible) { opacity: .28; clip-path: inset(0 100% 0 0); transform: translateX(-22px) scale(1.07); } html.motion-enabled [data-motion="image-reveal-right"]:not(.is-visible) { opacity: .28; clip-path: inset(0 0 0 100%); transform: translateX(22px) scale(1.07); } html.motion-enabled [data-motion="image-reveal-up"]:not(.is-visible) { opacity: .25; clip-path: inset(100% 0 0 0); transform: translateY(24px) scale(1.055); } html.motion-enabled [data-motion="image-zoom"]:not(.is-visible) { opacity: .2; transform: scale(1.13); filter: brightness(.72); } html.motion-enabled [data-motion^="image-"] { transition-duration: 1.02s; } /* Gallery: staggered tiles with compact zoom. */ html.motion-enabled [data-motion="gallery-tile"]:not(.is-visible) { opacity: 0; transform: translateY(42px) scale(.965); filter: brightness(.8); } html.motion-enabled [data-motion="gallery-tile"].is-visible { transition-duration: 1.05s; } @media (hover:hover) { [data-motion-section="gallery"] img.is-visible { transition: transform .65s var(--motion-ease), filter .45s ease, opacity 1s var(--motion-ease), clip-path 1s var(--motion-ease); } [data-motion-section="gallery"] img.is-visible:hover { transform: scale(1.035); filter: brightness(1.05) saturate(1.04); } } /* Cards and menu rows. */ html.motion-enabled [data-motion="card-rise"]:not(.is-visible) { opacity: 0; transform: translateY(52px) scale(.985); } html.motion-enabled [data-motion="slide-in-row"]:not(.is-visible) { opacity: 0; transform: translateX(-36px); } html.motion-enabled [data-motion="slide-in-row"]:nth-child(even):not(.is-visible) { transform: translateX(36px); } html.motion-enabled [data-motion="portrait-pop"]:not(.is-visible) { opacity: 0; transform: translateY(24px) scale(.86) rotate(-2deg); } @media (hover:hover) { [data-motion-card="true"].is-visible { transition: transform .48s var(--motion-ease), box-shadow .48s ease, opacity .9s var(--motion-ease); } [data-motion-card="true"].is-visible:hover { transform: translateY(-7px); } [data-motion-card="true"] img { transition: transform .72s var(--motion-ease), filter .55s ease; } [data-motion-card="true"]:hover img { transform: scale(1.045); } } /* Parallax is applied with the independent CSS translate property so it does not fight reveal transforms. */ [data-parallax] { translate: 0 var(--lp-parallax-y, 0px); } [data-parallax-bg] { background-position: center calc(50% + var(--lp-parallax-bg-y, 0px)); } /* CTA gets a slight cinematic scale once in view. */ [data-motion-section="cta"] { overflow: hidden; } html.motion-enabled [data-motion-section="cta"] [data-motion="title-reveal"].is-visible { transform: translateY(0) scale(1); } /* Footer is slower and more restrained. */ html.motion-enabled footer [data-motion] { transition-duration: 1.1s; } /* Header entrance. */ html.motion-enabled .lp-site-header { animation: lp-header-drop .9s var(--motion-ease) both; } @keyframes lp-header-drop { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } /* Tiny ambient movement on the WhatsApp CTA after load. */ html.motion-enabled .whatsapp-float { animation: lp-whatsapp-in .85s .75s var(--motion-ease) both; } @keyframes lp-whatsapp-in { from { opacity: 0; transform: translateY(20px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Mobile: retain the feel but reduce travel/blur and disable heavy effects. */ @media (max-width: 1023px) { :root { --motion-duration: .76s; } html.motion-enabled [data-motion="hero-title"]:not(.is-visible) { transform: translateY(38px); filter: blur(3px); } html.motion-enabled [data-motion="hero-copy"]:not(.is-visible) { transform: translateY(18px); filter: none; } html.motion-enabled [data-motion="title-reveal"]:not(.is-visible) { transform: translateY(28px); filter: none; } html.motion-enabled [data-motion="card-rise"]:not(.is-visible), html.motion-enabled [data-motion="gallery-tile"]:not(.is-visible) { transform: translateY(28px) scale(.985); } html.motion-enabled [data-motion="slide-in-row"]:not(.is-visible), html.motion-enabled [data-motion="slide-in-row"]:nth-child(even):not(.is-visible) { transform: translateY(24px); } html.motion-enabled [data-motion="image-reveal-left"]:not(.is-visible), html.motion-enabled [data-motion="image-reveal-right"]:not(.is-visible) { transform: scale(1.035); } [data-parallax] { translate: 0 0 !important; } [data-parallax-bg] { background-position: center center !important; } } /* Accessibility: honor reduced motion and always reveal content. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } [data-motion], html.motion-enabled [data-motion] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: inset(0 0 0 0) !important; transition: none !important; animation: none !important; } [data-parallax] { translate: 0 0 !important; } .lp-site-header, .whatsapp-float { animation: none !important; } } /* Fail-safe: outside the enhancement state nothing is allowed to stay hidden. */ html:not(.motion-enabled) [data-motion] { opacity:1 !important; visibility:visible !important; transform:none; filter:none; clip-path:inset(0 0 0 0); } html:not(.motion-enabled) [data-motion-image] { opacity:1 !important; visibility:visible !important; }