/* ═══════════════════════════════════════════════════════════════
   SCENES.CSS — animated illustrations inside image slots
   (partials/slot-scenes.php via sa_slot()). Loaded on every page.
   Palette: --sc-bg / --sc-ink / --sc-hi / --sc-mute per slot tone.
   Base styles are the finished picture; keyframes add the motion,
   so "reduce motion" simply removes the animation.
═══════════════════════════════════════════════════════════════ */
.slot.is-scene{ background:var(--sc-bg); --sc-bg:#000; --sc-ink:#fff; --sc-hi:#F5E500; --sc-onhi:#000; --sc-mute:rgba(255,255,255,.24); --sc-faint:rgba(255,255,255,.1); }
.slot--accent.is-scene{ --sc-bg:#F5E500; --sc-ink:#000; --sc-hi:#000; --sc-onhi:#F5E500; --sc-mute:rgba(0,0,0,.26); --sc-faint:rgba(0,0,0,.1); border-color:#F5E500; }
.slot.is-scene::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--sc-faint) 1px, transparent 1px), linear-gradient(90deg, var(--sc-faint) 1px, transparent 1px);
  background-size:32px 32px; -webkit-mask-image:radial-gradient(ellipse at center, #000 35%, transparent 80%); mask-image:radial-gradient(ellipse at center, #000 35%, transparent 80%); }
.slot-scene{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:22px 24px 56px; }
.sec-split .slot.is-scene{ --slot-ratio:16/10; max-height:none; }
.sc{ position:relative; width:100%; height:100%; max-height:100%; overflow:visible; }
.sc *{ transform-box:fill-box; }
.slot.is-scene .slot-cap{ z-index:2; }

/* primitives */
.sc-box{ fill:none; stroke:var(--sc-mute); stroke-width:1.5; }
.sc-box.sc-strong, .sc-stroke{ stroke:var(--sc-ink); }
.sc-stroke{ fill:none; stroke-width:2; }
.sc-stroke--thick{ stroke-width:4; stroke-linecap:square; }
.sc-faint{ stroke:var(--sc-mute); }
.sc-line{ fill:none; stroke:var(--sc-mute); stroke-width:2; }
.sc-line--thick{ stroke-width:5; }
.sc-line--hi{ stroke:var(--sc-hi); }
.sc-line--ink{ stroke:var(--sc-ink); stroke-opacity:.75; stroke-width:4; }
.sc-dash{ stroke-dasharray:4 6; }
.sc-hi{ fill:var(--sc-hi); }
.sc-ink{ fill:var(--sc-ink); }
.sc-bgfill{ fill:var(--sc-bg); }
.sc-mutefill{ fill:var(--sc-mute); }
.sc-strongfill{ fill:var(--sc-faint); }
.sc-onhi{ fill:none; stroke:var(--sc-onhi); stroke-width:3; }
.sc-onink{ fill:none; stroke:var(--sc-bg); stroke-width:3; }
.sc-t{ font:700 13px/1 Inter, system-ui, sans-serif; letter-spacing:.06em; fill:var(--sc-ink); }
.sc-mute{ fill:var(--sc-mute); }
.sc-big{ font-family:"Space Grotesk", Inter, sans-serif; font-size:26px; }
.sc-q{ font-weight:500; letter-spacing:0; font-size:14px; }
.sc-onhi-t{ fill:var(--sc-onhi); font-size:11px; letter-spacing:.14em; }
.sc-bg-t{ fill:var(--sc-bg); font-size:14px; }
.sc-node{ fill:var(--sc-bg); stroke:var(--sc-ink); stroke-width:2; }
.sc-node--hi{ fill:var(--sc-hi); stroke:none; }
.sc-g{ fill:none; stroke:var(--sc-ink); stroke-width:2; }
.sc-check{ fill:none; stroke:var(--sc-hi); stroke-width:3; }
.sc-icon{ position:absolute; left:50%; top:calc(50% - 4%); transform:translate(-50%, -50%); font-size:clamp(22px, 2.6vw, 34px); color:var(--sc-onhi); pointer-events:none; }

/* motion */
@keyframes sc-blink{ 50%{ opacity:0; } }
@keyframes sc-draw{ 0%{ stroke-dashoffset:100; } 35%, 85%{ stroke-dashoffset:0; } 100%{ stroke-dashoffset:0; opacity:0; } }
@keyframes sc-ripple{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(3.2); opacity:0; } }
@keyframes sc-pulse{ 0%, 100%{ transform:scale(1); } 50%{ transform:scale(1.08); } }
@keyframes sc-spin{ to{ transform:rotate(360deg); } }

