/* Wondermaths — world atmosphere.
   Ambient particles, scene stir, motion toggle. Every node styled here is
   injected by world-atmosphere.js. No layout, grid or size changes. */

/* Anchor for the injected absolute layers. Desktop keeps its own value,
   stacked layout is forced relative so the gate still clips the layers. */
:is(main.farm-world, main[data-set]) .farm-gate { position: relative !important; }

/* --- ambient particles -------------------------------------------------- */

.world-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;          /* clip particles to the gate */
  pointer-events: none;
  opacity: .86;
  transition: opacity .4s ease;
}

.world-particle {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  transition: filter .3s ease;
  animation: wa-drift 8s ease-in-out infinite;
}

/* fixed places + offsets, same for every theme */
.world-particle:nth-child(1) { left: 11%; top: 66%; animation-delay: 0s; }
.world-particle:nth-child(2) { left: 26%; top: 33%; animation-delay: -1.4s; animation-duration: 7s; }
.world-particle:nth-child(3) { left: 41%; top: 79%; animation-delay: -2.7s; animation-duration: 9s; }
.world-particle:nth-child(4) { left: 55%; top: 21%; animation-delay: -3.9s; animation-duration: 6.5s; }
.world-particle:nth-child(5) { left: 68%; top: 62%; animation-delay: -5.2s; animation-duration: 8.5s; }
.world-particle:nth-child(6) { left: 82%; top: 41%; animation-delay: -6.3s; animation-duration: 7.5s; }
.world-particle:nth-child(7) { left: 92%; top: 73%; animation-delay: -2.1s; animation-duration: 9.5s; }

/* farm (data-set, no data-world-page): pollen */
main[data-set]:not([data-world-page]) .world-particle {
  width: 6px; height: 6px;
  background: #ffe6a8;
  box-shadow: 0 0 8px 2px rgba(255, 214, 120, .45);
  animation-name: wa-drift;
}

/* forest: warm fireflies */
[data-world-page="forest"] .world-particle {
  width: 7px; height: 7px;
  background: #ffdf85;
  box-shadow: 0 0 10px 3px rgba(255, 223, 133, .6);
  animation-name: wa-flicker;
}

/* water: bubbles */
[data-world-page="water"] .world-particle {
  width: 10px; height: 10px;
  background: rgba(255, 255, 255, .12);
  border: 2px solid rgba(190, 236, 255, .8);
  animation-name: wa-rise;
}

/* sky: wisps */
[data-world-page="sky"] .world-particle {
  width: 30px; height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  filter: blur(2px);
  animation-name: wa-glide;
}

/* magic: stars */
[data-world-page="magic"] .world-particle {
  width: 6px; height: 6px;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(214, 170, 255, .8);
  animation-name: wa-twinkle;
}

@keyframes wa-drift {
  0%   { opacity: 0;   transform: translate3d(0, 8px, 0); }
  20%  { opacity: .85; }
  80%  { opacity: .65; }
  100% { opacity: 0;   transform: translate3d(14px, -24px, 0); }
}

@keyframes wa-flicker {
  0%, 100% { opacity: 0;   transform: translate3d(0, 6px, 0) scale(.9); }
  25%      { opacity: .95; transform: translate3d(-4px, -2px, 0) scale(1.15); }
  55%      { opacity: .35; transform: translate3d(3px, -8px, 0) scale(1); }
  80%      { opacity: .85; transform: translate3d(-2px, -13px, 0) scale(1.1); }
}

@keyframes wa-rise {
  0%   { opacity: 0;   transform: translate3d(0, 14px, 0) scale(.8); }
  15%  { opacity: .8; }
  85%  { opacity: .55; }
  100% { opacity: 0;   transform: translate3d(-6px, -36px, 0) scale(1.05); }
}

@keyframes wa-glide {
  0%   { opacity: 0;   transform: translate3d(-16px, 0, 0); }
  25%  { opacity: .55; }
  75%  { opacity: .4; }
  100% { opacity: 0;   transform: translate3d(22px, -6px, 0); }
}

@keyframes wa-twinkle {
  0%, 100% { opacity: 0; transform: rotate(45deg) scale(.7); }
  50%      { opacity: 1; transform: rotate(45deg) scale(1.25); }
}

/* --- scene stir (transparent scene-sized button in the gate) ------------- */

