/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATED THEMES — THE STYLE FAMILY (owner order 2026-08-03; re-homed
   2026-09-04). Three styles — CRT · WELLNESS · GLITCH — picked per member on
   the ACCOUNT page (animated_theme_style; master switch show_animated_themes,
   default OFF — owner order 2026-09-04). Two elements carry every style:
   .pf-crt-warm + .pf-crt-fx wearing the picked .pf-anim--<style> modifier.
   LAWS: background layer only (below ALL content, even negative-z elements) ·
   brand tokens only via color-mix (this sheet recolors itself from the live
   brand row) · transform/opacity animation · co-prime clocks · reduced-motion
   statics equal the resting state · pointer-events none.
   THIS SHEET IS ITS OWN FILE ON PURPOSE: it lived inside technology.css and
   the 2026-08-29 re-bake (7567a4656) silently deleted it — a hand-written
   block inside a GENERATED sheet dies on regen. Never move it back.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-crt-warm,
.pf-crt-fx {
  position: fixed;
  inset: 0;
  z-index: -9999;
  overflow: hidden;
  pointer-events: none;
}

/* ════════════════ STYLE 1 — CRT (the ratified original) ════════════════ */
/* The power cycle: warmup 4.5s → 20s clear → slow sink to solid → re-warm,
   ×3 per 156s. Washes the BACKGROUND only — content always on top. */
.pf-anim--crt.pf-crt-warm {
  background: var(--active-color-09);
  opacity: 0;             /* resting state: gone */
  animation: pf-cathode-warmup 156s linear infinite;
}
@keyframes pf-cathode-warmup {
  0%     { opacity: 0.98; animation-timing-function: ease-in; }
  0.87%  { opacity: 0.94; animation-timing-function: ease-in; }
  2.02%  { opacity: 0.55; animation-timing-function: ease-out; }
  2.88%  { opacity: 0; }
  15.71% { opacity: 0; animation-timing-function: ease-in-out; }
  31.73% { opacity: 0.98; }
  36.22% { opacity: 0.98; animation-timing-function: ease-in; }
  37.08% { opacity: 0.94; animation-timing-function: ease-in; }
  38.24% { opacity: 0.55; animation-timing-function: ease-out; }
  39.1%  { opacity: 0; }
  51.92% { opacity: 0; animation-timing-function: ease-in-out; }
  71.15% { opacity: 0.98; }
  74.36% { opacity: 0.98; animation-timing-function: ease-in; }
  75.22% { opacity: 0.94; animation-timing-function: ease-in; }
  76.38% { opacity: 0.55; animation-timing-function: ease-out; }
  77.24% { opacity: 0; }
  90.06% { opacity: 0; animation-timing-function: ease-in-out; }
  100%   { opacity: 0.98; }
}

/* shutter-beat-bar: a DEFINED dark band at a visible clip — five ~8s sweeps
   per 120s at uneven gaps; the return leg rides opacity 0 (no-flash law). */
.pf-anim--crt.pf-crt-fx::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 60%;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--active-color-11) 10%, transparent) 8%,
    color-mix(in srgb, var(--active-color-11) 3%, transparent) 13%,
    color-mix(in srgb, var(--active-color-09) 52%, transparent) 24%,
    color-mix(in srgb, var(--active-color-09) 46%, transparent) 46%,
    color-mix(in srgb, var(--active-color-09) 24%, transparent) 68%,
    color-mix(in srgb, var(--active-color-09) 8%, transparent) 86%,
    transparent 100%);
  animation: pf-shutter-beat 120s linear -53s infinite;
}
@keyframes pf-shutter-beat {
  0%     { transform: translateY(-100%); opacity: 1; }
  6.7%   { transform: translateY(267%);  opacity: 1; }
  6.75%  { transform: translateY(267%);  opacity: 0; }
  7%     { transform: translateY(-100%); opacity: 0; }
  19.9%  { transform: translateY(-100%); opacity: 0; }
  20%    { transform: translateY(-100%); opacity: 1; }
  26.7%  { transform: translateY(267%);  opacity: 1; }
  26.75% { transform: translateY(267%);  opacity: 0; }
  27%    { transform: translateY(-100%); opacity: 0; }
  44.9%  { transform: translateY(-100%); opacity: 0; }
  45%    { transform: translateY(-100%); opacity: 1; }
  51.7%  { transform: translateY(267%);  opacity: 1; }
  51.75% { transform: translateY(267%);  opacity: 0; }
  52%    { transform: translateY(-100%); opacity: 0; }
  59.9%  { transform: translateY(-100%); opacity: 0; }
  60%    { transform: translateY(-100%); opacity: 1; }
  66.7%  { transform: translateY(267%);  opacity: 1; }
  66.75% { transform: translateY(267%);  opacity: 0; }
  67%    { transform: translateY(-100%); opacity: 0; }
  89.9%  { transform: translateY(-100%); opacity: 0; }
  90%    { transform: translateY(-100%); opacity: 1; }
  96.7%  { transform: translateY(267%);  opacity: 1; }
  96.75% { transform: translateY(267%);  opacity: 0; }
  97%    { transform: translateY(-100%); opacity: 0; }
  99.9%  { transform: translateY(-100%); opacity: 0; }
  100%   { transform: translateY(-100%); opacity: 1; }
}

