/* ==========================================================================
   spots.css — Kurzgesagt-inspired CHARACTER ILLUSTRATIONS for Act One.

   Bold flat shapes, cute characters with big blinking eyes, one-step shading,
   soft drop shadows, a radial glow behind each scene, and lots of gentle,
   continuous looping life. Colors stay anchored in the warm brand palette
   (teal + gold) with a harmonized coral accent so the vibrancy sits happily on
   the cream page rather than clashing with it.

   Base styles render the final composed art statically (print / reduced-motion
   / no-JS); the loops only run when motion is welcome.
   ========================================================================== */

/* ---- Palette: brand-anchored, with character tints + shades --------------- */
.spot {
  --k-teal:    var(--accent);      /* #13796b */
  --k-teal-lt: #2fa18d;
  --k-teal-dk: #0c5346;
  --k-gold:    var(--accent-2);    /* #b08423 */
  --k-gold-lt: #e2ad3c;
  --k-coral:   #d76b4a;
  --k-coral-dk:#b14e30;
  --k-skin:    #f0d3a4;
  --k-skin-sh: #d8b87e;
  --k-cream:   #fffaf2;
  --k-ink:     #2a201a;
  --k-shadow:  rgba(42, 32, 26, 0.15);

  display: block;
  inline-size: 100%;
  block-size: auto;
}
.spot svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }

/* Semantic paint classes */
.k-teal    { fill: var(--k-teal); }
.k-teal-lt { fill: var(--k-teal-lt); }
.k-teal-dk { fill: var(--k-teal-dk); }
.k-gold    { fill: var(--k-gold); }
.k-gold-lt { fill: var(--k-gold-lt); }
.k-coral   { fill: var(--k-coral); }
.k-coral-dk{ fill: var(--k-coral-dk); }
.k-skin    { fill: var(--k-skin); }
.k-skin-sh { fill: var(--k-skin-sh); }
.k-cream   { fill: var(--k-cream); }
.k-ink     { fill: var(--k-ink); }
.k-shadow  { fill: var(--k-shadow); }
.k-eyewhite{ fill: var(--k-cream); }
.k-pupil   { fill: var(--k-ink); }

.k-cap { stroke-linecap: round; stroke-linejoin: round; }
.k-wire {
  fill: none;
  stroke: var(--k-teal);
  stroke-width: 2.4;
  opacity: 0.5;
  stroke-linecap: round;
}

/* ==========================================================================
   LOOPS — only when motion is welcome.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Character loops consume per-instance clocks stamped by robots.js
     (--bob-dur/--bob-delay, --blink-dur/--blink-delay, --pulse-delay):
     differing periods + mid-cycle starts mean the ensemble drifts and never
     phase-locks. Defaults keep any unstamped art on the original timing.
     All breathing loops share one sine curve (--ease-breathe). */
  html.js .k-bob    { animation: k-bob var(--bob-dur, 4.4s) var(--ease-breathe) infinite; animation-delay: var(--bob-delay, 0s); transform-box: fill-box; }
  html.js .k-bob2   { animation: k-bob var(--bob-dur, 5.6s) var(--ease-breathe) infinite; animation-delay: var(--bob-delay, 0s); transform-box: fill-box; }
  html.js .k-float  { animation: k-float 6s var(--ease-breathe) infinite; transform-box: fill-box; }
  html.js .k-breathe{ animation: k-breathe 5s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center bottom; }
  html.js .k-blink  { animation: k-blink var(--blink-dur, 5.5s) steps(1, end) infinite; animation-delay: var(--blink-delay, 0s); transform-box: fill-box; transform-origin: center; }
  html.js .k-twinkle{ animation: k-twinkle 3s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center; }
  html.js .k-spin   { animation: k-spin 26s linear infinite; transform-box: fill-box; }
  html.js .k-orbit  { animation: k-spin 18s linear infinite; transform-box: fill-box; }
  html.js .k-orbit-rev { animation: k-spin-rev 22s linear infinite; transform-box: fill-box; }
  html.js .k-pulse  { animation: k-pulse 2.8s var(--ease-breathe) infinite; animation-delay: var(--pulse-delay, 0s); transform-box: fill-box; transform-origin: center; }
  html.js .k-rise   { animation: k-rise 4s var(--ease-breathe) infinite; transform-box: fill-box; }
  html.js .k-wire-flow { stroke-dasharray: 3 7; animation: k-wire-flow 1.8s linear infinite; }

  /* garden-specific life */
  html.js .k-sway  { animation: k-sway 4.8s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center bottom; }
  html.js .k-sway2 { animation: k-sway 6.2s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center bottom; }
  html.js .k-flap  { animation: k-flap 0.42s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: right center; }
  html.js .k-flap-l{ animation: k-flap-l 0.42s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: left center; }
  html.js .k-grow  { animation: k-grow 4.6s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center bottom; }
  html.js .k-weed  { animation: k-weed 4.4s var(--ease-breathe) infinite; transform-box: fill-box; }
  html.js .k-sprout{ animation: k-sprout 4.4s var(--ease-breathe) infinite; transform-box: fill-box; transform-origin: center bottom; }
}

