/* ========================================================== HIJAMA-V3 · ANIMATIONS — Layer 4.5 of 5 Motion patronen: scroll-reveal, counters, pulse, hero-float, cupping-ring, count-up, carousel transitions. Alles respecteert prefers-reduced-motion (tokens → 0ms). ========================================================== */ /* ═══ Scroll reveal ═══════════════════════════════════════ */ /* Fail-safe baseline: content is visible by default. Only when reveal.js has run and confirmed it can observe, gets .js-reveal — THEN the hidden start-state kicks in. If JS never fires (SW cache hiccup, CSP block, parser error) the page still renders fully. No more "white screen" failure mode. */ .js-reveal [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out-expo), transform 700ms var(--ease-out-expo); will-change: transform, opacity; } .js-reveal [data-reveal].is-in { opacity: 1; transform: translateY(0); } /* Stagger — via data-delay 1-6 */ .js-reveal [data-reveal][data-delay='1'] { transition-delay: 80ms; } .js-reveal [data-reveal][data-delay='2'] { transition-delay: 160ms; } .js-reveal [data-reveal][data-delay='3'] { transition-delay: 240ms; } .js-reveal [data-reveal][data-delay='4'] { transition-delay: 320ms; } .js-reveal [data-reveal][data-delay='5'] { transition-delay: 400ms; } .js-reveal [data-reveal][data-delay='6'] { transition-delay: 480ms; } /* Variants */ .js-reveal [data-reveal='left'] { transform: translateX(-24px); } .js-reveal [data-reveal='right'] { transform: translateX(24px); } .js-reveal [data-reveal='left'].is-in, .js-reveal [data-reveal='right'].is-in { transform: translateX(0); } .js-reveal [data-reveal='scale'] { transform: scale(0.96); } .js-reveal [data-reveal='scale'].is-in { transform: scale(1); } @media (prefers-reduced-motion: reduce) { .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } } /* ═══ Hero float (Togo-style subtle) ══════════════════════ */ .hero-float { animation: heroFloat 6s var(--ease-in-out) infinite; } @keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } /* ═══ Cupping pulse (anatomy + hero hotspots) ═════════════ */ .pulse-dot { position: relative; display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--brand); } .pulse-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: var(--brand); animation: cuppingPulse 2.2s var(--ease-out) infinite; } @keyframes cuppingPulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } /* ═══ Sunnah gold shimmer (for gold accents) ══════════════ */ .gold-shimmer { background: linear-gradient( 110deg, var(--c-gold-500) 0%, var(--c-gold-300) 40%, var(--c-gold-500) 60%, var(--c-gold-500) 100% ); background-size: 200% 100%; animation: goldShimmer 3s linear infinite; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @keyframes goldShimmer { from { background-position: -100% 0; } to { background-position: 100% 0; } } /* ═══ Carousel ════════════════════════════════════════════ */ .hd-carousel { position: relative; max-inline-size: 560px; margin-inline: auto; background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-xl); isolation: isolate; } .hd-carousel--wide { max-inline-size: 720px; } .hd-carousel--narrow{ max-inline-size: 440px; } .hd-carousel__viewport { position: relative; inline-size: 100%; aspect-ratio: 4 / 5; /* portrait — past bij iPhone-foto's */ overflow: hidden; } .hd-carousel--landscape .hd-carousel__viewport { aspect-ratio: 3 / 2; } .hd-carousel__track { display: flex; inline-size: 100%; block-size: 100%; transition: transform 600ms var(--ease-out-expo); will-change: transform; } .hd-carousel__slide { flex: 0 0 100%; position: relative; } .hd-carousel__slide img, .hd-carousel__slide video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .hd-carousel__slide video { background: var(--c-ink-900); } .hd-carousel__slide--video::before { content: '▶'; position: absolute; inset-block-start: var(--sp-4); inset-inline-end: var(--sp-4); inline-size: 32px; block-size: 32px; background: rgba(0,0,0,0.55); color: white; border-radius: 50%; display: grid; place-items: center; font-size: 12px; z-index: 2; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* ── Gallery grid (for praktijk-cuijk — non-carousel full view) ── */ .hd-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin-block: var(--sp-5); } .hd-gallery__item { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-md); background: var(--bg-soft); box-shadow: var(--shadow-xs); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); cursor: pointer; } .hd-gallery__item:hover { transform: translateY(-3px) scale(1.02); box-shadow: var(--shadow-md); } .hd-gallery__item img, .hd-gallery__item video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; } .hd-gallery__item--video::after { content: '▶'; position: absolute; inset-block-end: var(--sp-3); inset-inline-end: var(--sp-3); inline-size: 28px; block-size: 28px; background: rgba(0,0,0,0.55); color: white; border-radius: 50%; display: grid; place-items: center; font-size: 10px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .hd-carousel__slide::after { content: ''; position: absolute; inset: auto 0 0 0; block-size: 35%; background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.32) 100%); pointer-events: none; } .hd-carousel__caption { position: absolute; inset: auto 0 0 0; padding: var(--sp-5); color: var(--c-white); font-size: var(--text-sm); font-weight: var(--fw-medium); text-shadow: 0 1px 4px rgba(0,0,0,0.4); z-index: 2; } .hd-carousel__dots { position: absolute; inset-block-end: var(--sp-4); inset-inline-start: 50%; transform: translateX(-50%); display: flex; gap: 6px; padding: 5px 10px; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: var(--r-pill); z-index: 3; } .hd-carousel__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(255,255,255,0.4); transition: background var(--dur-fast), transform var(--dur-fast); } .hd-carousel__dot:hover { background: rgba(255,255,255,0.7); } .hd-carousel__dot[aria-current='true'] { background: var(--c-gold-500); transform: scale(1.35); } .hd-carousel__arrow { position: absolute; inset-block-start: 50%; transform: translateY(-50%); inline-size: 40px; block-size: 40px; display: grid; place-items: center; background: rgba(0,0,0,0.45); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,0.2); color: var(--c-white); border-radius: 50%; opacity: 0; transition: opacity var(--dur-base) var(--ease-out), background var(--dur-fast); z-index: 3; } .hd-carousel:hover .hd-carousel__arrow, .hd-carousel:focus-within .hd-carousel__arrow { opacity: 1; } .hd-carousel__arrow:hover { background: rgba(0,0,0,0.7); } .hd-carousel__arrow--prev { inset-inline-start: var(--sp-4); } .hd-carousel__arrow--next { inset-inline-end: var(--sp-4); } .hd-carousel__arrow svg { inline-size: 20px; block-size: 20px; } @media (max-width: 640px) { .hd-carousel__arrow { display: none; } } @media (prefers-reduced-motion: reduce) { .hd-carousel__track { transition: none; } } /* ═══ Marquee variant ═════════════════════════════════════ */ /* Continuous right→left slide of small portrait frames. Pure CSS animation on a duplicated track for seamless loop. Mask-image fades edges so frames appear/disappear into the void. Responsive: 3 → 2 → 1 per view. Pauses on hover/focus. Scrollable fallback when prefers-reduced-motion. */ .hd-carousel--marquee { --marquee-dur: 55s; --marquee-gap: var(--sp-4); --slide-w: clamp(220px, 26vw, 320px); position: relative; max-inline-size: none; background: transparent; border: 0; box-shadow: none; border-radius: 0; overflow: hidden; isolation: isolate; padding-block: var(--sp-3); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%); } .hd-carousel--marquee .hd-carousel__viewport { aspect-ratio: auto; inline-size: auto; block-size: auto; overflow: visible; } .hd-carousel--marquee .hd-carousel__track { inline-size: max-content; gap: var(--marquee-gap); transform: none; transition: none; animation: hdMarquee var(--marquee-dur) linear infinite; will-change: transform; } .hd-carousel--marquee .hd-carousel__slide { flex: 0 0 var(--slide-w); inline-size: var(--slide-w); aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); isolation: isolate; position: relative; } .hd-carousel--marquee .hd-carousel__slide img, .hd-carousel--marquee .hd-carousel__slide video { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 800ms var(--ease-out); } .hd-carousel--marquee .hd-carousel__slide:hover img, .hd-carousel--marquee .hd-carousel__slide:hover video { transform: scale(1.04); } .hd-carousel--marquee:hover .hd-carousel__track, .hd-carousel--marquee:focus-within .hd-carousel__track { animation-play-state: paused; } /* Kill the legacy bottom gradient + dots/arrows — marquee doesn't use them */ .hd-carousel--marquee .hd-carousel__slide::after { display: none; } .hd-carousel--marquee .hd-carousel__dots, .hd-carousel--marquee .hd-carousel__arrow { display: none !important; } @keyframes hdMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 900px) { .hd-carousel--marquee { --slide-w: clamp(200px, 40vw, 280px); --marquee-dur: 45s; } } @media (max-width: 600px) { .hd-carousel--marquee { --slide-w: clamp(220px, 72vw, 340px); --marquee-dur: 38s; } } /* Reduced motion: freeze the animation and turn it into a native scroller */ @media (prefers-reduced-motion: reduce) { .hd-carousel--marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .hd-carousel--marquee .hd-carousel__track { animation: none; } .hd-carousel--marquee .hd-carousel__slide { scroll-snap-align: start; } } /* Empty state — carousel with no media yet (quantum placeholder) */ .hd-carousel--empty .hd-carousel__viewport { background: repeating-linear-gradient( 135deg, var(--bg-soft) 0 12px, var(--bg-muted) 12px 24px ); display: grid; place-items: center; padding: var(--sp-8); text-align: center; color: var(--text-dim); } .hd-carousel--empty .hd-carousel__empty { max-inline-size: 32ch; } .hd-carousel--empty .hd-carousel__empty h3 { font-family: var(--font-display); color: var(--text); font-size: var(--text-xl); margin-block-end: var(--sp-3); } /* ═══ Anatomy interactive ════════════════════════════════ */ .anatomy-canvas { aspect-ratio: 3 / 4; background: linear-gradient(180deg, var(--bg-muted) 0%, var(--bg-soft) 100%); border-radius: var(--r-xl); padding: var(--sp-8); position: relative; overflow: hidden; } .anatomy-canvas svg { inline-size: 100%; block-size: 100%; } .anatomy-zone { cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); transform-origin: center; transform-box: fill-box; } .anatomy-zone:hover { transform: scale(1.15); } .anatomy-zone circle:first-child { transition: fill var(--dur-fast) var(--ease-out); } .anatomy-zone.is-active circle:first-child { fill: var(--c-gold-500); } .anatomy-zone circle:last-child { animation: anatomyPulse 2.2s var(--ease-out) infinite; transform-origin: center; transform-box: fill-box; } @keyframes anatomyPulse { 0%, 100% { transform: scale(1); opacity: 0.30; } 50% { transform: scale(1.5); opacity: 0; } } /* ═══ Subtle scroll-linked hero parallax ═════════════════ */ .has-parallax { transition: transform 60ms linear; will-change: transform; } @media (prefers-reduced-motion: reduce) { .has-parallax { transform: none !important; } } /* ═══ Sunnah-kalender live widget ════════════════════════ */ .sunnah-widget { display: inline-flex; align-items: center; gap: var(--sp-3); padding: var(--sp-2) var(--sp-4); background: var(--accent-weak); border: 1px solid var(--c-gold-300); border-radius: var(--r-pill); font-size: var(--text-sm); color: var(--c-gold-700); } .sunnah-widget__dot { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--c-gold-500); animation: cuppingPulse 2.2s var(--ease-out) infinite; }