/* Logo Animation Alternatives — permanent page styles
   Separate file required because CSP is style-src 'self' (no inline styles).
   This page lets users browse and select animated logo styles.

   ╔══════════════════════════════════════════════════════════════════╗
   ║  OVERLAY COPY BUG — READ BEFORE ADDING ANY NEW OVERLAY ANIM    ║
   ╠══════════════════════════════════════════════════════════════════╣
   ║  Duplicate <img> copies inside .logo-wrap have broken FIVE      ║
   ║  TIMES (#11–#22, #23, #26). Two failed approaches:             ║
   ║                                                                  ║
   ║  FAILED: position:absolute in animation-specific section         ║
   ║  FAILED: top:50% + left:50% + transform:translate(-50%,-50%)    ║
   ║          (keyframes reset transform to none each frame)          ║
   ║                                                                  ║
   ║  CORRECT: Add selector to CENTRALIZED BLOCK (~line 100) using:  ║
   ║    position: absolute !important;                                ║
   ║    z-index: 2 !important;                                        ║
   ║    inset: 0;                                                     ║
   ║    margin: auto;                                                 ║
   ║    pointer-events: none;                                         ║
   ║                                                                  ║
   ║  Or better: skip overlay copies entirely — use filter-only       ║
   ║  animations on the single <img> (see #24–#25, #27–#28).         ║
   ║                                                                  ║
   ║  Full history: CLAUDE.md Anti-Pattern #13                        ║
   ║  Local log:    docs/troubleshooting/OVERLAY_BUG_LOG.md                           ║
   ╚══════════════════════════════════════════════════════════════════╝ */

/* Override style.css body { display: flex; flex-direction: column } which
   collapses our grid into a single-column layout */
body.demo-page {
  display: block !important;
  padding: 32px 24px;
}
.page-header {
  text-align: center;
  margin-bottom: 40px;
}
.page-header h1 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}
.page-header p {
  font-size: 14px;
  color: var(--text-muted);
}
.demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 960px;
  margin: 0 auto;
}
@media (max-width: 768px) { .demo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .demo-grid { grid-template-columns: 1fr; } }

.demo-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 240px;
  overflow: visible;
}
.demo-card-number {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.demo-card-number .current-tag {
  color: var(--online);
}
.logo-wrap {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}
/* Base img sizing. position/z-index set here for ring overlays
   (neon, radar, gradient, ripple) but overridden with !important
   in animations that need stacking or absolute overlays. */
.logo-wrap img {
  width: 64px;
  height: 64px;
  display: block;
  position: relative;
  z-index: 1;
}
/* Override base img positioning for all stacking/overlay animations.
   This single rule prevents the specificity wars that broke #11–#22.
   Each animation that needs different positioning adds !important. */
.anim-depth img,
.anim-swarm img,
.anim-storm img {
  position: static !important;
  z-index: auto !important;
}
/* ── Centralized overlay copy positioning ──────────────────────────
   ALL overlay copies (bright duplicates used for sweep/scan/glitch
   effects) MUST be registered here. This is the single source of
   truth for stacking overlays inside .logo-wrap flex containers.

   REQUIRED for every overlay copy:
     position: absolute   — take out of flex flow
     z-index: 2           — sit above the base img (z-index: 1)
     inset: 0; margin: auto — center on parent WITHOUT transform
       (transform: translate conflicts with @keyframes animations
        that don't explicitly preserve it — the animation resets
        transform to none on each frame, breaking centering)
     pointer-events: none — don't steal clicks from the base img

   When adding a NEW overlay animation, add its class here.
   Do NOT put position/z-index in the animation-specific section.
   NEVER use transform for centering — use inset/margin instead. */
.edge-glow-copy,
.logo-wrap .glitch-copy,
.anim-metal-sweep .metal-sweep-copy,
.anim-brushed .brushed-copy {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0;
  margin: auto;
  pointer-events: none;
}
.logo-wrap .spotlight-mask {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0;
  margin: auto;
}
.spotlight-mask img {
  position: static !important;
  z-index: auto !important;
}
.anim-tumble img,
.anim-flip img {
  z-index: auto !important;
}
.demo-card-title {
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}
.demo-card-desc {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.demo-card-hint {
  font-size: 11px;
  color: var(--warn);
  font-style: italic;
}
.replay-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 11px;
  padding: 4px 12px;
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.replay-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─────────────────────────────────────────────────────
   #0 Current: Breathing Glow
   ───────────────────────────────────────────────────── */
.anim-current img {
  animation: demo-breathe 2s ease-in-out infinite;
}
@keyframes demo-breathe {
  0%, 100% { filter: drop-shadow(0 0 6px var(--online)) drop-shadow(0 0 14px rgba(var(--online-rgb), .35)); }
  50%      { filter: drop-shadow(0 0 12px var(--online)) drop-shadow(0 0 24px rgba(var(--online-rgb), .6)); }
}

/* ─────────────────────────────────────────────────────
   #0b Current: Deploy Groove (from style.css)
   The "Almost Ready" overlay animation — hue-rotate
   cycles through colors with scale/rotation bounce.
   Reuses deploy-groove keyframes from style.css.
   ───────────────────────────────────────────────────── */
.anim-deploy img {
  animation: deploy-groove 2.4s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────
   #1 Pulse Scale — heartbeat zoom
   ───────────────────────────────────────────────────── */
.anim-pulse img {
  animation: demo-pulse 1.6s ease-in-out infinite;
}
@keyframes demo-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.18); }
}

/* ─────────────────────────────────────────────────────
   #2 Spin Entry — one-shot 360° rotation
   ───────────────────────────────────────────────────── */
