/* ===================================================================== Claudia Halleen — subtiele beweging (enhance-laag) --------------------------------------------------------------------- Puur additief. Alle effecten staan onder de klasse html.enhance, die een klein inline-script in de meteen zet. Zonder JavaScript (geen klasse) blijft de site exact zoals nu: alles direct zichtbaar. Alleen transform + opacity, dus nooit layout-verschuiving. Respecteert prefers-reduced-motion volledig. ===================================================================== */ /* --- Scroll-reveal: verborgen begintoestand (alleen met JS-klasse) --- */ html.enhance .hero-inner > *, html.enhance .vlabel, html.enhance .stats-photo-fig, html.enhance .stat-row, html.enhance .stat, html.enhance .banner-inner > *, html.enhance .grid.grid-2 > *, html.enhance .trio > *, html.enhance .num-item, html.enhance .pullquote, html.enhance .stats-source { opacity: 0; transform: translateY(20px); transition: opacity .85s cubic-bezier(.22,.61,.36,1), transform .85s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; } /* Onthuld */ html.enhance .is-in { opacity: 1 !important; transform: none !important; } /* --- Hero: trage, eenmalige "Ken Burns"-zoom op de achtergrond ------- */ html.enhance .hero-bg { transform-origin: center 45%; animation: chk-kenburns 14s cubic-bezier(.22,.61,.36,1) forwards; } @keyframes chk-kenburns { from { transform: scale(1.07); } to { transform: scale(1); } } /* --- Foto's: heel lichte inzoom bij hover (binnen hun kader) --------- */ html.enhance .figure, html.enhance .stats-photo-fig, html.enhance .cta-img, html.enhance .banner { overflow: hidden; } html.enhance .figure img, html.enhance .stats-photo-fig img, html.enhance .cta-img img { transition: transform .7s cubic-bezier(.22,.61,.36,1); will-change: transform; } @media (hover: hover) { html.enhance .figure:hover img, html.enhance .stats-photo-fig:hover img, html.enhance .cta-img:hover img { transform: scale(1.045); } } /* Uitzondering: vrijstaande illustraties (bv. de gebalanceerde stenen) niet inzoomen, want clippen oogt dan als een afgesneden object. */ html.enhance .figure img[src*="stones"] { transition: none; } @media (hover: hover) { html.enhance .figure:hover img[src*="stones"] { transform: none; } } /* --- Knoppen: subtiele hover-lift (bovenop bestaande kleur-hover) ---- */ html.enhance .btn { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } @media (hover: hover) { html.enhance .btn:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.12); } } /* --- Banner-achtergrond: zachte parallax (transform via JS) ---------- */ html.enhance .banner-bg { will-change: transform; } /* --- Toegankelijkheid: alle beweging uit bij reduced-motion --------- */ @media (prefers-reduced-motion: reduce) { html.enhance .hero-inner > *, html.enhance .vlabel, html.enhance .stats-photo-fig, html.enhance .stat-row, html.enhance .stat, html.enhance .banner-inner > *, html.enhance .grid.grid-2 > *, html.enhance .trio > *, html.enhance .num-item, html.enhance .pullquote, html.enhance .stats-source { opacity: 1 !important; transform: none !important; transition: none !important; } html.enhance .hero-bg { animation: none !important; transform: none !important; } html.enhance .figure img, html.enhance .stats-photo-fig img, html.enhance .cta-img img, html.enhance .btn { transition: none !important; } } /* --- Verticale titels: altijd van onder naar boven lezen ------------- De reveal (.is-in) en reduced-motion zetten transform op none, wat de 180°-rotatie zou wissen (tekst leest dan van boven naar beneden). Deze regel staat bewust als laatste, zodat de rotatie altijd behouden blijft; alleen de opacity-fade blijft over als reveal. */ html.enhance .vlabel, html.enhance .vlabel.is-in, html.enhance .vlabel-left, html.enhance .vlabel-bl { transform: rotate(180deg) !important; }