.world-stir {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: transparent;
  font: inherit;
  appearance: none;
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.world-stir:focus-visible {
  outline: 3px solid #ffd86b;
  outline-offset: 2px;
}

/* The scene image never scales, blurs or filters — briefs keep the artwork
   sharp. Stir feedback lives only on the injected atmosphere: a bounded
   layer opacity plus a short brightness/glow lift on the particles. */
.farm-gate[data-stirred="true"] .world-particles { opacity: 1; }

.farm-gate[data-stirred="true"] .world-particle {
  filter: brightness(1.4) saturate(1.12) drop-shadow(0 0 6px rgba(255, 255, 255, .55));
}

[data-world-page="sky"] .farm-gate[data-stirred="true"] .world-particle {
  filter: blur(2px) brightness(1.5) drop-shadow(0 0 6px rgba(255, 255, 255, .5));
}

/* --- motion toggle (44px, above the stir overlay) ------------------------ */

.world-motion-toggle,
:root[data-portal-theme] body .world-motion-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #174A7E !important;
  color: #fff !important;
  text-decoration: none !important;
  font: 600 15px/1 system-ui, sans-serif;
  cursor: pointer;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.world-motion-toggle[aria-pressed="true"],
:root[data-portal-theme] body .world-motion-toggle[aria-pressed="true"] {
  background: #fff !important;
  color: #174A7E !important;
  border-color: #174A7E;
}

.world-motion-toggle:focus-visible,
:root[data-portal-theme] body .world-motion-toggle:focus-visible {
  outline: 3px solid #ffd86b;
  outline-offset: 2px;
}

/* landscape phones: keep clear of the existing right-top scroll widget */
@media (orientation: landscape) and (max-height: 560px) {
  .world-motion-toggle,
  :root[data-portal-theme] body .world-motion-toggle { right: 150px; }
}

/* paused by user, offscreen or modal open */
main[data-running="false"] .world-particle { animation-play-state: paused; }

/* --- jump cards: gentle per-card feedback, transform only ---------------- */

.farm-jump {
  --wa-r: 0deg; --wa-s: 1;
  --wa-fr: 0deg; --wa-fs: 1;
  --wa-ar: 0deg; --wa-as: 1;
}

.farm-jump:nth-child(1) { --wa-r: -2.4deg; --wa-s: 1.05; --wa-fr: 2.4deg; --wa-fs: 1.07; --wa-ar: -1.2deg; --wa-as: .98; }
.farm-jump:nth-child(2) { --wa-r: 2deg;    --wa-s: 1.04; --wa-fr: -2deg;  --wa-fs: 1.06; --wa-ar: 1deg;   --wa-as: .98; }
.farm-jump:nth-child(3) { --wa-r: -1.6deg; --wa-s: 1.06; --wa-fr: 1.6deg; --wa-fs: 1.08; --wa-ar: -0.8deg; --wa-as: .97; }
.farm-jump:nth-child(4) { --wa-r: 2.6deg;  --wa-s: 1.045; --wa-fr: -2.6deg; --wa-fs: 1.065; --wa-ar: 1.3deg; --wa-as: .98; }

.farm-jump-art {
  transform-origin: 50% 60%;
  transition: transform .28s ease;
}

.farm-jump:hover .farm-jump-art {
  transform: rotate(var(--wa-r)) scale(var(--wa-s));
}

.farm-jump:focus-visible .farm-jump-art {
  transform: rotate(var(--wa-fr)) scale(var(--wa-fs));
}

.farm-jump:focus-visible {
  outline: 3px solid #ffd86b;
  outline-offset: 3px;
}

.farm-jump:active .farm-jump-art {
  transform: rotate(var(--wa-ar)) scale(var(--wa-as));
}

/* --- reduced motion: still particles, opacity-only feedback -------------- */

@media (prefers-reduced-motion: reduce) {
  /* explicit user resume only: data-motion="full" restores the drift that the
     global reduced-motion rule flattens. Play-state stays untouched, so a
     paused world (data-running="false") keeps its pause. */
  main[data-motion="full"] .world-particle {
    animation-name: wa-drift !important;
    animation-duration: 8s !important;
    animation-iteration-count: infinite !important;
  }

  main[data-motion="full"][data-world-page="forest"] .world-particle { animation-name: wa-flicker !important; }
  main[data-motion="full"][data-world-page="water"] .world-particle  { animation-name: wa-rise !important; }
  main[data-motion="full"][data-world-page="sky"] .world-particle    { animation-name: wa-glide !important; }
  main[data-motion="full"][data-world-page="magic"] .world-particle  { animation-name: wa-twinkle !important; }

  main:not([data-motion="full"]) .world-particles .world-particle {
    animation-name: none;
    opacity: .55;
    transform: none;
    transition: none;
  }

  /* no img rules: the artwork is never scaled, blurred or filtered */

  main:not([data-motion="full"]) .farm-jump-art {
    transition: opacity .25s ease;
  }

  main:not([data-motion="full"]) .farm-jump:hover .farm-jump-art,
  main:not([data-motion="full"]) .farm-jump:focus-visible .farm-jump-art,
  main:not([data-motion="full"]) .farm-jump:active .farm-jump-art {
    transform: none;
    opacity: .84;
  }
}