/* ===========================================
   Chris's Fitness Dashboard — neon-effects.css
   Glow + motion layer (revision 3)
   Rules: static glows always on; every animation and transition lives inside
   @media (prefers-reduced-motion: no-preference); animated layers are
   composited (transform / opacity only, will-change, no 200 % oversize).
   =========================================== */

/* ---------- Static backdrop: grid + ambient glow ---------- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(0, 240, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, 0.035) 1px, transparent 1px);
  background-size: 50px 50px;
  mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 30%, transparent 85%);
}
body::after {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, rgba(0, 240, 255, 0.10) 0%, transparent 38%),
    radial-gradient(circle at 82% 72%, rgba(255, 43, 214, 0.08) 0%, transparent 40%),
    radial-gradient(circle at 55% 100%, rgba(176, 38, 255, 0.07) 0%, transparent 40%);
  opacity: 0.9;
}

/* ---------- Static glows (always on) ---------- */
.header-title { text-shadow: 0 0 40px rgba(0, 240, 255, 0.3); }
.day-card-type { box-shadow: 0 0 15px var(--day-accent, var(--neon-cyan)); }
.day-pill.active { text-shadow: 0 0 12px rgba(0, 240, 255, 0.6); }
.session-tag { box-shadow: 0 0 12px rgba(0, 240, 255, 0.15); }
.session-tag.evening { box-shadow: 0 0 12px rgba(255, 43, 214, 0.2); }
.two-panel.lg { box-shadow: 0 0 24px rgba(0, 240, 255, 0.18); }
.pip.is-done { text-shadow: none; }
.btn-primary, .fab { background-size: 140% 140%; }

/* Neon scrollbar + selection */
::selection { background: var(--neon-cyan); color: var(--bg-primary); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-secondary); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-cyan), var(--neon-magenta)); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-magenta), var(--neon-cyan)); }

/* Title glitch layer (drawn from data-text; animated below) */
.section-title::before {
  content: attr(data-text);
  position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%;
  color: var(--neon-magenta); -webkit-text-fill-color: var(--neon-magenta);
  opacity: 0; pointer-events: none; filter: blur(2px);
}

/* Signature: conic-gradient border on the TODAY card and the active session exercise (static ring; spins below) */
@property --ring-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.day-card.is-today::after,
.s-ex.is-active::after {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ring-angle, 0deg), var(--neon-cyan), var(--neon-magenta), var(--neon-purple), var(--neon-green), var(--neon-cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.55));
}
.s-ex.is-active { border-color: transparent; }

/* Hover glows (static shadows; the easing lives in the motion block) */
.day-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.08); }
.dc-gym:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.15); }
.dc-home:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(57, 255, 20, 0.15); }
.dc-zwift:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(176, 38, 255, 0.15); }
.dc-ride:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 140, 0, 0.15); }
.dc-recover:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 30px rgba(255, 43, 214, 0.15); }
.gloss-item:hover, .shop-category:hover, .wx-day:hover { box-shadow: 0 0 22px rgba(0, 240, 255, 0.12); }

/* ---------- Motion (only when the user has not asked for reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
  /* Ambient drift: a small transform/opacity animation on a fixed, composited layer */
  body::after { will-change: transform, opacity; animation: ambient 26s ease-in-out infinite; }
  @keyframes ambient {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
    50% { transform: translate3d(-2%, 1.5%, 0) scale(1.05); opacity: 1; }
  }

  /* Header scan line */
  .main-header::after {
    content: '';
    position: absolute; inset-block-end: 0; inset-inline-start: 0; inline-size: 100%; block-size: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 240, 255, 0.5), rgba(255, 43, 214, 0.5), transparent);
    will-change: transform;
    animation: scan-line 8s linear infinite;
  }
  @keyframes scan-line {
    from { transform: translateX(-100%); }
    to { transform: translateX(100%); }
  }

  /* Active pill pulse */
  .day-pill.active::after {
    content: '';
    position: absolute; inset: -1px; z-index: -1; border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta));
    opacity: 0.4; filter: blur(8px);
    animation: pulse-glow 3s ease-in-out infinite;
  }
  @keyframes pulse-glow {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.6; }
  }

  /* Metric value flicker */
  .metric-value.value-cyan, .metric-value.value-magenta, .metric-value.value-green { animation: subtle-flicker 6s ease-in-out infinite; }
  @keyframes subtle-flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.92; }
  }

  /* Section title glitch */
  .section-title::before { transform: translate(2px, 0); animation: glitch 8s ease-in-out infinite; }
  @keyframes glitch {
    0%, 96%, 100% { opacity: 0; transform: translate(0, 0); }
    97% { opacity: 0.6; transform: translate(-2px, 0); }
    98% { opacity: 0.6; transform: translate(2px, 0); }
    99% { opacity: 0; }
  }

  /* Signature spin on the conic border */
  .day-card.is-today::after, .s-ex.is-active::after { animation: ring-spin 6s linear infinite; }
  @keyframes ring-spin {
    to { --ring-angle: 360deg; }
  }

  /* Fade-up stagger on cards */
  .day-card, .metric-card, .shop-category, .gloss-item, .wx-day { animation: fade-up 0.6s ease-out both; }
  .metric-card:nth-child(2), .wx-day:nth-child(2) { animation-delay: 0.05s; }
  .metric-card:nth-child(3), .wx-day:nth-child(3) { animation-delay: 0.1s; }
  .metric-card:nth-child(4), .wx-day:nth-child(4) { animation-delay: 0.15s; }
  .metric-card:nth-child(5), .wx-day:nth-child(5) { animation-delay: 0.2s; }
  .metric-card:nth-child(6), .wx-day:nth-child(6) { animation-delay: 0.25s; }
  .wx-day:nth-child(7) { animation-delay: 0.3s; }
  .day-card:nth-of-type(2) { animation-delay: 0.08s; }
  .day-card:nth-of-type(3) { animation-delay: 0.16s; }
  .day-card:nth-of-type(4) { animation-delay: 0.24s; }
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Rest-over flash in session mode */
  .dialog.flash.animate { animation: flash 0.7s ease-out; }
  @keyframes flash {
    from { background-color: rgba(57, 255, 20, 0.35); }
    to { background-color: transparent; }
  }

  /* Easing for hovers and state changes */
  .day-pill, .metric-card, .card, .day-card, .wx-day, .btn, .fab, .shop-category, .gloss-item, .recipe-toggle, .scale-row, .meal-row, .info-box, .shop-list li { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.3s ease, background-color 0.25s ease, color 0.2s ease, opacity 0.25s ease; }
  .day-pill:hover, .metric-card:hover, .wx-day:hover { transform: translateY(-2px); }
  .day-card:hover { transform: translateY(-2px); }
  .shop-list input[type='checkbox'], .shop-list input[type='checkbox']::before { transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease; }
  .ring-fg { transition: stroke-dashoffset 0.2s linear; }
  .pip { transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
  .btn-primary:hover, .fab:hover { background-position: 100% 100%; transition: background-position 0.4s ease, filter 0.2s ease; }
}