/* Home-hero background layers (registry + presets: inc/hero.php).
   Enqueued only on the front page and only when the preset is not "original" — the original gradient
   lives in main.css and is untouched, so "original" costs nothing and is always one switch away.

   Every layer is decorative (aria-hidden, pointer-events: none) and switched on by a token in
   data-hero-fx="pattern twinkle spotlight breath aurora dust wave bubbles". Only transform/opacity animate.
   Tunables: --fx-strength (0.5–1.5), data-hero-motion="off", prefers-reduced-motion. */

.hero--home[data-hero-fx] { --fx-strength: 1; --hero-fx-ink: 42, 67, 53; --hero-fx-glow: 232, 150, 108; }
html[data-theme="dark"] .hero--home[data-hero-fx] { --hero-fx-ink: 190, 225, 205; --hero-fx-glow: 150, 225, 185; }

.hero__fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__fx > * { display: none; }

/* ============ pattern (+ twinkle) ============ */
.hero__fx-pattern {
  position: absolute; inset: 0;
  -webkit-mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 60%, var(--lc-000000, #000) 100%);
          mask-image: radial-gradient(ellipse 48% 44% at 50% 50%, rgba(0,0,0,.10) 0%, rgba(0,0,0,.45) 60%, var(--lc-000000, #000) 100%);
}
.hero__fx-pattern i {
  position: absolute; inset: -400px; display: block;
  background: rgb(var(--hero-fx-ink));
  opacity: calc(.11 * var(--fx-strength));
  -webkit-mask-image: url("hero-pattern.svg"); mask-image: url("hero-pattern.svg");
  -webkit-mask-size: 400px 400px; mask-size: 400px 400px;
  -webkit-mask-repeat: repeat; mask-repeat: repeat;
  will-change: transform;
  animation: hero-pattern-drift 120s linear infinite;
}
.hero__fx-pattern i.hero__tw { display: none; background: rgb(var(--hero-fx-glow)); }
@keyframes hero-pattern-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(400px, 400px, 0); }   /* exactly one tile → seamless loop */
}
[data-hero-fx~="pattern"] .hero__fx-pattern { display: block; }

/* twinkle: three glow layers (different nodes), same tile + same drift so they sit on the pattern's nodes */
[data-hero-fx~="twinkle"] .hero__fx-pattern i.hero__tw { display: block; opacity: 0; }
.hero__fx-pattern i.hero__tw--a { -webkit-mask-image: url("hero-twinkle-a.svg"); mask-image: url("hero-twinkle-a.svg"); animation: hero-pattern-drift 120s linear infinite, hero-tw-pulse 7s ease-in-out -1s infinite; }
.hero__fx-pattern i.hero__tw--b { -webkit-mask-image: url("hero-twinkle-b.svg"); mask-image: url("hero-twinkle-b.svg"); animation: hero-pattern-drift 120s linear infinite, hero-tw-pulse 9s ease-in-out -4.5s infinite; }
.hero__fx-pattern i.hero__tw--c { -webkit-mask-image: url("hero-twinkle-c.svg"); mask-image: url("hero-twinkle-c.svg"); animation: hero-pattern-drift 120s linear infinite, hero-tw-pulse 11s ease-in-out -8s infinite; }
@keyframes hero-tw-pulse {
  0%, 100% { opacity: 0; }
  35%      { opacity: calc(.95 * var(--fx-strength)); }
  70%      { opacity: 0; }
}

/* ============ spotlight (desktop, needs hero-fx.js) ============
   A brighter copy of the pattern revealed around the cursor. It cannot follow the drifting base pattern,
   so on hover-capable devices the drift stops while spotlight is on (the copy is aligned to the same tile grid). */
.hero__fx-spot {
  position: absolute; inset: 0;
  background: rgb(var(--hero-fx-ink));
  opacity: calc(var(--spot, 0) * .30 * var(--fx-strength));
  transition: opacity .5s ease;
  -webkit-mask-image: radial-gradient(circle 210px at var(--mx, -999px) var(--my, -999px), var(--lc-000000, #000) 0%, transparent 100%), url("hero-pattern.svg");
          mask-image: radial-gradient(circle 210px at var(--mx, -999px) var(--my, -999px), var(--lc-000000, #000) 0%, transparent 100%), url("hero-pattern.svg");
  -webkit-mask-size: 100% 100%, 400px 400px; mask-size: 100% 100%, 400px 400px;
  -webkit-mask-repeat: no-repeat, repeat; mask-repeat: no-repeat, repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
[data-hero-fx~="spotlight"] .hero__fx-spot { display: block; }
@media (hover: hover) and (pointer: fine) {
  [data-hero-fx~="spotlight"] .hero__fx-pattern i { animation-name: none; }
  /* full shorthand (not just animation-name): the drift entry is gone, so the pulse must keep ITS OWN duration/delay */
  [data-hero-fx~="spotlight"] .hero__fx-pattern i.hero__tw--a { animation: hero-tw-pulse 7s ease-in-out -1s infinite; }
  [data-hero-fx~="spotlight"] .hero__fx-pattern i.hero__tw--b { animation: hero-tw-pulse 9s ease-in-out -4.5s infinite; }
  [data-hero-fx~="spotlight"] .hero__fx-pattern i.hero__tw--c { animation: hero-tw-pulse 11s ease-in-out -8s infinite; }
}
@media (hover: none), (pointer: coarse) { .hero__fx-spot { display: none !important; } }

/* ============ aurora ============ */
.hero__fx-aurora span {
  position: absolute; display: block; border-radius: 50%; will-change: transform;
  width: 62vmax; height: 62vmax;
}
.hero__fx-aurora span:nth-child(1) { inset-inline-start: -14vmax; top: -18vmax; background: radial-gradient(closest-side, rgba(134,195,163,.42), transparent 72%); animation: hero-aur-1 34s ease-in-out infinite alternate; }
.hero__fx-aurora span:nth-child(2) { inset-inline-end: -16vmax; top: 6vmax; background: radial-gradient(closest-side, rgba(251,205,180,.50), transparent 72%); animation: hero-aur-2 42s ease-in-out infinite alternate; }
.hero__fx-aurora span:nth-child(3) { inset-inline-start: 10vmax; bottom: -26vmax; background: radial-gradient(closest-side, rgba(200,232,214,.55), transparent 72%); animation: hero-aur-3 38s ease-in-out infinite alternate; }
html[data-theme="dark"] .hero__fx-aurora span:nth-child(1) { background: radial-gradient(closest-side, rgba(134,195,163,.16), transparent 72%); }
html[data-theme="dark"] .hero__fx-aurora span:nth-child(2) { background: radial-gradient(closest-side, rgba(196,130,90,.18), transparent 72%); }
html[data-theme="dark"] .hero__fx-aurora span:nth-child(3) { background: radial-gradient(closest-side, rgba(90,160,130,.14), transparent 72%); }
@keyframes hero-aur-1 { from { transform: translate3d(0,0,0) scale(1); }    to { transform: translate3d(14vmax, 10vmax, 0) scale(1.15); } }
@keyframes hero-aur-2 { from { transform: translate3d(0,0,0) scale(1.1); }  to { transform: translate3d(-12vmax, 14vmax, 0) scale(.92); } }
@keyframes hero-aur-3 { from { transform: translate3d(0,0,0) scale(.95); }  to { transform: translate3d(16vmax, -12vmax, 0) scale(1.12); } }
[data-hero-fx~="aurora"] .hero__fx-aurora { display: block; }
.hero__fx-aurora { position: absolute; inset: 0; opacity: var(--fx-strength); }

/* ============ dust (luminous specks) ============ */
.hero__dust {
  position: absolute; left: 0; right: 0; top: 0; height: 200%; will-change: transform, opacity;
  background-size: 100% 50%; background-repeat: repeat-y;
}
.hero__dust--a {
  background-image:
    radial-gradient(circle at 8% 12%, rgba(var(--hero-fx-ink), .55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 22% 41%, rgba(var(--hero-fx-ink), .55) 0 2px, transparent 2.8px),
    radial-gradient(circle at 35% 78%, rgba(var(--hero-fx-ink), .55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 47% 24%, rgba(var(--hero-fx-ink), .55) 0 2.2px, transparent 3px),
    radial-gradient(circle at 58% 62%, rgba(var(--hero-fx-ink), .55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 69% 9%, rgba(var(--hero-fx-ink), .55) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 78% 51%, rgba(var(--hero-fx-ink), .55) 0 2.2px, transparent 3px),
    radial-gradient(circle at 88% 84%, rgba(var(--hero-fx-ink), .55) 0 1.4px, transparent 2.2px),
    radial-gradient(circle at 94% 30%, rgba(var(--hero-fx-ink), .55) 0 1.8px, transparent 2.6px),
    radial-gradient(circle at 14% 90%, rgba(var(--hero-fx-ink), .55) 0 1.8px, transparent 2.6px);
  animation: hero-dust-rise 90s linear infinite, hero-dust-glow 7s ease-in-out infinite alternate;
}
.hero__dust--b {
  background-image:
    radial-gradient(circle at 5% 55%, rgba(var(--hero-fx-ink), .5) 0 2.6px, transparent 3.6px),
    radial-gradient(circle at 27% 8%, rgba(var(--hero-fx-ink), .5) 0 2.2px, transparent 3px),
    radial-gradient(circle at 41% 66%, rgba(var(--hero-fx-ink), .5) 0 2.8px, transparent 3.8px),
    radial-gradient(circle at 63% 35%, rgba(var(--hero-fx-ink), .5) 0 2.4px, transparent 3.4px),
    radial-gradient(circle at 74% 92%, rgba(var(--hero-fx-ink), .5) 0 2.6px, transparent 3.6px),
    radial-gradient(circle at 92% 58%, rgba(var(--hero-fx-ink), .5) 0 2.2px, transparent 3px);
  animation: hero-dust-rise 55s linear infinite, hero-dust-glow 9s ease-in-out -3s infinite alternate;
}
@keyframes hero-dust-rise { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }   /* -50% of 200% = one period → seamless */
@keyframes hero-dust-glow { from { opacity: calc(.45 * var(--fx-strength)); } to { opacity: calc(1 * var(--fx-strength)); } }
[data-hero-fx~="dust"] .hero__fx-dust { display: block; position: absolute; inset: 0; overflow: hidden; }

/* ============ brain wave ============ */
.hero__fx-wave {
  position: absolute; left: 0; right: 0; bottom: 9%; height: 80px; overflow: hidden; direction: ltr;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000) 16%, var(--lc-000000, #000) 84%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--lc-000000, #000) 16%, var(--lc-000000, #000) 84%, transparent);
}
.hero__fx-wave i {
  position: absolute; top: 0; bottom: 0; left: -600px; right: 0; display: block;
  background: rgb(var(--hero-fx-ink)); opacity: calc(.2 * var(--fx-strength));
  -webkit-mask-image: url("hero-wave.svg"); mask-image: url("hero-wave.svg");
  -webkit-mask-size: 600px 80px; mask-size: 600px 80px;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  will-change: transform; animation: hero-wave-flow 26s linear infinite;
}
@keyframes hero-wave-flow { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(600px, 0, 0); } }
[data-hero-fx~="wave"] .hero__fx-wave { display: block; }

/* ============ breathing rings (inside .hero__actions, behind the buttons) ============ */
.hero__actions { position: relative; }
.hero__breath { position: absolute; inset-inline-start: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; pointer-events: none; z-index: -1; display: none; will-change: transform, opacity; }
.hero__breath--a { border: 1.5px solid rgba(var(--hero-fx-ink), .22); background: radial-gradient(closest-side, rgba(var(--hero-fx-ink), .07), transparent 100%); animation: hero-breathe 9s ease-in-out infinite; }
.hero__breath--b { border: 1px solid rgba(var(--hero-fx-ink), .13); animation: hero-breathe 9s ease-in-out -4.5s infinite; }
@keyframes hero-breathe { 0%, 100% { transform: scale(.78); opacity: calc(.55 * var(--fx-strength)); } 50% { transform: scale(1.14); opacity: calc(1 * var(--fx-strength)); } }
[data-hero-fx~="breath"] .hero__breath { display: block; }

/* ============ bubbles (retired 2026-09-22, kept for history) ============ */
.hero__bubbles { position: absolute; inset: 0; }
.hero__bubble {
  position: absolute; bottom: -14%; inset-inline-start: var(--x);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.80), rgba(255,255,255,.20) 38%, rgba(171,207,185,.24) 70%, rgba(171,207,185,0) 72%);
  border: 1px solid rgba(255,255,255,.55);
  opacity: 0; will-change: transform, opacity;
  animation: hero-bubble-rise var(--t) linear var(--d) infinite;
}
html[data-theme="dark"] .hero__bubble {
  background: radial-gradient(circle at 30% 28%, rgba(190,225,205,.30), rgba(190,225,205,.07) 40%, rgba(134,195,163,.10) 70%, rgba(134,195,163,0) 72%);
  border-color: rgba(190,225,205,.22);
}
@keyframes hero-bubble-rise {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: calc(var(--o) * var(--fx-strength)); }
  50%  { transform: translate3d(var(--sway), -55svh, 0); }
  90%  { opacity: calc(var(--o) * var(--fx-strength)); }
  100% { transform: translate3d(calc(var(--sway) * -.6), -118svh, 0); opacity: 0; }
}
.hero__bubble:nth-child(1) { --x: 8%;  --s: 46px; --t: 26s; --d: -4s;  --o: .85; --sway: 22px; }
.hero__bubble:nth-child(2) { --x: 20%; --s: 18px; --t: 19s; --d: -11s; --o: .75; --sway: -14px; }
.hero__bubble:nth-child(3) { --x: 34%; --s: 30px; --t: 30s; --d: -18s; --o: .70; --sway: 18px; }
.hero__bubble:nth-child(4) { --x: 52%; --s: 14px; --t: 22s; --d: -2s;  --o: .70; --sway: -10px; }
.hero__bubble:nth-child(5) { --x: 66%; --s: 40px; --t: 28s; --d: -14s; --o: .80; --sway: -24px; }
.hero__bubble:nth-child(6) { --x: 78%; --s: 22px; --t: 21s; --d: -7s;  --o: .75; --sway: 12px; }
.hero__bubble:nth-child(7) { --x: 88%; --s: 54px; --t: 32s; --d: -20s; --o: .70; --sway: -18px; }
.hero__bubble:nth-child(8) { --x: 95%; --s: 16px; --t: 18s; --d: -9s;  --o: .65; --sway: 8px; }
[data-hero-fx~="bubbles"] .hero__fx-bubbles { display: block; position: absolute; inset: 0; }

/* ============ mobile: lighter ============ */
@media (max-width: 600px) {
  .hero__bubble:nth-child(n+6) { display: none; }
  .hero__fx-pattern i { -webkit-mask-size: 320px 320px; mask-size: 320px 320px; inset: -320px; animation-name: hero-pattern-drift-sm; }
  .hero__fx-pattern i.hero__tw--a { animation-name: hero-pattern-drift-sm, hero-tw-pulse; }
  .hero__fx-pattern i.hero__tw--b { animation-name: hero-pattern-drift-sm, hero-tw-pulse; }
  .hero__fx-pattern i.hero__tw--c { animation-name: hero-pattern-drift-sm, hero-tw-pulse; }
  @keyframes hero-pattern-drift-sm { from { transform: translate3d(0,0,0); } to { transform: translate3d(320px, 320px, 0); } }
  .hero__fx-wave { bottom: 8px; }
  .hero__breath { width: 240px; height: 240px; margin: -120px 0 0 -120px; }
  .hero__dust--b { display: none; }
}

/* ============ motion off (admin switch) and reduced-motion (visitor setting) ============ */
.hero--home[data-hero-motion="off"] .hero__fx *,
.hero--home[data-hero-motion="off"] .hero__breath { animation: none !important; }
.hero--home[data-hero-motion="off"] .hero__bubble { opacity: calc(var(--o) * .8 * var(--fx-strength)); transform: translate3d(0, -42svh, 0); }
.hero--home[data-hero-motion="off"] .hero__dust { opacity: calc(.7 * var(--fx-strength)); }
.hero--home[data-hero-motion="off"] .hero__breath { opacity: calc(.8 * var(--fx-strength)); }
@media (prefers-reduced-motion: reduce) {
  .hero__fx *, .hero__breath { animation: none !important; }
  .hero__bubble { opacity: calc(var(--o) * .8 * var(--fx-strength)); transform: translate3d(0, -42svh, 0); }
  .hero__dust { opacity: calc(.7 * var(--fx-strength)); }
  .hero__breath { opacity: calc(.8 * var(--fx-strength)); }
}