/* ============================================================
   CalorieLab for All — Site v3: Interactivity & Motion Layer
   ADDITIVE ONLY. Loads after site-v2.css, never overrides core
   layout/spacing from styles.css. Adds genuinely new dynamic
   behavior: animated backgrounds, magnetic buttons, smooth FAQ
   accordions, scroll progress, confetti, parallax, tooltips.
   ============================================================ */

/* ── Animated gradient mesh background (hero sections) ──────
   A slow-moving, low-opacity blob gradient behind hero content.
   Purely decorative, positioned absolute so it never affects
   layout or pushes content. */
.hero { position: relative; overflow: hidden; }
.hero::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,212,170,0.10), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(0,168,232,0.09), transparent 40%),
    radial-gradient(circle at 50% 90%, rgba(0,212,170,0.06), transparent 35%);
  animation: meshDrift 18s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
@keyframes meshDrift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-3%, 2%) scale(1.05); }
  100% { transform: translate(2%, -2%) scale(1.02); }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ── Scroll progress bar (top of viewport) ───────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--teal), #00A8E8);
  z-index: 300; transition: width 80ms linear;
  box-shadow: 0 0 8px rgba(0,196,154,0.5);
}

/* ── Magnetic button wrapper (JS moves inner content slightly) ── */
.magnetic-btn { position: relative; display: inline-block; }
.magnetic-btn .btn { transition: transform 120ms var(--ease); display: inline-block; }

/* ── Smooth animated FAQ accordion (replaces instant native toggle) ──
   JS converts <details> height animation; CSS handles the transition. */
.faq-item .faq-a-inner { overflow: hidden; transition: max-height 320ms var(--ease), opacity 280ms var(--ease); }
.faq-item:not([open]) .faq-a-inner { max-height: 0 !important; opacity: 0; }
.faq-item[open] .faq-a-inner { opacity: 1; }
.faq-q::after { transition: transform 280ms var(--ease); }

/* ── Confetti particle (JS spawns/removes these) ─────────── */
.confetti-piece {
  position: fixed; top: -10px; width: 8px; height: 8px; border-radius: 2px;
  pointer-events: none; z-index: 400; opacity: 0.9;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(540deg); opacity: 0; }
}

/* ── Parallax layer (JS sets transform based on scroll) ──── */
.parallax-layer { will-change: transform; }

/* ── Rotating hero tagline ────────────────────────────────── */
.rotate-text-wrap { position: relative; display: inline-block; min-height: 1.2em; vertical-align: bottom; }
.rotate-text {
  position: absolute; left: 0; top: 0; white-space: nowrap;
  opacity: 0; transform: translateY(12px);
  transition: opacity 380ms var(--ease), transform 380ms var(--ease);
  color: var(--teal);
}
.rotate-text.active { position: relative; opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .rotate-text { transition: none; } }

/* ── Live stat counter badges (already handled by count-up JS
   elsewhere; this adds a subtle pulse once a counter finishes) ── */
@keyframes pulseOnce { 0% { transform: scale(1); } 40% { transform: scale(1.08); } 100% { transform: scale(1); } }
.counter-pulse { animation: pulseOnce 420ms var(--ease); }

/* ── Tooltip system (data-tooltip attribute) ─────────────── */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
  background: var(--navy-mid, #111827); color: var(--text); font-size: 0.72rem; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease), transform 160ms var(--ease);
  box-shadow: var(--shadow-md); z-index: 60;
}
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ── Live "breathing" glow on primary CTA (subtle, draws eye) ── */
@keyframes breatheGlow {
  0%, 100% { box-shadow: 0 4px 14px rgba(0,196,154,0.25); }
  50% { box-shadow: 0 4px 22px rgba(0,196,154,0.45); }
}
.btn-breathe { animation: breatheGlow 2.8s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .btn-breathe { animation: none; } }

/* ── Number flip/odometer digit style for spotlight number ── */
.spotlight-num, .goal-val { transition: color 200ms var(--ease); }
.value-updating { color: var(--teal) !important; }

/* ── Cursor-follow spotlight on cards (subtle radial highlight) ── */
.spotlight-hover {
  position: relative;
  overflow: hidden;
}
.spotlight-hover::before {
  content: "";
  position: absolute; width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,0.15), transparent 70%);
  left: var(--mx, 50%); top: var(--my, 50%); transform: translate(-50%, -50%);
  opacity: 0; transition: opacity 220ms var(--ease); pointer-events: none;
}
.spotlight-hover:hover::before { opacity: 1; }

/* ── Skeleton pulse for anything still loading (upgrade to v2's shimmer) ── */
.pulse-loading { animation: pulseLoading 1.3s ease-in-out infinite; }
@keyframes pulseLoading { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

/* ── Icon bounce-in on scroll reveal (used with data-bounce) ── */
.bounce-in { animation: bounceIn 550ms cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@keyframes bounceIn { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .bounce-in { animation: none; } }

/* ── Sticky scroll-aware header shrink (already has is-scrolled hook
   in styles.css/script.js in some builds; this adds a smoother visual) ── */
.site-header { transition: box-shadow 240ms var(--ease), backdrop-filter 240ms var(--ease); }

/* ── Cursor trail dot (opt-in, desktop only, very subtle) ─── */
#cursorGlow {
  position: fixed; width: 24px; height: 24px; border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,170,0.35), transparent 70%);
  pointer-events: none; z-index: 250; transform: translate(-50%, -50%);
  transition: opacity 300ms var(--ease);
  opacity: 0;
  display: none;
}
@media (hover: hover) and (pointer: fine) {
  #cursorGlow.active { display: block; opacity: 1; }
}

/* ── Animated underline for links inside body copy (opt-in) ── */
.animated-link { background-image: linear-gradient(var(--teal), var(--teal)); background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size 240ms var(--ease); }
.animated-link:hover { background-size: 100% 2px; }