/* ============================================================
 * POWALIFTA hero-fx v2 — dramatic motion layer for the hero.
 * Cursor spotlight, flowing gradient mesh, big particle field,
 * headline shimmer, dot pulse, accent shake, chart card glint.
 * ============================================================ */

:root {
  --fx-cursor-x: 50%;
  --fx-cursor-y: 50%;
}

.fx-gradient-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.55;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 45, 63, 0.35) 0%, transparent 35%),
    radial-gradient(circle at 80% 20%, rgba(183, 22, 41, 0.30) 0%, transparent 40%),
    radial-gradient(circle at 60% 80%, rgba(255, 45, 63, 0.22) 0%, transparent 45%),
    radial-gradient(circle at 30% 70%, rgba(120, 12, 22, 0.30) 0%, transparent 40%);
  animation: fxMeshFlow 24s ease-in-out infinite alternate;
  filter: blur(40px);
  mix-blend-mode: screen;
}
@keyframes fxMeshFlow {
  0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
  25%  { transform: translate(3%, -2%) scale(1.05) rotate(2deg); }
  50%  { transform: translate(-2%, 3%) scale(1.1) rotate(-2deg); }
  75%  { transform: translate(2%, 2%) scale(1.03) rotate(1deg); }
  100% { transform: translate(-3%, -3%) scale(1.07) rotate(-1deg); }
}

.fx-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle 360px at var(--fx-cursor-x) var(--fx-cursor-y), rgba(255, 45, 63, 0.18) 0%, rgba(255, 45, 63, 0.06) 35%, transparent 70%);
  transition: background 0.3s ease-out;
  mix-blend-mode: screen;
}

.fx-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: 0 0;
  animation: fxGridDrift 28s linear infinite;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 90%);
}
@keyframes fxGridDrift {
  from { background-position: 0 0; }
  to   { background-position: 56px 56px; }
}

.fx-dust {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.fx-dust span {
  position: absolute;
  border-radius: 50%;
  bottom: -10px;
  opacity: 0;
  animation: fxDustDrift linear infinite;
  will-change: transform, opacity;
}
.fx-dust span.dust-white {
  background: #ffffff;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.6);
}
.fx-dust span.dust-red {
  background: #ff2d3f;
  box-shadow: 0 0 10px rgba(255, 45, 63, 0.7);
}
@keyframes fxDustDrift {
  0%   { opacity: 0; transform: translate3d(0, 0, 0); }
  8%   { opacity: 0.9; }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: translate3d(80px, -1000px, 0); }
}
:root[data-theme='light'] .fx-dust span.dust-white { background: #1a1a1c; box-shadow: none; opacity: 0; }

.hero .eyebrow .dot {
  position: relative;
  box-shadow: 0 0 12px rgba(255, 45, 63, 0.9);
  animation: fxDotGlow 1.6s ease-in-out infinite;
}
@keyframes fxDotGlow {
  0%, 100% { box-shadow: 0 0 12px rgba(255, 45, 63, 0.9); transform: scale(1); }
  50%      { box-shadow: 0 0 24px rgba(255, 45, 63, 1); transform: scale(1.25); }
}
.hero .eyebrow .dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid #ff2d3f;
  opacity: 0;
  animation: fxRingPulse 1.6s ease-out infinite;
  pointer-events: none;
}
.hero .eyebrow .dot::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid #ff2d3f;
  opacity: 0;
  animation: fxRingPulse 1.6s 0.4s ease-out infinite;
  pointer-events: none;
}
@keyframes fxRingPulse {
  0%   { transform: scale(0.7); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: scale(3.5); opacity: 0; }
}

.hero h1 { position: relative; }
.hero h1::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
  background-size: 250% 100%;
  background-position: 200% 0;
  mix-blend-mode: overlay;
  pointer-events: none;
  animation: fxShimmer 3.5s 0.8s ease-out forwards;
}
@keyframes fxShimmer {
  0%      { background-position: 200% 0; }
  35%     { background-position: -200% 0; }
  100%    { background-position: -200% 0; }
}

.hero h1 .accent.tilt {
  animation: fxAccentLand 0.55s 0.85s cubic-bezier(0.36, 0.07, 0.19, 0.97) both, fxAccentBreathe 4s 1.5s ease-in-out infinite;
  transform-origin: center;
  display: inline-block;
}
@keyframes fxAccentLand {
  0%   { transform: translateX(0) scale(1); }
  20%  { transform: translateX(-5px) rotate(-1deg) scale(1.02); }
  40%  { transform: translateX(5px)  rotate(1deg) scale(1.02); }
  60%  { transform: translateX(-3px) rotate(-0.5deg); }
  80%  { transform: translateX(3px)  rotate(0.3deg); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes fxAccentBreathe {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 45, 63, 0)); }
  50%      { filter: drop-shadow(0 0 30px rgba(255, 45, 63, 0.6)); }
}

.hero .hero-preview-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease-out, box-shadow 0.4s ease-out;
}
.hero .hero-preview-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 20px 60px rgba(255, 45, 63, 0.18);
}
.hero .hero-preview-card::before {
  content: '';
  position: absolute;
  inset: -100% -50%;
  background: linear-gradient(115deg, transparent 45%, rgba(255, 45, 63, 0.18) 50%, transparent 55%);
  pointer-events: none;
  animation: fxCardGlint 5s 1.4s ease-out infinite;
}
@keyframes fxCardGlint {
  0%, 65%, 100% { transform: translateX(-30%); opacity: 0; }
  70%           { opacity: 1; }
  90%           { transform: translateX(30%); opacity: 0; }
}

/* The pill stays calm until the comet lands on the peak. Ignition is the
   handoff: it flares red→white (igniting), then settles into the steady green
   "lit" pulse. No standalone timer — the beat is driven by the comet in JS. */
.hero .hp-pill {
  position: relative;
}
.hero .hp-pill.hp-pill-igniting {
  animation: fxPillIgnite 1.1s var(--ease-out-quint) both;
}
@keyframes fxPillIgnite {
  0%   { box-shadow: 0 0 0 0 rgba(255, 45, 63, 0); transform: scale(1); }
  16%  { box-shadow: 0 0 0 10px rgba(255, 45, 63, 0.32), 0 0 26px rgba(255, 45, 63, 0.55); transform: scale(1.07); }
  100% { box-shadow: 0 0 0 0 rgba(78, 216, 132, 0); transform: scale(1); }
}
.hero .hp-pill.hp-pill-lit {
  animation: fxPillPulse 2.4s 0.15s ease-in-out infinite;
}
@keyframes fxPillPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(78, 216, 132, 0); }
  50%      { box-shadow: 0 0 0 8px rgba(78, 216, 132, 0.18); }
}

@media (prefers-reduced-motion: reduce) {
  .fx-grid,
  .fx-dust span,
  .fx-gradient-mesh,
  .fx-spotlight,
  .hero .eyebrow .dot,
  .hero .eyebrow .dot::after,
  .hero .eyebrow .dot::before,
  .hero h1::after,
  .hero h1 .accent.tilt,
  .hero .hero-preview-card::before,
  .hero .hp-pill { animation: none !important; }
  .fx-dust, .fx-spotlight { display: none; }
}