/* mains-hum-bar: a thin, very faint PURE-COLOR ripple drifting slowly DOWN
   (same direction as the beat bar, much slower and fainter). */
.pf-anim--crt.pf-crt-fx::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 22%;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--active-color-09) 10%, transparent) 35%,
    color-mix(in srgb, var(--active-color-09) 14%, transparent) 50%,
    color-mix(in srgb, var(--active-color-09) 10%, transparent) 65%,
    transparent 100%);
  animation: pf-mains-hum 45s linear -13s infinite;
}
@keyframes pf-mains-hum {
  from { transform: translateY(-100%); }
  to   { transform: translateY(555%); }
}

/* ════════════════ STYLE 2 — WELLNESS (health / easy on the eyes) ════════
   v2 (owner reference: the soft-tint comfort filter — the whole picture
   bathed in one gentle brand-color wash): a SOLID tint overlay that softens
   the environment — dark mode gets brighter and warmer-glowing — with two
   huge luminance clouds drifting through it. NOTHING pulses; the only
   motion is slow cloud drift. */
/* the comfort tint: static solid wash — brand glow + a lift of the light
   surface tone. Brightens darkness, softens harsh light. */
.pf-anim--wellness.pf-crt-warm {
  background:
    linear-gradient(color-mix(in srgb, var(--active-color-01) 18%, transparent),
                    color-mix(in srgb, var(--active-color-01) 18%, transparent)),
    linear-gradient(color-mix(in srgb, var(--active-color-11) 16%, transparent),
                    color-mix(in srgb, var(--active-color-11) 16%, transparent));
}
/* cloud one: a huge soft body of the same light drifting diagonally */
.pf-anim--wellness.pf-crt-fx::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse 38% 32% at 38% 42%,
    color-mix(in srgb, var(--active-color-11) 20%, transparent) 0%,
    color-mix(in srgb, var(--active-color-11) 9%, transparent) 55%,
    transparent 75%);
  animation: pf-well-cloud-a 180s ease-in-out infinite alternate;
}
@keyframes pf-well-cloud-a {
  from { transform: translate(-6%, -4%); }
  to   { transform: translate(7%, 5%); }
}
/* cloud two: warmer brand glow, opposite direction, slower */
.pf-anim--wellness.pf-crt-fx::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(ellipse 42% 36% at 62% 58%,
    color-mix(in srgb, var(--active-color-01) 18%, transparent) 0%,
    color-mix(in srgb, var(--active-color-01) 8%, transparent) 55%,
    transparent 75%);
  animation: pf-well-cloud-b 260s ease-in-out infinite alternate;
}
@keyframes pf-well-cloud-b {
  from { transform: translate(6%, 4%); }
  to   { transform: translate(-7%, -5%); }
}

/* ════════════════ STYLE 3 — GLITCH (cyberpunk / from the future) ════════
   v3 (owner: THINK MATRIX): visible DIGITAL RAIN — luminous streaks of the
   brand phosphor falling in columns, bright leading heads, fading trails,
   two parallax speeds. Seamless by construction: every column repeats on a
   480px vertical tile and the layer translates by EXACTLY one tile per
   loop — no resets, no fades, and NOTHING pulses. Static neon dressing
   (grille + bloom + fringe) underneath. */
