/* ============================================================ Mzak — Motion Layer Toggled by so we can kill everything from Tweaks / prefers-reduced-motion without touching markup. ============================================================ */ /* ---- Hero entrance (staggered) ---- */ html[data-motion="on"] .hero-eyebrow, html[data-motion="on"] .h-hero, html[data-motion="on"] .hero-sub, html[data-motion="on"] .hero-actions, html[data-motion="on"] .hero-visual{ opacity:0;transform:translateY(28px); animation:mz-rise .95s cubic-bezier(.2,.7,.2,1) forwards; } html[data-motion="on"] .hero-eyebrow{animation-delay:.05s} html[data-motion="on"] .h-hero {animation-delay:.15s} html[data-motion="on"] .hero-sub {animation-delay:.55s} html[data-motion="on"] .hero-actions{animation-delay:.7s} html[data-motion="on"] .hero-visual{ transform:translateY(20px) scale(.985); animation:mz-rise-scale 1.1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay:.25s; } @keyframes mz-rise{to{opacity:1;transform:none}} @keyframes mz-rise-scale{to{opacity:1;transform:none}} /* ---- Kinetic underline mark: sweeps in on load ---- */ html[data-motion="on"] .h-hero em{ background-image:linear-gradient(transparent 68%, rgba(183,155,106,.4) 68%); background-repeat:no-repeat; background-size:0% 100%; animation:mz-mark 1s cubic-bezier(.25,.75,.2,1) forwards; animation-delay:1.05s; } @keyframes mz-mark{to{background-size:100% 100%}} /* ---- Floating hero image ---- */ html[data-motion="on"] .hero-visual .frame img{ animation:mz-float 6.5s ease-in-out infinite; animation-delay:1.5s; } @keyframes mz-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} } /* Pause float on hover for control */ html[data-motion="on"] .hero-visual:hover .frame img{animation-play-state:paused} /* ---- Corner brackets — subtle draw-in ---- */ html[data-motion="on"] .hero-visual .frame::before, html[data-motion="on"] .hero-visual .frame::after{ opacity:0;animation:mz-fade 1.4s ease .9s forwards; } @keyframes mz-fade{to{opacity:1}} /* ---- Meta strip: subtle stagger + gold bar sweep ---- */ html[data-motion="on"] .hero-meta-strip > div{ opacity:0;transform:translateY(14px); animation:mz-rise .8s cubic-bezier(.2,.7,.2,1) forwards; } html[data-motion="on"] .hero-meta-strip > div:nth-child(1){animation-delay:1.15s} html[data-motion="on"] .hero-meta-strip > div:nth-child(2){animation-delay:1.25s} html[data-motion="on"] .hero-meta-strip > div:nth-child(3){animation-delay:1.35s} html[data-motion="on"] .hero-meta-strip > div:nth-child(4){animation-delay:1.45s} html[data-motion="on"] .hero-meta-strip > div::before{ width:0;animation:mz-bar 1s cubic-bezier(.2,.7,.2,1) forwards; } html[data-motion="on"] .hero-meta-strip > div:nth-child(1)::before{animation-delay:1.55s} html[data-motion="on"] .hero-meta-strip > div:nth-child(2)::before{animation-delay:1.65s} html[data-motion="on"] .hero-meta-strip > div:nth-child(3)::before{animation-delay:1.75s} html[data-motion="on"] .hero-meta-strip > div:nth-child(4)::before{animation-delay:1.85s} @keyframes mz-bar{to{width:24px}} /* ---- Scroll-triggered reveals: multiple flavors ---- */ /* Elements with .reveal already fade+rise. Add flavor variants: */ html[data-motion="on"] .reveal-left {transform:translateX(-24px)} html[data-motion="on"] .reveal-right {transform:translateX(24px)} html[data-motion="on"] .reveal-scale {transform:scale(.96)} html[data-motion="on"] .reveal-left.is-in, html[data-motion="on"] .reveal-right.is-in, html[data-motion="on"] .reveal-scale.is-in{transform:none} /* ---- Card hover: lift with slight rotation ---- */ html[data-motion="on"][data-motion-hover="on"] .card, html[data-motion="on"][data-motion-hover="on"] .feature-card{ transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease; } html[data-motion="on"][data-motion-hover="on"] .card:hover{ transform:translateY(-6px); } html[data-motion="on"][data-motion-hover="on"] .feature-card:hover{ transform:translateY(-6px); } html[data-motion="on"][data-motion-hover="on"] .feature-card:hover .thumb img{ transform:scale(1.06); } /* ---- Step dots pulse when in view ---- */ html[data-motion="on"] .step.is-in .dot{ animation:mz-pulse 2.4s ease-out .2s both; } @keyframes mz-pulse{ 0%{box-shadow:0 0 0 0 rgba(15,42,91,.35)} 70%{box-shadow:0 0 0 14px rgba(15,42,91,0)} 100%{box-shadow:0 0 0 0 rgba(15,42,91,0)} } /* ---- Timeline items: sequential ---- */ html[data-motion="on"] .timeline-item{ opacity:0;transform:translateY(18px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } html[data-motion="on"] .timeline.is-in .timeline-item{ opacity:1;transform:none; } html[data-motion="on"] .timeline.is-in .timeline-item:nth-child(1){transition-delay:.05s} html[data-motion="on"] .timeline.is-in .timeline-item:nth-child(2){transition-delay:.15s} html[data-motion="on"] .timeline.is-in .timeline-item:nth-child(3){transition-delay:.25s} html[data-motion="on"] .timeline.is-in .timeline-item:nth-child(4){transition-delay:.35s} html[data-motion="on"] .timeline.is-in .timeline-item:nth-child(5){transition-delay:.45s} /* ---- Section heads: kicker line draws in ---- */ html[data-motion="on"] .kicker::before{ width:0;transition:width .7s cubic-bezier(.2,.7,.2,1) .2s } html[data-motion="on"] .reveal.is-in .kicker::before, html[data-motion="on"] .section-head.is-in .kicker::before{width:24px} /* ---- Reveal easing overrides for motion mode ---- */ html[data-motion="on"] .reveal{ transition:opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); } /* ---- CTA band gold line pulse ---- */ html[data-motion="on"] .cta-band::before{ animation:mz-line-grow 1.4s cubic-bezier(.2,.7,.2,1) forwards; height:0; } @keyframes mz-line-grow{to{height:60px}} /* ---- Buttons: shimmer sweep on hover ---- */ html[data-motion="on"] .btn{position:relative;overflow:hidden} html[data-motion="on"] .btn::after{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent); transform:skewX(-20deg);transition:left .6s ease;pointer-events:none; } html[data-motion="on"] .btn:hover::after{left:130%} /* ---- Intensity variants ---- */ html[data-motion="on"][data-motion-intensity="subtle"] .h-hero, html[data-motion="on"][data-motion-intensity="subtle"] .hero-eyebrow, html[data-motion="on"][data-motion-intensity="subtle"] .hero-sub, html[data-motion="on"][data-motion-intensity="subtle"] .hero-actions{ transform:translateY(14px); animation-duration:.7s; } html[data-motion="on"][data-motion-intensity="subtle"] .hero-visual .frame img{ animation:none; /* no float on subtle */ } html[data-motion="on"][data-motion-intensity="subtle"] .step.is-in .dot{ animation:none; } html[data-motion="on"][data-motion-intensity="bold"] .h-hero, html[data-motion="on"][data-motion-intensity="bold"] .hero-eyebrow, html[data-motion="on"][data-motion-intensity="bold"] .hero-sub, html[data-motion="on"][data-motion-intensity="bold"] .hero-actions{ transform:translateY(44px); animation-duration:1.15s; } html[data-motion="on"][data-motion-intensity="bold"] .hero-visual{ transform:translateY(36px) scale(.96); animation-duration:1.3s; } html[data-motion="on"][data-motion-intensity="bold"] .hero-visual .frame img{ animation:mz-float-bold 5.5s ease-in-out infinite; animation-delay:1.5s; } @keyframes mz-float-bold{ 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-16px) rotate(.4deg)} } html[data-motion="on"][data-motion-intensity="bold"] .reveal{ transform:translateY(40px); } html[data-motion="on"][data-motion-intensity="bold"] .reveal-scale{ transform:scale(.9); } html[data-motion="on"][data-motion-intensity="bold"] .timeline-item{ transform:translateY(30px); } /* Motion off: reset everything to zero-motion, no animation */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{ animation:none !important; transition:none !important; } html[data-motion="off"] .reveal{opacity:1 !important;transform:none !important} html[data-motion="off"] .h-hero em{background-size:100% 100%!important} html[data-motion="off"] .hero-meta-strip > div::before{width:24px!important} /* Respect reduced-motion: mirror motion=off */ @media (prefers-reduced-motion: reduce){ html[data-motion="on"] *, html[data-motion="on"] *::before, html[data-motion="on"] *::after{ animation:none !important; transition:none !important; } html[data-motion="on"] .h-hero em{background-size:100% 100%!important} html[data-motion="on"] .hero-meta-strip > div::before{width:24px!important} }