@keyframes k-sway  { 0%,100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
@keyframes k-flap  { 0%,100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(-36deg) scaleY(0.85); } }
@keyframes k-flap-l{ 0%,100% { transform: rotate(0deg) scaleY(1); } 50% { transform: rotate(36deg) scaleY(0.85); } }
@keyframes k-grow  { 0%,100% { transform: scaleY(0.96); } 50% { transform: scaleY(1.04); } }
/* mundane: brambles wilt away, tidy sprouts rise, loop */
@keyframes k-weed  { 0%,40% { opacity: 1; transform: scaleY(1); } 60%,100% { opacity: 0.06; transform: scaleY(0.7); } }
@keyframes k-sprout{ 0%,40% { opacity: 0.06; transform: scaleY(0.2); } 60%,100% { opacity: 1; transform: scaleY(1); } }

@keyframes k-bob     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes k-float   { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-8px) rotate(3deg); } }
@keyframes k-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
/* occasional natural blink: eyes open most of the cycle, two quick closes */
@keyframes k-blink {
  0%, 90% { transform: scaleY(1); }
  93%     { transform: scaleY(0.1); }
  96%     { transform: scaleY(1); }
  100%    { transform: scaleY(1); }
}
@keyframes k-twinkle { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.72); opacity: 0.7; } }
@keyframes k-spin     { to { transform: rotate(360deg); } }
@keyframes k-spin-rev { to { transform: rotate(-360deg); } }
@keyframes k-pulse    { 0%,100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes k-rise     { 0% { transform: translateY(6px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-14px); opacity: 0; } }
@keyframes k-wire-flow{ to { stroke-dashoffset: -20; } }

/* ==========================================================================
   PLACEMENT
   ========================================================================== */
#act-one .question .spot {
  margin-block-start: clamp(var(--space-l), 5vh, var(--space-2xl));
  inline-size: clamp(16rem, 36vw, 24rem);
}

/* Spots reveal as a quick fade so the k-pop assembly cascade (robots.css)
   carries the entrance — a slow container fade would mute the first pops. */
html.js .spot[data-reveal="fade"] { transition-duration: var(--dur-1); }

#act-one .hero { position: relative; }
#act-one .hero .spot--hero {
  position: absolute;
  inset-block-start: clamp(6rem, 14vh, 11rem);
  inset-inline-end: var(--gutter);
  inline-size: clamp(17rem, 28vw, 26rem);
  z-index: 0;
}
@media (max-width: 60rem) {
  #act-one .hero .spot--hero { display: none; }
}

#act-one .payoff .spot--payoff {
  margin-block-start: clamp(var(--space-xl), 7vh, var(--space-3xl));
  inline-size: clamp(20rem, 46vw, 34rem);
}

@media (prefers-reduced-motion: reduce) {
  .spot * { animation: none !important; }
}