.anim-spin img {
  animation: demo-spin 1.2s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes demo-spin {
  0%   { transform: rotate(0deg) scale(0.4); opacity: 0; }
  60%  { transform: rotate(360deg) scale(1.1); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 1;
         filter: drop-shadow(0 0 10px var(--online)) drop-shadow(0 0 20px rgba(var(--online-rgb), .5)); }
}

/* ─────────────────────────────────────────────────────
   #3 Neon Ring — spinning border ring
   ───────────────────────────────────────────────────── */
.neon-ring {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  border-top-color: var(--accent);
  border-right-color: rgba(var(--accent-rgb), .4);
  animation: demo-neon 1.2s linear infinite;
  z-index: 2;
  pointer-events: none;
}
@keyframes demo-neon {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────
   #4 Morph Shadow — color-cycling drop shadow
   ───────────────────────────────────────────────────── */
.anim-morph img {
  animation: demo-morph 3s ease-in-out infinite;
}
@keyframes demo-morph {
  0%, 100% { filter: drop-shadow(0 0 10px var(--accent)) drop-shadow(0 0 22px rgba(var(--accent-rgb), .5)); }
  33%      { filter: drop-shadow(0 0 10px var(--online)) drop-shadow(0 0 22px rgba(var(--online-rgb), .5)); }
  66%      { filter: drop-shadow(0 0 10px var(--purple)) drop-shadow(0 0 22px rgba(168, 85, 247, .5)); }
}

/* ─────────────────────────────────────────────────────
   #5 Float & Bob — vertical hover
   ───────────────────────────────────────────────────── */
.anim-float img {
  animation: demo-float 2.5s ease-in-out infinite;
}
@keyframes demo-float {
  0%, 100% { transform: translateY(0);    filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
  50%      { transform: translateY(-12px); filter: drop-shadow(0 18px 20px rgba(0,0,0,.3)); }
}

/* ─────────────────────────────────────────────────────
   #6 Radar Ping — sonar rings
   ───────────────────────────────────────────────────── */
.radar-ring {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: demo-radar 2s ease-out infinite;
  pointer-events: none;
  z-index: 0;
}
.radar-ring:nth-child(2) { animation-delay: .66s; }
.radar-ring:nth-child(3) { animation-delay: 1.33s; }
@keyframes demo-radar {
  0%   { transform: scale(1);   opacity: .8; }
  100% { transform: scale(2.5); opacity: 0; }
}

/* ─────────────────────────────────────────────────────
   #7 Gradient Border — spinning conic-gradient ring
   ───────────────────────────────────────────────────── */
.gradient-ring {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: conic-gradient(var(--accent), var(--online), var(--purple), var(--accent));
  animation: demo-gradient 2s linear infinite;
  z-index: 0;
  pointer-events: none;
}
.anim-gradient img {
  border-radius: 50%;
  box-shadow: 0 0 0 5px var(--surface);
}
@keyframes demo-gradient {
  to { transform: rotate(360deg); }
}

/* ─────────────────────────────────────────────────────
   #8 Glitch Flicker — RGB-split every ~3s
   ───────────────────────────────────────────────────── */
.anim-glitch img:not(.glitch-copy) {
  animation: demo-glitch-main 3s ease-in-out infinite;
}
/* Position override centralized near .logo-wrap img */
.glitch-copy {
  width: 64px; height: 64px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
}
.glitch-copy.red {
  animation: demo-glitch-red 3s ease-in-out infinite;
}
.glitch-copy.blue {
  animation: demo-glitch-blue 3s ease-in-out infinite;
}
@keyframes demo-glitch-main {
  0%, 84%, 88%, 92%, 100% { transform: none; }
  85% { transform: translateX(-3px) skewX(-2deg); }
  87% { transform: translateX(4px) skewX(1deg); }
  89% { transform: translateX(-2px); }
  91% { transform: translateX(3px) skewX(-1deg); }
}
@keyframes demo-glitch-red {
  0%, 84%, 93%, 100% { opacity: 0; }
  85% { opacity: .7; transform: translateX(5px) translateY(-2px); filter: hue-rotate(90deg) saturate(2); }
  87% { opacity: .5; transform: translateX(-4px) translateY(2px); filter: hue-rotate(90deg) saturate(2); }
  89% { opacity: .6; transform: translateX(3px) translateY(-1px); filter: hue-rotate(90deg) saturate(2); }
  91% { opacity: .4; transform: translateX(-3px) translateY(1px); filter: hue-rotate(90deg) saturate(2); }
}
@keyframes demo-glitch-blue {
  0%, 84%, 93%, 100% { opacity: 0; }
  85.5% { opacity: .6; transform: translateX(-4px) translateY(2px); filter: hue-rotate(200deg) saturate(2); }
  87.5% { opacity: .4; transform: translateX(5px) translateY(-2px); filter: hue-rotate(200deg) saturate(2); }
  89.5% { opacity: .5; transform: translateX(-3px) translateY(1px); filter: hue-rotate(200deg) saturate(2); }
  91.5% { opacity: .3; transform: translateX(4px) translateY(-1px); filter: hue-rotate(200deg) saturate(2); }
}

/* ─────────────────────────────────────────────────────
   #9 Bounce In — elastic drop from top
   ───────────────────────────────────────────────────── */
.anim-bounce img {
  animation: demo-bounce 1.8s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes demo-bounce {
  0%   { transform: translateY(-80px) scale(0.5); opacity: 0; }
  35%  { transform: translateY(10px) scale(1.1); opacity: 1; }
  55%  { transform: translateY(-6px) scale(0.95); }
  70%  { transform: translateY(4px) scale(1.03); }
  85%  { transform: translateY(-2px) scale(0.99); }
  100% { transform: translateY(0) scale(1);
         filter: drop-shadow(0 0 10px var(--online)) drop-shadow(0 0 20px rgba(var(--online-rgb), .4)); }
}

/* ─────────────────────────────────────────────────────
   #10 Ripple Touch — concentric rings on hover
   ───────────────────────────────────────────────────── */
.anim-ripple {
  cursor: pointer;
}
.ripple-ring {
  position: absolute;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}
.anim-ripple:hover .ripple-ring:nth-child(1) {
  animation: demo-ripple .9s ease-out forwards;
}
.anim-ripple:hover .ripple-ring:nth-child(2) {
  animation: demo-ripple .9s ease-out .2s forwards;
}
.anim-ripple:hover .ripple-ring:nth-child(3) {
  animation: demo-ripple .9s ease-out .4s forwards;
}
@keyframes demo-ripple {
  0%   { transform: scale(1);   opacity: .7; }
  100% { transform: scale(2.8); opacity: 0; }
}

/* ═════════════════════════════════════════════════════
   EDGE-TRACING ANIMATIONS (#11–#13)
   These use a bright copy of the logo with an animated
   clip-path or gradient mask to create "light tracing
   the edges" effects. Works with any PNG shape.
   ═════════════════════════════════════════════════════ */

/* Shared: glow-copy is a bright duplicate overlaying the base logo.
   Position/z-index overrides are centralized near .logo-wrap img. */
.edge-glow-copy {
  width: 64px; height: 64px;
  pointer-events: none;
  filter: brightness(2) saturate(1.5) drop-shadow(0 0 6px var(--accent)) drop-shadow(0 0 12px rgba(var(--accent-rgb), .6));
}

/* ─────────────────────────────────────────────────────
   #11 Edge Trace — Scanning Beam
   A narrow vertical light bar sweeps left-to-right
   across the logo, illuminating edges as it passes.
   Uses clip-path: inset() to reveal a thin vertical
   slice of the bright copy that moves across.
   ───────────────────────────────────────────────────── */
.anim-scan .edge-glow-copy {
  animation: trace-scan 2.5s ease-in-out infinite;
}
@keyframes trace-scan {
  0%   { clip-path: inset(0 100% 0 0); }
  50%  { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* ─────────────────────────────────────────────────────
   #12 Edge Trace — Rotating Spotlight
   A pie-shaped wedge of light rotates around the logo
   center, illuminating edges as it sweeps past.
   Uses clip-path: polygon() animated via CSS.
   The bright copy + a spinning conic mask on a wrapper.
   ───────────────────────────────────────────────────── */
/* Position/z-index overrides centralized near .logo-wrap img. */
.spotlight-mask {
  width: 64px; height: 64px;
  pointer-events: none;
  overflow: hidden;
  animation: trace-spotlight-rotate 2s linear infinite;
}
.spotlight-mask img {
  filter: brightness(2) saturate(1.5) drop-shadow(0 0 6px var(--online)) drop-shadow(0 0 12px rgba(var(--online-rgb), .6));
  /* Counter-rotate so the logo stays upright while the mask spins */
  animation: trace-spotlight-counter 2s linear infinite;
}
@keyframes trace-spotlight-rotate {
  to { transform: rotate(360deg); }
}
@keyframes trace-spotlight-counter {
  to { transform: rotate(-360deg); }
}
/* The mask wrapper clips to a 90° wedge pointing right.
   As it rotates, the bright logo inside counter-rotates
   to stay upright — so the "spotlight" sweeps around. */
.spotlight-mask {
  clip-path: polygon(50% 50%, 100% 0%, 100% 50%, 100% 100%);
}

/* ─────────────────────────────────────────────────────
   #13 Edge Trace — Pulse Outline
   The logo's bright copy fades in and out with a heavy
   blur, creating a pulsing edge-glow that follows the
   exact shape of the logo. Combined with color cycling.
   ───────────────────────────────────────────────────── */
.anim-edge-pulse .edge-glow-copy {
  filter: brightness(1.5) saturate(2) blur(2px)
          drop-shadow(0 0 4px var(--accent))
          drop-shadow(0 0 10px rgba(var(--accent-rgb), .6));
  animation: trace-edge-pulse 3s ease-in-out infinite;
}
@keyframes trace-edge-pulse {
  0%, 100% { opacity: 0;   filter: brightness(1.5) saturate(2) blur(3px) drop-shadow(0 0 4px var(--accent)) drop-shadow(0 0 10px rgba(var(--accent-rgb), .4)) hue-rotate(0deg); }
  25%      { opacity: .8;  filter: brightness(2) saturate(2) blur(2px) drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 16px rgba(var(--accent-rgb), .7)) hue-rotate(0deg); }
  50%      { opacity: 0;   filter: brightness(1.5) saturate(2) blur(3px) drop-shadow(0 0 4px var(--online)) drop-shadow(0 0 10px rgba(var(--online-rgb), .4)) hue-rotate(60deg); }
  75%      { opacity: .8;  filter: brightness(2) saturate(2) blur(2px) drop-shadow(0 0 8px var(--online)) drop-shadow(0 0 16px rgba(var(--online-rgb), .7)) hue-rotate(60deg); }
}

/* ═════════════════════════════════════════════════════
   3D LOGO ANIMATIONS (#14–#16)
   Pure CSS 3D transforms using perspective and
   transform-style: preserve-3d. No WebGL/Canvas.
   ═════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   #14 — 3D Slow Tumble
   The logo gently rotates on X+Y axes like a floating
   hologram. Perspective on the parent creates depth.
   ───────────────────────────────────────────────────── */
.anim-tumble {
  perspective: 200px;
}
/* z-index: auto needed to prevent stacking context that blocks
   perspective transforms. Override .logo-wrap img { z-index: 1 }. */
.anim-tumble img {
  animation: demo-tumble 6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .3));
}
@keyframes demo-tumble {
  0%   { transform: rotateY(0deg)   rotateX(0deg); }
  25%  { transform: rotateY(20deg)  rotateX(-12deg); }
  50%  { transform: rotateY(0deg)   rotateX(0deg); }
  75%  { transform: rotateY(-20deg) rotateX(12deg); }
  100% { transform: rotateY(0deg)   rotateX(0deg); }
}

/* ─────────────────────────────────────────────────────
   #15 — 3D Depth Layers
   Multiple stacked copies at increasing Z-depths create
   an extruded/thick look. The stack rocks side-to-side.
   ───────────────────────────────────────────────────── */
/* .anim-depth needs to be a stacking context with all images
   overlapping at the same position. Override flex layout. */
.anim-depth {
  perspective: 300px;
  transform-style: preserve-3d;
  animation: demo-depth-rock 4s ease-in-out infinite;
  /* Use grid with all items in same cell to force overlap */
  display: grid !important;
  place-items: center;
}
/* All depth images overlap in the same grid cell */
.anim-depth img {
  grid-row: 1;
  grid-column: 1;
}
/* Front layer — full opacity, normal colors */
.anim-depth img.depth-front {
  z-index: 4;
  filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), .4));
}
/* Layer 1 — slight depth, slightly dimmer */
.anim-depth img.depth-1 {
  z-index: 3;
  transform: translateZ(-10px);
  opacity: .5;
  filter: brightness(.65) drop-shadow(0 0 4px rgba(var(--accent-rgb), .3));
}
/* Layer 2 — more depth, dimmer + slight hue shift */
.anim-depth img.depth-2 {
  z-index: 2;
  transform: translateZ(-20px);
  opacity: .3;
  filter: brightness(.45) hue-rotate(15deg);
}
/* Layer 3 — deepest, shadow silhouette */
.anim-depth img.depth-3 {
  z-index: 1;
  transform: translateZ(-30px);
  opacity: .18;
  filter: brightness(.25) hue-rotate(30deg) blur(1px);
}
@keyframes demo-depth-rock {
  0%, 100% { transform: rotateY(0deg)   rotateX(8deg); }
  25%      { transform: rotateY(25deg)  rotateX(0deg); }
  50%      { transform: rotateY(0deg)   rotateX(-8deg); }
  75%      { transform: rotateY(-25deg) rotateX(0deg); }
}