/* fast rain — 8 columns, 480px tile, one tile per 3.1s */
.pf-anim--glitch.pf-crt-fx::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -480px;
  height: calc(100% + 480px);
  opacity: 0.55;
  background-image:
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 14%, transparent) 55%, color-mix(in srgb, var(--active-color-01) 52%, transparent) 90%, color-mix(in srgb, var(--active-color-11) 85%, transparent) 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 30%, color-mix(in srgb, var(--active-color-01) 12%, transparent) 70%, color-mix(in srgb, var(--active-color-01) 48%, transparent) 96%, color-mix(in srgb, var(--active-color-11) 80%, transparent) 99%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 10%, transparent) 40%, color-mix(in srgb, var(--active-color-01) 45%, transparent) 72%, color-mix(in srgb, var(--active-color-11) 82%, transparent) 78%, transparent 82%),
    linear-gradient(to bottom, transparent 0%, transparent 12%, color-mix(in srgb, var(--active-color-01) 13%, transparent) 52%, color-mix(in srgb, var(--active-color-01) 50%, transparent) 86%, color-mix(in srgb, var(--active-color-11) 84%, transparent) 91%, transparent 94%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 11%, transparent) 60%, color-mix(in srgb, var(--active-color-01) 46%, transparent) 94%, color-mix(in srgb, var(--active-color-11) 78%, transparent) 98%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 22%, color-mix(in srgb, var(--active-color-01) 14%, transparent) 58%, color-mix(in srgb, var(--active-color-01) 52%, transparent) 88%, color-mix(in srgb, var(--active-color-11) 86%, transparent) 93%, transparent 96%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 12%, transparent) 47%, color-mix(in srgb, var(--active-color-01) 44%, transparent) 80%, color-mix(in srgb, var(--active-color-11) 80%, transparent) 85%, transparent 88%),
    linear-gradient(to bottom, transparent 0%, transparent 36%, color-mix(in srgb, var(--active-color-01) 13%, transparent) 74%, color-mix(in srgb, var(--active-color-01) 50%, transparent) 97%, color-mix(in srgb, var(--active-color-11) 82%, transparent) 99.5%, transparent 100%);
  background-size: 3px 480px, 3px 480px, 3px 480px, 3px 480px, 3px 480px, 3px 480px, 3px 480px, 3px 480px;
  background-repeat: repeat-y;
  background-position: 4% 0px, 15% 120px, 27% 300px, 38% 40px, 52% 210px, 64% 350px, 79% 90px, 91% 260px;
  animation: pf-glitch-rain-fast 3.1s linear infinite;
}
@keyframes pf-glitch-rain-fast {
  from { transform: translateY(0); }
  to   { transform: translateY(480px); }
}
/* slow rain — 7 thinner columns behind, one tile per 6.7s (parallax) */
.pf-anim--glitch.pf-crt-fx::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -480px;
  height: calc(100% + 480px);
  opacity: 0.35;
  background-image:
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 10%, transparent) 50%, color-mix(in srgb, var(--active-color-01) 38%, transparent) 88%, color-mix(in srgb, var(--active-color-11) 70%, transparent) 96%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 26%, color-mix(in srgb, var(--active-color-01) 9%, transparent) 64%, color-mix(in srgb, var(--active-color-01) 36%, transparent) 92%, color-mix(in srgb, var(--active-color-11) 68%, transparent) 97%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 8%, transparent) 34%, color-mix(in srgb, var(--active-color-01) 34%, transparent) 66%, color-mix(in srgb, var(--active-color-11) 66%, transparent) 72%, transparent 76%),
    linear-gradient(to bottom, transparent 0%, transparent 14%, color-mix(in srgb, var(--active-color-01) 10%, transparent) 55%, color-mix(in srgb, var(--active-color-01) 37%, transparent) 84%, color-mix(in srgb, var(--active-color-11) 70%, transparent) 90%, transparent 93%),
    linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--active-color-01) 9%, transparent) 45%, color-mix(in srgb, var(--active-color-01) 35%, transparent) 78%, color-mix(in srgb, var(--active-color-11) 64%, transparent) 84%, transparent 87%),
    linear-gradient(to bottom, transparent 0%, transparent 40%, color-mix(in srgb, var(--active-color-01) 10%, transparent) 76%, color-mix(in srgb, var(--active-color-01) 38%, transparent) 98%, color-mix(in srgb, var(--active-color-11) 72%, transparent) 99.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, transparent 8%, color-mix(in srgb, var(--active-color-01) 9%, transparent) 48%, color-mix(in srgb, var(--active-color-01) 36%, transparent) 80%, color-mix(in srgb, var(--active-color-11) 68%, transparent) 86%, transparent 89%);
  background-size: 2px 480px, 2px 480px, 2px 480px, 2px 480px, 2px 480px, 2px 480px, 2px 480px;
  background-repeat: repeat-y;
  background-position: 9% 60px, 21% 280px, 33% 150px, 46% 380px, 58% 20px, 72% 190px, 86% 330px;
  animation: pf-glitch-rain-slow 6.7s linear infinite;
}
@keyframes pf-glitch-rain-slow {
  from { transform: translateY(0); }
  to   { transform: translateY(480px); }
}
/* static neon dressing under the rain — NOTHING here animates */
.pf-anim--glitch.pf-crt-warm {
  background:
    repeating-linear-gradient(to right,
      color-mix(in srgb, var(--active-color-04) 4%, transparent) 0 1px,
      color-mix(in srgb, var(--active-color-01) 3%, transparent) 1px 2px,
      color-mix(in srgb, var(--active-color-05) 4%, transparent) 2px 3px);
}
.pf-anim--glitch.pf-crt-warm::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--active-background);
  background-size: 100% 100%;
  filter: blur(14px) brightness(1.5) saturate(1.4);
  mix-blend-mode: screen;
  opacity: 0.3;
}
.pf-anim--glitch.pf-crt-warm::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--active-background);
  background-size: 100% 100%;
  transform: translateX(2px);
  filter: hue-rotate(90deg) saturate(2);
  mix-blend-mode: screen;
  opacity: 0.1;
}

/* Reduced motion: every style freezes at its resting statics — CRT gone,
   WELLNESS softened, GLITCH just the faint bed (no events). */
@media (prefers-reduced-motion: reduce) {
  .pf-crt-warm,
  .pf-crt-warm::before,
  .pf-crt-warm::after,
  .pf-crt-fx::before,
  .pf-crt-fx::after {
    animation: none;
  }
}