/* candle.css — Brandende LED-kaars, gestuurd door --scroll-progress. * * Verwacht dat `` een `--scroll-progress` (0..1) krijgt van * scroll-progress.js. De kaars heeft zelf geen JS-loop nodig. * * CSS-variabelen op `.mm-candle` die je kunt overschrijven: * --mm-candle-scale : multiplier op alle maten (default 1) * --mm-candle-color : was-kleur (default crème) * --mm-candle-flame : kern-kleur van de vlam (default warm-wit) */ .mm-candle { --mm-candle-scale: 1; --mm-candle-color: #f6efe2; --mm-candle-color-shade: #d8cdb4; --mm-candle-flame: #fff5cf; /* Effectieve burn-progress: clamped + iets vroegere extinguish-curve. --scroll-progress kan ontbreken (no-JS): dan blijft de kaars vol staan. */ --burn: clamp(0, var(--scroll-progress, 0), 1); /* Vlam-intensiteit: vol tot 90%, dan lineair uit tot 100%. */ --flame-on: clamp(0, calc((0.95 - var(--burn)) * 10), 1); position: fixed; bottom: clamp(16px, 4vh, 36px); width: calc(38px * var(--mm-candle-scale)); height: calc(220px * var(--mm-candle-scale)); pointer-events: none; z-index: 50; /* default rechts; positie-keuze via data-attribuut */ right: clamp(16px, 4vw, 40px); } .mm-candle[data-mm-candle-position="left"] { right: auto; left: clamp(16px, 4vw, 40px); } @media (max-width: 600px) { .mm-candle { width: calc(28px * var(--mm-candle-scale)); height: calc(170px * var(--mm-candle-scale)); } } /* ── Glow (achter alles) ───────────────────────────────────────────────── */ .mm-candle-glow { position: absolute; left: 50%; /* Volgt de top van de was zoals die door --burn omhoog "krimpt" */ top: calc(var(--burn) * 100%); width: calc(200px * var(--mm-candle-scale)); height: calc(200px * var(--mm-candle-scale)); transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 198, 110, 0.45) 0%, rgba(255, 156, 60, 0.25) 25%, rgba(255, 120, 40, 0.10) 45%, transparent 70%); filter: blur(6px); opacity: var(--flame-on); animation: mm-candle-glow-pulse 3.4s ease-in-out infinite; will-change: transform, opacity; } /* ── Was — krimpt van bovenaf weg via clip-path ─────────────────────────── */ /* Vaste sokkel-vorm op volle hoogte; clip-path snijdt 'm aan de bovenkant weg op basis van --burn. Vorm blijft intact (geen scale-vervorming). */ .mm-candle-wax, .mm-candle-wax-base { position: absolute; left: 6%; right: 6%; bottom: 0; top: 8%; border-radius: 8px 8px 4px 4px; /* Krimpen door vanaf bovenaf weg te clippen — vorm blijft intact. */ clip-path: inset(calc(var(--burn) * 100%) 0 0 0); } .mm-candle-wax-base { background: linear-gradient(180deg, var(--mm-candle-color-shade) 0%, var(--mm-candle-color) 18%, var(--mm-candle-color) 82%, var(--mm-candle-color-shade) 100%); box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.18), inset 0 3px 6px rgba(255, 255, 255, 0.35); } .mm-candle-wax { /* Bovenste glans + warme aura van de vlam erop */ background: radial-gradient(ellipse at 50% 0%, rgba(255, 198, 110, 0.55) 0%, rgba(255, 198, 110, 0.0) 35%), linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.0) 14%); } /* ── Wiek ──────────────────────────────────────────────────────────────── */ .mm-candle-wick { position: absolute; left: 50%; width: calc(2.5px * var(--mm-candle-scale)); height: calc(11px * var(--mm-candle-scale)); /* Top van de was-rect zit op 8% van het kaars-vlak; daar plakt de wiek. */ top: calc(8% + var(--burn) * 92% - 8px); transform: translateX(-50%); border-radius: 2px; background: linear-gradient(180deg, #1a0d05 0%, #4b2c15 60%, #2a1709 100%); } /* ── Vlam — radial-gradient in een ovaal, met flicker ──────────────────── */ .mm-candle-flame { position: absolute; left: 50%; width: calc(22px * var(--mm-candle-scale)); height: calc(40px * var(--mm-candle-scale)); top: calc(8% + var(--burn) * 92% - 34px); transform: translateX(-50%); transform-origin: 50% 100%; background: radial-gradient(ellipse at 50% 85%, var(--mm-candle-flame) 0%, #ffea9a 15%, #ffb14a 40%, #ff7a1a 65%, rgba(255, 80, 0, 0.0) 82%); border-radius: 50% 50% 36% 36% / 70% 70% 30% 30%; filter: blur(0.4px) saturate(1.05); opacity: var(--flame-on); animation: mm-candle-flame-flicker 1.8s ease-in-out infinite; will-change: transform, opacity, filter; } /* Hete witte kern binnenin */ .mm-candle-flame-inner { position: absolute; left: 50%; width: calc(8px * var(--mm-candle-scale)); height: calc(18px * var(--mm-candle-scale)); top: calc(8% + var(--burn) * 92% - 24px); transform: translateX(-50%); transform-origin: 50% 100%; background: radial-gradient(ellipse at 50% 80%, #ffffff 0%, #fffae0 35%, rgba(255, 250, 224, 0) 70%); border-radius: 50% 50% 30% 30% / 75% 75% 25% 25%; filter: blur(0.5px); opacity: var(--flame-on); animation: mm-candle-flame-flicker 1.4s ease-in-out infinite 0.3s; will-change: transform, opacity; } /* ── Animaties ─────────────────────────────────────────────────────────── */ @keyframes mm-candle-flame-flicker { 0%, 100% { transform: translateX(-50%) scale(1.00, 1.00) skewX( 0deg); } 20% { transform: translateX(-50%) scale(0.95, 1.05) skewX(-2deg); } 40% { transform: translateX(-50%) scale(1.04, 0.96) skewX( 1deg); } 60% { transform: translateX(-50%) scale(0.98, 1.02) skewX( 2deg); } 80% { transform: translateX(-50%) scale(1.02, 0.98) skewX(-1deg); } } @keyframes mm-candle-glow-pulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: var(--flame-on); } 50% { transform: translate(-50%, -50%) scale(0.92); opacity: calc(var(--flame-on) * 0.78); } } /* Respecteer gebruikersvoorkeur: geen flicker, geen pulse. */ @media (prefers-reduced-motion: reduce) { .mm-candle-glow, .mm-candle-flame, .mm-candle-flame-inner { animation: none; } }