/* ========================================================================== Crown of Caribbean — motion v1 Two effects, deliberately restrained: 1. Ken Burns drift on the homepage hero (CSS-only, works on mobile) 2. Scroll reveals for section heads, cards, and the photo band (JS-gated) Safety model: - Reveals only engage when motion-v1.js adds `cc-motion` to . No JS, old browser, or reduced-motion preference => nothing is ever hidden; the page renders fully static, exactly as v17. - The base stylesheet's prefers-reduced-motion rule zeroes all animation durations globally; the media query here is a second belt. ========================================================================== */ /* --- 1. Ken Burns hero drift --------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .vhero__media img { animation: cc-kenburns 30s ease-in-out infinite alternate; will-change: transform; } } @keyframes cc-kenburns { from { transform: scale(1); } to { /* 6.5% zoom + a small drift up-right over 30s, then drifts back. Slow enough to feel like air moving, not a slideshow. */ transform: scale(1.065) translate(0.6%, -0.8%); } } /* --- 2. Scroll reveals ---------------------------------------------------- Gated on html.cc-motion, which only the JS applies (and only when the browser supports IntersectionObserver and the user allows motion). */ html.cc-motion .cc-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; transition-delay: var(--ccd, 0ms); } html.cc-motion .cc-reveal.cc-in { opacity: 1; transform: none; } /* Photos in the band rise a touch less — they are heavier objects. */ html.cc-motion .gallery--band .cc-reveal { transform: translateY(12px); } html.cc-motion .gallery--band .cc-reveal.cc-in { transform: none; }