.sc-caret{ animation:sc-blink 1s steps(1) infinite; }
.sc-core{ transform-origin:center; animation:sc-pulse 3s ease-in-out infinite; }
.sc-draw{ fill:none; stroke:var(--sc-ink); stroke-width:2; stroke-dasharray:100; animation:sc-draw 6s var(--ease, ease) infinite; animation-delay:calc(var(--i, 0) * .25s); }
.sc-ripple{ fill:none; stroke:var(--sc-hi); stroke-width:2; transform-origin:center; opacity:0; animation:sc-ripple 2.4s ease-out infinite; animation-delay:calc(var(--i, 0) * 1.2s); }

/* rank */
@keyframes sc-climb{ 0%, 8%{ transform:translateY(160px); } 22%{ transform:translateY(120px); } 36%{ transform:translateY(80px); } 50%{ transform:translateY(40px); } 64%, 92%{ transform:translateY(0); } 100%{ transform:translateY(160px); } }
@keyframes sc-badge{ 0%, 62%{ opacity:0; transform:scale(.4); } 68%, 92%{ opacity:1; transform:scale(1); } 100%{ opacity:0; } }
.sc-climb{ animation:sc-climb 7s cubic-bezier(.6,.05,.3,1) infinite; }
.sc-badge{ transform-origin:center; animation:sc-badge 7s ease infinite; }

