/* ============================================================ CHICKITO LANDING — Motion pass Alle animaties zijn scoped onder [data-anim-*] attrs op . Toggle aan/uit vanuit Tweaks-panel. ============================================================ */ @media (prefers-reduced-motion: reduce) { html[data-hero-anim] .cl-letter, html[data-hero-anim] .cl-word { animation: none !important; } } /* ============ HERO TITLE — Letter-by-letter reveal ============ */ .cl-letter { display: inline-block; white-space: pre; transform-origin: center bottom; } [data-hero-anim="letters"] .cl-letter { opacity: 0; transform: translateY(0.55em) rotate(-8deg); animation: clLetterIn 0.7s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--ld, 0s); } @keyframes clLetterIn { 0% { opacity: 0; transform: translateY(0.55em) rotate(-8deg); } 55% { opacity: 1; transform: translateY(-0.04em) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } } /* ============ HERO TITLE — Word slide-up stagger ============ */ .cl-word { display: inline-block; } [data-hero-anim="words"] .cl-word { opacity: 0; transform: translateY(0.55em); animation: clWordIn .65s cubic-bezier(.22, 1, .36, 1) forwards; animation-delay: var(--wd, 0s); } @keyframes clWordIn { to { opacity: 1; transform: translateY(0); } } /* ============ HERO TITLE — Rotator (keuken → kassa → cijfers → winst) ============ */ .cl-hero-rotator { display: inline-grid; vertical-align: baseline; font-style: normal; color: var(--accent); } .cl-hero-rotator::after { display: none !important; } .cl-hero-rotator__word { grid-area: 1 / 1; opacity: 0; transform: translateY(0.55em); transition: opacity .35s ease, transform .55s cubic-bezier(.22, 1, .36, 1); white-space: nowrap; } .cl-hero-rotator__word.is-active { opacity: 1; transform: translateY(0); } /* ============ HERO TITLE — Highlight scribble ============ */ [data-hero-anim="highlight"] .hero__title em::after { display: none; } .cl-hero-mark { position: relative; display: inline-block; } .cl-hero-scribble { position: absolute; left: -3%; right: -3%; bottom: -0.08em; width: 106%; height: 0.4em; color: var(--accent); pointer-events: none; overflow: visible; opacity: 0.9; } [data-hero-anim="highlight"] .cl-hero-scribble path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: clScribble 1.3s cubic-bezier(.22, 1, .36, 1) .6s forwards; } @keyframes clScribble { to { stroke-dashoffset: 0; } } /* ============ HERO TITLE — Stamp impact ============ */ [data-hero-anim="stamp"] .cl-hero-stamp { animation: clStamp .8s cubic-bezier(.34, 1.56, .64, 1) backwards; transform-origin: center 35%; } @keyframes clStamp { 0% { opacity: 0; transform: scale(2.4) translateY(-40px); filter: blur(6px); } 55% { opacity: 1; transform: scale(0.92) translateY(8px); filter: blur(0); } 78% { transform: scale(1.04) translateY(-3px); } 100% { transform: scale(1) translateY(0); } } /* ============ CIJFERS — Count-up tabular nums ============ */ .cl-countup { font-variant-numeric: tabular-nums; display: inline-block; } /* ============ CIJFERS — Hairlines die zich tekenen ============ */ [data-anim-hairlines] .cl-stats-ed__primary { position: relative; } [data-anim-hairlines] .cl-stats-ed__primary::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform 1.2s cubic-bezier(.22, 1, .36, 1) .15s; } [data-anim-hairlines] .reveal.in .cl-stats-ed__primary::after { transform: scaleX(1); } [data-anim-hairlines] .cl-stats-ed__cell { position: relative; padding-top: 12px; } [data-anim-hairlines] .cl-stats-ed__cell::before { content: ""; position: absolute; left: 0; top: 0; width: 24px; height: 1.5px; background: var(--accent); transform-origin: left center; transform: scaleX(0); transition: transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: calc(.35s + var(--i, 0) * .07s); opacity: .55; } [data-anim-hairlines] .reveal.in .cl-stats-ed__cell::before { transform: scaleX(1); } /* ============ CIJFERS — Primary stat gradient wipe ============ */ [data-anim-stat-wipe] .cl-stats-ed__big { background: linear-gradient( 100deg, var(--accent) 0%, var(--accent) 45%, color-mix(in oklab, var(--accent) 50%, #fff) 70%, var(--accent) 100% ); background-size: 280% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; transition: background-position 1.6s cubic-bezier(.22, 1, .36, 1) .25s; } [data-anim-stat-wipe] .reveal.in .cl-stats-ed__big { background-position: 0% 0; } /* ============ WERKWIJZE — Step-nummers pop-in ============ */ [data-anim-step-pop] .step .step__num { transition: transform .65s cubic-bezier(.34, 1.56, .64, 1), opacity .35s ease; transform: scale(.4); opacity: 0; } [data-anim-step-pop] .step.reveal.in .step__num, [data-anim-step-pop] .step.in .step__num { transform: scale(1); opacity: 1; } /* ============ WERKWIJZE — Bewegende dot op step-line ============ */ [data-anim-step-dot] .steps__line { overflow: visible; } [data-anim-step-dot] .steps__line::after { content: ""; position: absolute; left: 50%; top: calc(var(--step-progress, 0) * 100%); width: 14px; height: 14px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 22%, transparent), 0 4px 12px color-mix(in oklab, var(--accent) 50%, transparent); transform: translate(-50%, -50%); pointer-events: none; z-index: 3; transition: top .12s linear; } @media (min-width: 1024px) { [data-anim-step-dot] .steps__line::after { display: none; } } /* ============ FAQ — Plus → kruis rotatie ============ */ [data-anim-faq-rotate] .faq__icon { transition: transform .35s cubic-bezier(.22, 1, .36, 1); } [data-anim-faq-rotate] .faq__item.is-open .faq__icon { transform: rotate(135deg); } /* ============ GLOBAL — Smooth scroll ============ */ html[data-anim-smooth] { scroll-behavior: smooth; }