/* Hero-elementen (DSC-193 t/m DSC-198) — sectie O. * * Motion-presets voor de showpieces: de cover-zoom bij binnenkomst van * kanaal- en pagina-hero's, de gefaseerde entree van de login-/foutpagina-hero * en de subtiele ambient-float van de duotone-illustratie. Alles valt stil * onder prefers-reduced-motion (en de /design-simulatie [data-motion="reduced"]), * omdat de duren hier bewust buiten de duurtokens vallen. */ /* DSC-193/194 — beeld-zoom bij laden: het coverbeeld komt op scale 1.03 binnen * en zet zich in 600ms rustig neer (ease-out). Alleen op de beeldlaag, binnen * een overflow-hidden hero, zodat de layout nergens verschuift. */ @keyframes ds-hero-zoom { from { transform: scale(1.03); } to { transform: scale(1); } } .hero-zoom { animation: ds-hero-zoom 600ms var(--ease-out-soft) both; will-change: transform; } /* FEEDBACK ronde 9 (R9-5): bij het navigeren tussen kanalen toont Turbo Drive * eerst de gecachte snapshot (preview) en daarna de verse render; elke render is * een nieuwe .hero-zoom-node, dus de inzoom herstartte 2-3x per gecachte load. * Tijdens de preview zet Turbo data-turbo-preview op : dan de animatie * stilzetten (eindstand), zodat de zoom pas — en precies één keer — op de echte * render speelt. */ [data-turbo-preview] .hero-zoom { animation: none; } /* DSC-195/196 — entree-stagger: elk volgend element start 80ms later. * Te combineren met .motion-enter (fade + rise, backwards-fill houdt het * element onzichtbaar tijdens de delay). */ .hero-stagger-1 { animation-delay: 80ms; } .hero-stagger-2 { animation-delay: 160ms; } /* DSC-197 — carrousel: auto-height van de viewport loopt mee op het * paneel-token; de slide-track zelf gebruikt .motion-slide (motion.css). */ .carousel-viewport { transition: min-height var(--duration-panel) var(--ease-out-soft); } /* R3-1 — Home-hero: de edge-to-edge homepage-band. Het coverbeeld komt met een * langzame ken-burns binnen — een nauwelijks merkbare inzoom (scale 1 → 1.06) * die over 22s tot rust komt en dan blijft staan, zodat de band bij binnenkomst * subtiel leeft zonder de layout te verschuiven (op een overflow-hidden band). */ @keyframes ds-home-hero-kenburns { from { transform: scale(1); } to { transform: scale(1.06); } } .home-hero-zoom { transform-origin: center; animation: ds-home-hero-kenburns 22s var(--ease-out-soft) both; will-change: transform; } /* MED-3 (mobile UX-audit): pagina-hero min-hoogte via variabele (ERB zet * --ds-hero-minh); op telefoon begrensd tot 170px zodat topbalk + hero niet te * veel scherm opeten, maar een lager ingestelde hoogte wordt gerespecteerd. */ .ds-hero-minh { min-height: var(--ds-hero-minh); } @media (max-width: 639.98px) { .ds-hero-minh { min-height: min(var(--ds-hero-minh), 170px); } /* MED-4 (beslissing V-7): de home-hero-ken-burns staat op telefoon stil * (batterij/rust); desktop houdt de subtiele inzoom. Reduced-motion dekt de * animatie al globaal af. */ .home-hero-zoom { animation: none; } } /* De begroeting komt met een korte fade-up binnen, net ná de band zelf. */ @keyframes ds-home-hero-enter { from { opacity: 0; transform: translateY(10px); } } .home-hero-enter { animation: ds-home-hero-enter var(--duration-panel) var(--ease-out-soft) 120ms backwards; } /* FEEDBACK ronde 9 (R9-4): de home-hero shine-veeg (R4-2) is verwijderd — die * werkte niet mooi. Alleen de ken-burns-zoom en de fade-up van de begroeting * blijven over. */ @media (prefers-reduced-motion: reduce) { .hero-zoom, .home-hero-zoom, .home-hero-enter { animation: none; } .hero-stagger-1, .hero-stagger-2 { animation-delay: 0ms; } } [data-motion="reduced"] .hero-zoom, [data-motion="reduced"] .home-hero-zoom, [data-motion="reduced"] .home-hero-enter { animation: none; } [data-motion="reduced"] .hero-stagger-1, [data-motion="reduced"] .hero-stagger-2 { animation-delay: 0ms; }