/* ─────────────────────────────────────────────────────
   #16 — 3D Flip Reveal
   Coin-flip on Y-axis. At the midpoint the "back" shows
   inverted colors via hue-rotate. Pauses between flips
   so the logo is readable most of the time.
   ───────────────────────────────────────────────────── */
.anim-flip {
  perspective: 300px;
}
.anim-flip img {
  animation: demo-flip 4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), .3));
}
@keyframes demo-flip {
  0%   { transform: rotateY(0deg);   filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(var(--accent-rgb), .3)); }
  15%  { transform: rotateY(0deg);   filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(var(--accent-rgb), .3)); }
  40%  { transform: rotateY(180deg); filter: hue-rotate(160deg) drop-shadow(0 0 12px rgba(var(--online-rgb), .5)); }
  55%  { transform: rotateY(360deg); filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(var(--accent-rgb), .3)); }
  100% { transform: rotateY(360deg); filter: hue-rotate(0deg) drop-shadow(0 0 8px rgba(var(--accent-rgb), .3)); }
}

/* ═════════════════════════════════════════════════════
   LIGHT TRACE ANIMATIONS (#17–#19)
   A photon / beam of light orbiting the logo edges.
   Uses filter: drop-shadow() which traces the exact
   pixel edges of the transparent PNG — by animating
   the shadow's X/Y offset in a circular path, the
   glow appears to orbit the logo contour.
   ═════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   #17 — Single Photon Orbit
   One bright point of light circles the logo edges.
   The shadow offset traces a circular path (r≈4px)
   while the glow tightens to simulate a focused beam.
   ───────────────────────────────────────────────────── */