/* serp */
@keyframes sc-type{ 0%, 5%{ transform:translateX(0); } 40%, 100%{ transform:translateX(250px); } }
@keyframes sc-res{ 0%, 42%{ opacity:0; transform:translateY(10px); } 52%, 94%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.sc-typing{ animation:sc-type 7s steps(26) infinite; }
.sc-caret.sc-typing{ animation:sc-type 7s steps(26) infinite, sc-blink 1s steps(1) infinite; }
.sc-res{ animation:sc-res 7s ease infinite; animation-delay:calc(var(--i) * .25s); }

/* network */
.sc-network .sc-node{ transform-origin:center; animation:sc-pulse 3s ease-in-out infinite; animation-delay:calc(var(--i) * .3s); }

/* map */
@keyframes sc-pin{ 0%, 10%{ transform:translateY(-120px); opacity:0; } 24%{ transform:translateY(6px); opacity:1; } 30%{ transform:translateY(-8px); } 36%, 90%{ transform:none; opacity:1; } 100%{ opacity:0; } }
.sc-pin{ animation:sc-pin 6s cubic-bezier(.5,0,.3,1) infinite; }
.sc-route{ stroke:var(--sc-hi); stroke-width:3; stroke-dasharray:100; }

/* gauge */
@keyframes sc-needle{ 0%, 6%{ transform:rotate(-80deg); } 40%{ transform:rotate(66deg); } 48%{ transform:rotate(48deg); } 56%, 88%{ transform:rotate(56deg); } 100%{ transform:rotate(-80deg); } }
@keyframes sc-chip{ 0%, 45%{ opacity:.25; } 55%, 92%{ opacity:1; } 100%{ opacity:.25; } }
.sc-arc{ fill:none; stroke-width:16; }
.sc-arc--mute{ stroke:var(--sc-mute); } .sc-arc--mute2{ stroke:var(--sc-mute); stroke-opacity:.6; } .sc-arc--hi{ stroke:var(--sc-hi); }
.sc-needle{ transform-box:view-box; transform-origin:200px 200px; transform:rotate(56deg); animation:sc-needle 6s cubic-bezier(.5,0,.2,1) infinite; }
.sc-chips > g{ animation:sc-chip 6s ease infinite; animation-delay:calc(var(--i) * .25s); }

/* bars */
@keyframes sc-bar{ 0%, 4%{ transform:scaleY(0); } 30%, 92%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
@keyframes sc-cursor{ 0%, 40%{ transform:translate(360px, 220px); opacity:0; } 48%{ opacity:1; } 62%, 70%{ transform:translate(312px, 74px); } 66%{ transform:translate(312px, 74px) scale(.85); } 92%{ transform:translate(312px, 74px); opacity:1; } 100%{ opacity:0; } }
@keyframes sc-click{ 0%, 64%{ opacity:0; transform:scale(.4); } 66%{ opacity:1; } 82%, 100%{ opacity:0; transform:scale(2.6); } }
.sc-bar{ transform-origin:bottom; animation:sc-bar 7s cubic-bezier(.3,.7,.2,1) infinite; animation-delay:calc(var(--i) * .12s); }
.sc-trend{ stroke:var(--sc-hi); stroke-width:3; animation-duration:7s; animation-delay:.8s; }
.slot--accent .sc-trend{ stroke:#fff; }
.sc-cursor{ transform-box:view-box; transform:translate(312px, 74px); animation:sc-cursor 7s ease infinite; }
.sc-cursor-p{ stroke:var(--sc-bg); stroke-width:1.5; }
.sc-click{ animation:sc-click 7s ease infinite; }

/* target */
@keyframes sc-arrow{ 0%, 10%{ transform:translateX(-220px); opacity:0; } 16%{ opacity:1; } 34%, 86%{ transform:none; opacity:1; } 96%, 100%{ opacity:0; transform:none; } }
@keyframes sc-hit{ 0%, 33%{ opacity:0; transform:scale(.5); } 35%{ opacity:1; } 60%, 100%{ opacity:0; transform:scale(4); } }
.sc-arrow{ animation:sc-arrow 5s cubic-bezier(.6,0,.2,1) infinite; }
.sc-hit{ animation:sc-hit 5s ease-out infinite; }

/* tree */
@keyframes sc-pop{ 0%, 10%{ opacity:0; transform:scale(.6); } 25%, 92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes sc-leaf{ 0%, 40%{ fill:transparent; } 46%, 60%{ fill:var(--sc-hi); } 70%, 100%{ fill:transparent; } }
.sc-pop{ transform-origin:center; animation:sc-pop 6s ease infinite; animation-delay:calc(var(--i) * .2s); }
.sc-leaf{ fill:transparent; stroke:var(--sc-ink); stroke-width:1.5; animation:sc-leaf 6s ease infinite; animation-delay:calc(var(--i) * .3s); }

/* flow */
@keyframes sc-packet{ 0%{ transform:translateX(60px); } 22%, 28%{ transform:translateX(153px); } 47%, 53%{ transform:translateX(247px); } 72%, 80%{ transform:translateX(340px); } 100%{ transform:translateX(340px); opacity:0; } }
@keyframes sc-fnode{ 0%, 100%{ fill:transparent; } 6%, 20%{ fill:var(--sc-hi); } }
.sc-fnode{ fill:transparent; stroke:var(--sc-ink); stroke-width:2; animation:sc-fnode 6s ease infinite; animation-delay:calc(var(--i) * 1.5s); }
.sc-packet{ transform-box:view-box; transform:translateX(340px); animation:sc-packet 6s cubic-bezier(.6,0,.3,1) infinite; }
.sc-loop{ stroke:var(--sc-mute); }

/* funnel */
@keyframes sc-drop-in{ 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:1; } 70%{ transform:translateY(205px); opacity:1; } 80%, 100%{ transform:translateY(205px); opacity:0; } }
@keyframes sc-drop-out{ 0%{ transform:translateY(0); opacity:0; } 8%{ opacity:1; } 40%{ transform:translateY(80px); opacity:1; } 60%, 100%{ transform:translateY(90px) translateX(40px); opacity:0; } }
.sc-drop{ fill:var(--sc-ink); opacity:0; }
.sc-drop--in{ fill:var(--sc-hi); animation:sc-drop-in 4s ease-in infinite; animation-delay:var(--dl); }
.sc-drop--out{ animation:sc-drop-out 4s ease-in infinite; animation-delay:var(--dl); }
.slot--accent .sc-drop--in{ fill:#fff; stroke:#000; stroke-width:1.5; }

/* mail */
@keyframes sc-inbox{ 0%, 20%{ transform:none; } 34%, 100%{ transform:translateY(44px); } }
@keyframes sc-newmail{ 0%, 24%{ opacity:0; transform:translateY(-20px); } 36%, 92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
@keyframes sc-env{ 0%{ transform:translate(0, 0); opacity:1; } 24%{ transform:translate(-150px, 80px) scale(.6); opacity:0; } 100%{ opacity:0; } }
.sc-inbox{ animation:sc-inbox 6s ease infinite; }
.sc-newmail{ animation:sc-newmail 6s ease infinite; }
.sc-env{ transform-origin:center; animation:sc-env 6s ease-in infinite; }
.sc-dot{ animation:sc-blink 1.2s steps(1) infinite; }

/* type */
@keyframes sc-write{ 0%, 4%{ transform:scaleX(0); } 14%, 92%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
@keyframes sc-mark{ 0%, 62%{ transform:scaleX(0); } 72%, 92%{ transform:scaleX(1); } 100%{ transform:scaleX(0); } }
.sc-write{ transform-origin:left; animation:sc-write 8s ease infinite; animation-delay:calc(var(--i) * .5s); }
.sc-mark{ transform-origin:left; animation:sc-mark 8s ease infinite; }
.slot--accent .sc-mark{ fill:#fff; }

/* calendar */
@keyframes sc-post{ 0%, 5%{ opacity:0; transform:scale(.4); } 12%, 90%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.sc-post{ transform-origin:center; animation:sc-post 7s cubic-bezier(.3,1.4,.5,1) infinite; animation-delay:calc(var(--i) * .35s); }
.sc-post--hi{ fill:var(--sc-hi); } .sc-post--ink{ fill:var(--sc-ink); fill-opacity:.8; }

/* video */
@keyframes sc-progress{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes sc-wave{ 0%, 100%{ transform:scaleY(.25); } 50%{ transform:scaleY(1); } }
.sc-progress{ transform-origin:left; animation:sc-progress 8s linear infinite; }
.sc-wave{ fill:var(--sc-ink); fill-opacity:.7; transform-origin:bottom; animation:sc-wave 1.1s ease-in-out infinite; animation-delay:calc(var(--i) * -.16s); }

/* cart */
@keyframes sc-item{ 0%, 8%{ transform:translateY(-60px); opacity:0; } 22%{ transform:translateY(118px); opacity:1; } 26%{ transform:translateY(108px); } 30%, 90%{ transform:translateY(116px); opacity:1; } 100%{ opacity:0; transform:translateY(116px); } }
@keyframes sc-badgepop{ 0%, 70%{ opacity:0; transform:scale(.3); } 76%, 92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.sc-item{ animation:sc-item 6s cubic-bezier(.5,0,.4,1) infinite; animation-delay:calc(var(--i) * .5s); }
.sc-badgepop{ transform-origin:center; animation:sc-badgepop 6s ease infinite; }

/* ab */
@keyframes sc-race{ 0%, 8%{ transform:scaleY(0); } 55%, 92%{ transform:scaleY(1); } 100%{ transform:scaleY(0); } }
@keyframes sc-win{ 0%, 56%{ opacity:0; transform:scale(.3); } 64%, 92%{ opacity:1; transform:none; } 100%{ opacity:0; } }
.sc-race{ transform-origin:bottom; animation:sc-race 6s cubic-bezier(.3,.8,.3,1) infinite; }
.sc-race--a{ animation-duration:6s; }
.sc-win{ transform-origin:center; animation:sc-win 6s ease infinite; }

/* orbit */
.sc-spin{ transform-box:view-box; transform-origin:200px 150px; animation:sc-spin 26s linear infinite; }
.sc-spin--rev{ animation-duration:18s; animation-direction:reverse; }

/* start only when the slot is on screen (motion.js adds .is-in) */
.js-motion .slot.is-scene:not(.is-in) .sc *, .js-motion .slot.is-scene:not(.is-in) .sc{ animation-play-state:paused; }

@media (prefers-reduced-motion: reduce){
  .sc, .sc *{ animation:none !important; }
  .sc-packet{ transform:translateX(247px); }
  .sc-newmail, .sc-badge, .sc-badgepop, .sc-win, .sc-res, .sc-pin, .sc-item, .sc-post{ opacity:1 !important; }
  .sc-env, .sc-ripple, .sc-click, .sc-hit, .sc-drop{ opacity:0 !important; }
  .sc-typing{ transform:translateX(250px); }
}

/* reveal like the old image slots */
.js-motion .slot.rv > .slot-scene{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s var(--ease, ease); transition-delay:calc(var(--rv-delay, 0ms) + 120ms); }
.js-motion .slot.rv.is-in > .slot-scene{ clip-path:inset(0); }