/* ========================================================================== Mapol site — motion layer (progressive enhancement). Adds restrained scroll-reveal, hero stat count-up support, card hover lift, a CTA attention cue, and the home hero trend-line draw. Safety model: - Hidden/reveal states ONLY apply when is present. That class is set by a tiny pre-paint script in each page , and is auto-removed after a timeout if motion.js never initialises — so content can never get permanently stuck hidden. - Everything is disabled under prefers-reduced-motion. js/motion.js adds the .is-in class to reveal elements when they scroll in. ========================================================================== */ /* ---------- 1) Scroll-reveal --------------------------------------------- Structural selectors so elements are hidden the instant they exist (incl. cards injected later by content.js) — no per-element markup, no flash. */ html.motion .section-head, html.motion .grid > .card, html.motion .posts > .post, html.motion .gallery > .tile, html.motion .gallery--scroll > .tile, html.motion .events-list > .event, html.motion .team-grid > .team-card, html.motion .partners-grid > .partner-card, html.motion .maes-branch, html.motion .band-grid > div, html.motion .split > div, html.motion .media-figure, html.motion .cta-band, html.motion .hero-grid > div { opacity: 0; transform: translateY(22px); transition: opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } html.motion .is-in { opacity: 1 !important; transform: none !important; } /* ---------- 2) Card hover lift (service / banner cards) ------------------- */ html.motion .card--banner { transition: transform .22s ease, box-shadow .22s ease, border-color .15s ease; } html.motion .card--banner:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); } /* ---------- 3) CTA band attention cue (fires when scrolled into view) ----- */ html.motion .cta-band { position: relative; overflow: hidden; } html.motion .cta-band > * { position: relative; z-index: 1; } html.motion .cta-band::before { content: ""; position: absolute; top: -50%; left: -75%; width: 50%; height: 200%; z-index: 0; pointer-events: none; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%); transform: skewX(-18deg); } html.motion .cta-band.is-in::before { animation: moCtaSheen 7s ease-in-out 1.2s infinite; } @keyframes moCtaSheen { 0% { left: -75%; } 28% { left: 130%; } 100% { left: 130%; } } html.motion .cta-band.is-in .btn { animation: moCtaPulse 1.9s ease-out .9s 3; } @keyframes moCtaPulse { 0% { box-shadow: 0 0 0 0 rgba(255,255,255,.45); } 70% { box-shadow: 0 0 0 14px rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } } /* ---------- 4) Home hero graphic — trend line draws in, donut stays static (only present on the home page, where the SVG is inlined). ---------------- */ .hero-viz .hero-svg { width: 100%; height: auto; display: block; } html.motion .hero-svg #trendLine { stroke-dasharray: 1150; animation: moDrawLine 3.4s cubic-bezier(.5,.05,.2,1) .5s both; } @keyframes moDrawLine { from { stroke-dashoffset: 1150; } to { stroke-dashoffset: 0; } } html.motion .hero-svg #trendArea { animation: moFadeArea 2s ease-out 2.4s both; } @keyframes moFadeArea { from { opacity: 0; } to { opacity: 1; } } html.motion .hero-svg .spark { animation: moTwinkle 4.5s ease-in-out infinite; } html.motion .hero-svg .spark2 { animation-delay: 1.5s; } html.motion .hero-svg .spark3 { animation-delay: 3s; } @keyframes moTwinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } } /* ---------- 5) Services "journey" graphic — draws in left to right -------- Connector line draws L→R, each stage pops in sequence, arrow appears last. Plays when the graphic scrolls into view (motion.js adds .is-in). --------- */ /* Inline-SVG sizing (the old .graphic-wrap img width:100% rule didn't apply to an ). Keep it full-width like before; min-width is set in styles.css. */ .graphic-wrap .journey-graphic { width: 100%; height: auto; display: block; } html.motion .journey-graphic .jstage { opacity: 0; transform: translateY(10px); } html.motion .journey-graphic #jLine { stroke-dasharray: 760; stroke-dashoffset: 760; } html.motion .journey-graphic #jArrow { opacity: 0; } html.motion .journey-graphic.is-in #jLine { animation: moJourneyLine 1.6s cubic-bezier(.5,.05,.2,1) .1s forwards; } @keyframes moJourneyLine { to { stroke-dashoffset: 0; } } html.motion .journey-graphic.is-in .jstage { animation: moJourneyStage .6s ease-out forwards; animation-delay: calc(.25s + var(--i) * .26s); } @keyframes moJourneyStage { to { opacity: 1; transform: translateY(0); } } html.motion .journey-graphic.is-in #jArrow { animation: moJourneyArrow .5s ease-out 1.6s forwards; } @keyframes moJourneyArrow { to { opacity: 1; } } /* ---------- Reduced motion: show everything, animate nothing -------------- */ @media (prefers-reduced-motion: reduce) { html.motion .section-head, html.motion .grid > .card, html.motion .posts > .post, html.motion .gallery > .tile, html.motion .gallery--scroll > .tile, html.motion .events-list > .event, html.motion .team-grid > .team-card, html.motion .partners-grid > .partner-card, html.motion .maes-branch, html.motion .band-grid > div, html.motion .split > div, html.motion .media-figure, html.motion .cta-band, html.motion .hero-grid > div { opacity: 1 !important; transform: none !important; transition: none !important; } html.motion .card--banner, html.motion .card--banner:hover { transition: none; transform: none; } html.motion .cta-band.is-in::before, html.motion .cta-band.is-in .btn, html.motion .hero-svg #trendLine, html.motion .hero-svg #trendArea, html.motion .hero-svg .spark { animation: none !important; } html.motion .hero-svg #trendLine { stroke-dasharray: none; stroke-dashoffset: 0; } html.motion .journey-graphic .jstage { opacity: 1; transform: none; animation: none !important; } html.motion .journey-graphic #jLine { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; } html.motion .journey-graphic #jArrow { opacity: 1; animation: none !important; } }