.anim-photon img {
  animation: photon-orbit 2s linear infinite;
}
@keyframes photon-orbit {
  0%   { filter: drop-shadow( 4px  0px 2px #fff) drop-shadow( 5px  0px 6px var(--accent)) drop-shadow( 6px  0px 10px rgba(var(--accent-rgb), .6)); }
  12.5%{ filter: drop-shadow( 3px  3px 2px #fff) drop-shadow( 4px  4px 6px var(--accent)) drop-shadow( 5px  5px 10px rgba(var(--accent-rgb), .6)); }
  25%  { filter: drop-shadow( 0px  4px 2px #fff) drop-shadow( 0px  5px 6px var(--accent)) drop-shadow( 0px  6px 10px rgba(var(--accent-rgb), .6)); }
  37.5%{ filter: drop-shadow(-3px  3px 2px #fff) drop-shadow(-4px  4px 6px var(--accent)) drop-shadow(-5px  5px 10px rgba(var(--accent-rgb), .6)); }
  50%  { filter: drop-shadow(-4px  0px 2px #fff) drop-shadow(-5px  0px 6px var(--accent)) drop-shadow(-6px  0px 10px rgba(var(--accent-rgb), .6)); }
  62.5%{ filter: drop-shadow(-3px -3px 2px #fff) drop-shadow(-4px -4px 6px var(--accent)) drop-shadow(-5px -5px 10px rgba(var(--accent-rgb), .6)); }
  75%  { filter: drop-shadow( 0px -4px 2px #fff) drop-shadow( 0px -5px 6px var(--accent)) drop-shadow( 0px -6px 10px rgba(var(--accent-rgb), .6)); }
  87.5%{ filter: drop-shadow( 3px -3px 2px #fff) drop-shadow( 4px -4px 6px var(--accent)) drop-shadow( 5px -5px 10px rgba(var(--accent-rgb), .6)); }
  100% { filter: drop-shadow( 4px  0px 2px #fff) drop-shadow( 5px  0px 6px var(--accent)) drop-shadow( 6px  0px 10px rgba(var(--accent-rgb), .6)); }
}

/* ─────────────────────────────────────────────────────
   #18 — Light Ribbon
   A wide soft glow sweeps around the logo like a
   ribbon of light. Uses a larger blur radius and
   slower pace for a smoother, more cinematic feel.
   ───────────────────────────────────────────────────── */
.anim-ribbon img {
  animation: light-ribbon 3s ease-in-out infinite;
}
@keyframes light-ribbon {
  0%   { filter: drop-shadow( 6px  0px 4px rgba(255,255,255,.7)) drop-shadow( 8px  0px 14px var(--accent)); }
  16%  { filter: drop-shadow( 3px  5px 4px rgba(255,255,255,.7)) drop-shadow( 4px  7px 14px var(--online)); }
  33%  { filter: drop-shadow(-4px  5px 4px rgba(255,255,255,.7)) drop-shadow(-5px  7px 14px var(--accent)); }
  50%  { filter: drop-shadow(-6px  0px 4px rgba(255,255,255,.7)) drop-shadow(-8px  0px 14px var(--online)); }
  66%  { filter: drop-shadow(-3px -5px 4px rgba(255,255,255,.7)) drop-shadow(-4px -7px 14px var(--accent)); }
  83%  { filter: drop-shadow( 4px -5px 4px rgba(255,255,255,.7)) drop-shadow( 5px -7px 14px var(--online)); }
  100% { filter: drop-shadow( 6px  0px 4px rgba(255,255,255,.7)) drop-shadow( 8px  0px 14px var(--accent)); }
}

/* ─────────────────────────────────────────────────────
   #19 — Multi-Photon Swarm
   Three photons orbit at different speeds and offsets,
   creating a swirling light effect around the edges.
   Uses three stacked images with staggered animations.
   ───────────────────────────────────────────────────── */
.anim-swarm {
  display: grid !important;
  place-items: center;
}
.anim-swarm img {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: static !important;
}
.anim-swarm img.swarm-a {
  animation: swarm-a 1.8s linear infinite;
  z-index: 3 !important;
}
.anim-swarm img.swarm-b {
  animation: swarm-b 2.4s linear infinite;
  opacity: .6;
  z-index: 2 !important;
}
.anim-swarm img.swarm-c {
  animation: swarm-c 3.2s linear infinite;
  opacity: .35;
  z-index: 1 !important;
}
@keyframes swarm-a {
  0%   { filter: drop-shadow( 4px  0px 2px #fff) drop-shadow( 5px  0px 8px var(--accent)); }
  25%  { filter: drop-shadow( 0px  4px 2px #fff) drop-shadow( 0px  5px 8px var(--accent)); }
  50%  { filter: drop-shadow(-4px  0px 2px #fff) drop-shadow(-5px  0px 8px var(--accent)); }
  75%  { filter: drop-shadow( 0px -4px 2px #fff) drop-shadow( 0px -5px 8px var(--accent)); }
  100% { filter: drop-shadow( 4px  0px 2px #fff) drop-shadow( 5px  0px 8px var(--accent)); }
}
@keyframes swarm-b {
  0%   { filter: drop-shadow(-3px -3px 2px #fff) drop-shadow(-4px -4px 8px var(--online)); }
  25%  { filter: drop-shadow( 3px -3px 2px #fff) drop-shadow( 4px -4px 8px var(--online)); }
  50%  { filter: drop-shadow( 3px  3px 2px #fff) drop-shadow( 4px  4px 8px var(--online)); }
  75%  { filter: drop-shadow(-3px  3px 2px #fff) drop-shadow(-4px  4px 8px var(--online)); }
  100% { filter: drop-shadow(-3px -3px 2px #fff) drop-shadow(-4px -4px 8px var(--online)); }
}
@keyframes swarm-c {
  0%   { filter: drop-shadow( 0px -4px 3px #fff) drop-shadow( 0px -6px 10px var(--purple)); }
  33%  { filter: drop-shadow( 4px  2px 3px #fff) drop-shadow( 5px  3px 10px var(--purple)); }
  66%  { filter: drop-shadow(-4px  2px 3px #fff) drop-shadow(-5px  3px 10px var(--purple)); }
  100% { filter: drop-shadow( 0px -4px 3px #fff) drop-shadow( 0px -6px 10px var(--purple)); }
}

/* ═════════════════════════════════════════════════════
   ELECTRICITY TRACE ANIMATIONS (#20–#22)
   Electric arcs / Tesla coil effects tracing the logo
   edges. Uses rapid, jittery drop-shadow offsets with
   bright white cores and colored outer glow. The key
   difference from light: erratic timing, flicker,
   and sharp color spikes.
   ═════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   #20 — Arc Crackle
   A single electric arc jumps erratically around the
   logo edges. Sharp, fast shadow offset changes with
   a bright white core + blue outer glow. Flickers off
   briefly to simulate electrical discharge.
   ───────────────────────────────────────────────────── */
.anim-arc img {
  animation: arc-crackle .8s steps(1) infinite;
}
@keyframes arc-crackle {
  0%    { filter: drop-shadow( 3px -2px 1px #fff) drop-shadow( 4px -3px 4px #4dc9f6) drop-shadow( 5px -4px 8px rgba(0,174,239,.7)); }
  10%   { filter: drop-shadow(-4px  1px 1px #fff) drop-shadow(-5px  2px 5px #4dc9f6) drop-shadow(-6px  3px 9px rgba(0,174,239,.8)); }
  20%   { filter: drop-shadow( 1px  4px 1px #fff) drop-shadow( 2px  5px 4px #4dc9f6) drop-shadow( 3px  6px 8px rgba(0,174,239,.6)); }
  30%   { filter: none; }
  35%   { filter: drop-shadow(-3px -3px 1px #fff) drop-shadow(-4px -4px 6px #4dc9f6) drop-shadow(-5px -5px 12px rgba(0,174,239,.9)); }
  45%   { filter: drop-shadow( 4px  2px 1px #fff) drop-shadow( 5px  3px 4px #4dc9f6) drop-shadow( 6px  4px 8px rgba(0,174,239,.7)); }
  55%   { filter: drop-shadow(-2px  4px 1px #fff) drop-shadow(-3px  5px 5px #4dc9f6) drop-shadow(-4px  6px 10px rgba(0,174,239,.8)); }
  65%   { filter: none; }
  70%   { filter: drop-shadow( 2px -4px 1px #fff) drop-shadow( 3px -5px 5px #4dc9f6) drop-shadow( 4px -6px 10px rgba(0,174,239,.8)); }
  80%   { filter: drop-shadow(-4px -1px 1px #fff) drop-shadow(-5px -2px 4px #4dc9f6) drop-shadow(-6px -3px 8px rgba(0,174,239,.7)); }
  90%   { filter: drop-shadow( 3px  3px 2px #fff) drop-shadow( 4px  4px 6px #4dc9f6) drop-shadow( 5px  5px 12px rgba(0,174,239,.9)); }
  100%  { filter: drop-shadow( 3px -2px 1px #fff) drop-shadow( 4px -3px 4px #4dc9f6) drop-shadow( 5px -4px 8px rgba(0,174,239,.7)); }
}

/* ─────────────────────────────────────────────────────
   #21 — Tesla Coil
   Rapid pulsing electrical discharge — the glow
   expands and contracts sharply around all edges
   simultaneously, like a Tesla coil energizing.
   Alternates between tight and wide discharge.
   ───────────────────────────────────────────────────── */
.anim-tesla img {
  animation: tesla-coil .6s ease-in-out infinite alternate;
}
@keyframes tesla-coil {
  0%   { filter:
           drop-shadow( 2px  0px 1px #fff)
           drop-shadow(-2px  0px 1px #fff)
           drop-shadow( 0px  2px 1px #fff)
           drop-shadow( 0px -2px 1px #fff)
           drop-shadow( 0px  0px 3px #4dc9f6)
           drop-shadow( 0px  0px 6px rgba(0,174,239,.4)); }
  50%  { filter:
           drop-shadow( 4px  2px 2px #fff)
           drop-shadow(-4px -2px 2px #fff)
           drop-shadow( 2px -4px 2px #fff)
           drop-shadow(-2px  4px 2px #fff)
           drop-shadow( 0px  0px 8px #4dc9f6)
           drop-shadow( 0px  0px 18px rgba(0,174,239,.8)); }
  100% { filter:
           drop-shadow( 1px  1px 1px #fff)
           drop-shadow(-1px -1px 1px #fff)
           drop-shadow( 0px  0px 2px #fff)
           drop-shadow( 0px  0px 4px #4dc9f6)
           drop-shadow( 0px  0px 10px rgba(77,201,246,.6))
           drop-shadow( 0px  0px 20px rgba(0,174,239,.5)); }
}

/* ─────────────────────────────────────────────────────
   #22 — Storm Surge
   Electrical storm — multiple arcs fire in different
   directions simultaneously with occasional bright
   flashes that illuminate all edges at once. Uses
   three stacked images with offset timing.
   ───────────────────────────────────────────────────── */
.anim-storm {
  display: grid !important;
  place-items: center;
}
.anim-storm img {
  grid-row: 1 !important;
  grid-column: 1 !important;
  position: static !important;
}
.anim-storm img.storm-a {
  animation: storm-a .7s steps(1) infinite;
  z-index: 3 !important;
}
.anim-storm img.storm-b {
  animation: storm-b .9s steps(1) infinite;
  opacity: .5;
  z-index: 2 !important;
}
.anim-storm img.storm-c {
  animation: storm-c 1.1s steps(1) infinite;
  opacity: .3;
  z-index: 1 !important;
}
@keyframes storm-a {
  0%   { filter: drop-shadow( 5px -2px 1px #fff) drop-shadow( 6px -3px 6px #4dc9f6) drop-shadow( 7px -4px 12px rgba(0,174,239,.8)); }
  15%  { filter: none; }
  20%  { filter: drop-shadow(-4px  3px 1px #fff) drop-shadow(-5px  4px 6px #4dc9f6); }
  40%  { filter: drop-shadow( 2px  5px 2px #fff) drop-shadow( 3px  6px 8px #4dc9f6) drop-shadow( 4px  7px 14px rgba(0,174,239,.9)); }
  55%  { filter: none; }
  60%  { filter: drop-shadow(-3px -4px 1px #fff) drop-shadow(-4px -5px 5px #4dc9f6); }
  80%  { filter: drop-shadow( 4px  1px 2px #fff) drop-shadow( 5px  2px 8px #4dc9f6) drop-shadow( 6px  3px 14px rgba(0,174,239,.8)); }
  90%  { filter: none; }
  100% { filter: drop-shadow( 5px -2px 1px #fff) drop-shadow( 6px -3px 6px #4dc9f6) drop-shadow( 7px -4px 12px rgba(0,174,239,.8)); }
}
@keyframes storm-b {
  0%   { filter: drop-shadow(-3px  4px 1px #fff) drop-shadow(-4px  5px 6px var(--online)); }
  20%  { filter: drop-shadow( 4px -3px 2px #fff) drop-shadow( 5px -4px 8px var(--online)) drop-shadow( 6px -5px 14px rgba(var(--online-rgb),.8)); }
  35%  { filter: none; }
  45%  { filter: drop-shadow(-5px -2px 1px #fff) drop-shadow(-6px -3px 6px var(--online)); }
  65%  { filter: drop-shadow( 2px  5px 2px #fff) drop-shadow( 3px  6px 8px var(--online)) drop-shadow( 4px  7px 14px rgba(var(--online-rgb),.9)); }
  80%  { filter: none; }
  100% { filter: drop-shadow(-3px  4px 1px #fff) drop-shadow(-4px  5px 6px var(--online)); }
}
@keyframes storm-c {
  0%   { filter: drop-shadow( 0px -5px 2px #fff) drop-shadow( 0px -6px 8px var(--purple)); }
  25%  { filter: none; }
  35%  { filter: drop-shadow( 5px  0px 2px #fff) drop-shadow( 6px  0px 8px var(--purple)) drop-shadow( 7px  0px 16px rgba(168,85,247,.8)); }
  50%  { filter: drop-shadow(-5px  0px 1px #fff) drop-shadow(-6px  0px 6px var(--purple)); }
  70%  { filter: none; }
  80%  { filter: drop-shadow( 0px  5px 2px #fff) drop-shadow( 0px  6px 10px var(--purple)) drop-shadow( 0px  7px 18px rgba(168,85,247,.9)); }
  95%  { filter: none; }
  100% { filter: drop-shadow( 0px -5px 2px #fff) drop-shadow( 0px -6px 8px var(--purple)); }
}

/* ═══════════════════════════════════════════════════════
   METALLIC ANIMATIONS (#23–#25)
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────
   #23 — Metallic Light Sweep
   A diagonal bright highlight sweeps across the logo
   like sunlight glinting off polished chrome. Uses a
   bright overlay copy with an animated clip-path to
   reveal and hide the highlight as it passes.
   ───────────────────────────────────────────────────── */
.anim-metal-sweep {
  overflow: hidden;
}
.anim-metal-sweep img {
  filter: brightness(1) contrast(1.1);
}
/* Position/z-index/centering handled by centralized overlay block. */
.anim-metal-sweep .metal-sweep-copy {
  width: 64px;
  height: 64px;
  filter: brightness(2.5) contrast(1.5) saturate(0.3);
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  animation: metal-sweep 3s ease-in-out infinite;
}
@keyframes metal-sweep {
  0%   { clip-path: polygon(-20% -20%, -10% -20%, -30% 120%, -20% 120%); }
  40%  { clip-path: polygon(110% -20%, 130% -20%, 110% 120%, 120% 120%); }
  100% { clip-path: polygon(110% -20%, 130% -20%, 110% 120%, 120% 120%); }
}

/* ─────────────────────────────────────────────────────
   #24 — Liquid Mercury
   The logo pulses with a mercury-like silver shimmer —
   high contrast and desaturation create a chrome look,
   with brightness pulsing to simulate liquid metal
   catching and losing light. Drop-shadow adds a cool
   steel-blue reflection underneath.
   ───────────────────────────────────────────────────── */
.anim-mercury img {
  animation: mercury-pulse 2.4s ease-in-out infinite;
}
@keyframes mercury-pulse {
  0%   { filter: brightness(1.0) contrast(1.3) saturate(0.2) drop-shadow(0 0 4px rgba(180,200,220,.4)); }
  15%  { filter: brightness(1.8) contrast(1.6) saturate(0.0) drop-shadow(0 0 8px rgba(200,220,240,.7)); }
  30%  { filter: brightness(1.1) contrast(1.4) saturate(0.15) drop-shadow(0 0 3px rgba(180,200,220,.3)); }
  50%  { filter: brightness(2.0) contrast(1.5) saturate(0.05) drop-shadow(0 0 12px rgba(220,230,245,.8)); }
  65%  { filter: brightness(1.2) contrast(1.3) saturate(0.1) drop-shadow(0 0 5px rgba(180,200,220,.5)); }
  80%  { filter: brightness(1.6) contrast(1.7) saturate(0.0) drop-shadow(0 0 10px rgba(200,215,235,.7)); }
  100% { filter: brightness(1.0) contrast(1.3) saturate(0.2) drop-shadow(0 0 4px rgba(180,200,220,.4)); }
}

/* ─────────────────────────────────────────────────────
   #25 — Forge Glow
   The logo edges cycle through heated-metal colours:
   dark cherry red → orange → white-hot → cool steel
   blue, like metal being drawn from a forge. Uses
   drop-shadow colour transitions with brightness
   shifts to sell the temperature illusion.
   ───────────────────────────────────────────────────── */
.anim-forge img {
  animation: forge-glow 4s ease-in-out infinite;
}
@keyframes forge-glow {
  0%   { filter: brightness(0.9) drop-shadow(0 0 3px #4a1010) drop-shadow(0 0 8px #6b1a1a) drop-shadow(0 0 14px rgba(120,20,20,.6)); }
  15%  { filter: brightness(1.0) drop-shadow(0 0 4px #8b2500) drop-shadow(0 0 10px #c0440a) drop-shadow(0 0 18px rgba(200,80,10,.7)); }
  30%  { filter: brightness(1.1) drop-shadow(0 0 5px #d47a00) drop-shadow(0 0 12px #f0a030) drop-shadow(0 0 20px rgba(240,160,48,.7)); }
  45%  { filter: brightness(1.4) drop-shadow(0 0 6px #fff0c0) drop-shadow(0 0 14px #ffe090) drop-shadow(0 0 24px rgba(255,230,160,.8)); }
  55%  { filter: brightness(1.6) drop-shadow(0 0 6px #ffffff) drop-shadow(0 0 12px #ffeedd) drop-shadow(0 0 22px rgba(255,240,220,.9)); }
  70%  { filter: brightness(1.2) drop-shadow(0 0 5px #b0c4de) drop-shadow(0 0 10px #8aa8c8) drop-shadow(0 0 18px rgba(140,170,200,.6)); }
  85%  { filter: brightness(1.0) drop-shadow(0 0 4px #6a7d8e) drop-shadow(0 0 8px #4a6070) drop-shadow(0 0 14px rgba(80,100,120,.5)); }
  100% { filter: brightness(0.9) drop-shadow(0 0 3px #4a1010) drop-shadow(0 0 8px #6b1a1a) drop-shadow(0 0 14px rgba(120,20,20,.6)); }
}

/* ─────────────────────────────────────────────────────
   #26 — Brushed Steel
   Subtle horizontal streaks shimmer back and forth
   like brushed stainless steel under ambient light.
   Uses a narrow horizontal clip-path band on a bright
   overlay copy, sweeping vertically across the logo.
   ───────────────────────────────────────────────────── */
.anim-brushed {
  overflow: hidden;
}
.anim-brushed img {
  filter: contrast(1.15) saturate(0.4) brightness(0.95);
}
/* Position/z-index/centering handled by centralized overlay block. */
.anim-brushed .brushed-copy {
  width: 64px;
  height: 64px;
  filter: brightness(2.2) contrast(1.4) saturate(0.1);
  clip-path: polygon(0% 0%, 100% 0%, 100% 6%, 0% 6%);
  animation: brushed-sweep 2.8s ease-in-out infinite;
}
@keyframes brushed-sweep {
  0%   { clip-path: polygon(0% -10%, 100% -10%, 100% -4%, 0% -4%); opacity: 0.7; }
  25%  { opacity: 1; }
  50%  { clip-path: polygon(0% 110%, 100% 110%, 100% 116%, 0% 116%); opacity: 0.7; }
  75%  { opacity: 1; }
  100% { clip-path: polygon(0% -10%, 100% -10%, 100% -4%, 0% -4%); opacity: 0.7; }
}

/* ─────────────────────────────────────────────────────
   #27 — Chrome Flip
   The logo briefly inverts to a bright negative — like
   a flash of chrome reflection — then snaps back. A
   steel-blue drop-shadow lingers during the transition.
   ───────────────────────────────────────────────────── */
.anim-chrome-flip img {
  animation: chrome-flip 3.5s ease-in-out infinite;
}
@keyframes chrome-flip {
  0%   { filter: brightness(1) contrast(1.1) saturate(0.5) invert(0)   drop-shadow(0 0 0px transparent); }
  18%  { filter: brightness(1) contrast(1.1) saturate(0.5) invert(0)   drop-shadow(0 0 2px rgba(160,185,210,.3)); }
  22%  { filter: brightness(1.8) contrast(1.6) saturate(0) invert(0.85) drop-shadow(0 0 10px rgba(200,220,240,.8)); }
  28%  { filter: brightness(1.8) contrast(1.6) saturate(0) invert(0.85) drop-shadow(0 0 10px rgba(200,220,240,.8)); }
  35%  { filter: brightness(1) contrast(1.1) saturate(0.5) invert(0)   drop-shadow(0 0 4px rgba(160,185,210,.4)); }
  100% { filter: brightness(1) contrast(1.1) saturate(0.5) invert(0)   drop-shadow(0 0 0px transparent); }
}

/* ─────────────────────────────────────────────────────
   #28 — Molten Edge
   A warm golden glow orbits the logo perimeter like
   molten metal flowing around a mold. Uses animated
   drop-shadow offsets that rotate around the logo with
   shifting gold/copper/white-hot colours.
   ───────────────────────────────────────────────────── */
.anim-molten img {
  animation: molten-edge 3s linear infinite;
}
@keyframes molten-edge {
  0%    { filter: brightness(1.05) drop-shadow( 0px -5px 4px #d4a020) drop-shadow( 0px -6px 10px rgba(220,160,30,.6)); }
  12.5% { filter: brightness(1.1)  drop-shadow( 4px -4px 4px #e8b030) drop-shadow( 5px -5px 10px rgba(240,180,40,.7)); }
  25%   { filter: brightness(1.15) drop-shadow( 5px  0px 5px #f0c848) drop-shadow( 6px  0px 12px rgba(250,200,60,.7)); }
  37.5% { filter: brightness(1.2)  drop-shadow( 4px  4px 5px #ffe070) drop-shadow( 5px  5px 12px rgba(255,225,100,.8)); }
  50%   { filter: brightness(1.15) drop-shadow( 0px  5px 4px #f0c848) drop-shadow( 0px  6px 10px rgba(250,200,60,.7)); }
  62.5% { filter: brightness(1.1)  drop-shadow(-4px  4px 4px #e0a830) drop-shadow(-5px  5px 10px rgba(230,170,40,.6)); }
  75%   { filter: brightness(1.05) drop-shadow(-5px  0px 5px #cc9020) drop-shadow(-6px  0px 12px rgba(210,145,30,.6)); }
  87.5% { filter: brightness(1.1)  drop-shadow(-4px -4px 4px #d4a020) drop-shadow(-5px -5px 10px rgba(220,160,30,.6)); }
  100%  { filter: brightness(1.05) drop-shadow( 0px -5px 4px #d4a020) drop-shadow( 0px -6px 10px rgba(220,160,30,.6)); }
}