/* ==========================================================================
   EFFEKTER — allt som rör sig. Gäller bara när <body> har klassen .fx
   (Admin → Inställningar → Effekter) och besökaren inte bett om mindre
   rörelse i sitt operativsystem.
   ========================================================================== */

/* ---- Element som glider in vid scroll ------------------------------- */
.fx [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.fx [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Hero: rubrikraderna sveper upp, pulslinjen ritas ---------------- */
.fx .hero__line > span { transform: translateY(105%) skewY(4deg); animation: line-up 1.1s var(--ease-out) forwards; animation-delay: calc(var(--i) * 130ms + 150ms); }
@keyframes line-up { to { transform: none; } }

.fx .hero__pulse path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: draw 2.6s var(--ease-in-out) .5s forwards, ekg-glow calc(var(--beat) * 2) ease-in-out 3.1s infinite;
}
.fx .hero__pulse--flat path { animation-duration: 1.8s, 1.6s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes ekg-glow { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }

/* ---- Knapp som slår som ett hjärta ---------------------------------- */
.fx .btn--heartbeat::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: heartbeat-ring calc(var(--beat) * 1.6) ease-out infinite;
  pointer-events: none;
}
@keyframes heartbeat-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 65%, transparent); }
  14%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent); }
  15%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  32%  { box-shadow: 0 0 0 16px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 16px transparent; }
}

/* ---- Kort som lyser där muspekaren är -------------------------------- */
.glow-card { position: relative; }
.fx .glow-card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity var(--dur);
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 16%, transparent), transparent 45%);
  border: 1px solid transparent;
  -webkit-mask: linear-gradient(#000 0 0);
}
.fx .glow-card::before {   /* glödande kant */
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  padding: 1px;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity var(--dur);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--accent), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.fx .glow-card:hover::after, .fx .glow-card:hover::before { opacity: 1; }
.fx .price-card--highlight::before { opacity: 0; }

/* Det framlyfta priskortet: en roterande glöd runt kanten */
.fx .price-card--highlight { box-shadow: 0 30px 80px -30px color-mix(in srgb, var(--accent) 55%, transparent); }
@property --spin { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.fx .price-card--highlight {
  background: linear-gradient(var(--surface), var(--surface)) padding-box,
              conic-gradient(from var(--spin), var(--accent), var(--accent-2), var(--pulse), var(--accent)) border-box;
  animation: spin 6s linear infinite;
}
@keyframes spin { to { --spin: 360deg; } }

/* ---- Pulsmätaren: stiger när man scrollar ---------------------------- */
.pulse-meter {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex; align-items: center; gap: .45rem;
  padding: .5rem .85rem .5rem .65rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid var(--line-strong);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur), transform var(--dur) var(--ease-out), border-color var(--dur);
}
.pulse-meter.is-visible { opacity: 1; transform: none; }
.pulse-meter.is-max { border-color: var(--accent); box-shadow: var(--glow); }
.pulse-meter__heart { width: 20px; height: 20px; fill: var(--accent); stroke: none; animation: heart var(--beat) ease-in-out infinite; filter: drop-shadow(0 0 6px var(--accent)); }
.pulse-meter__bpm { font-family: var(--font-display); font-weight: 800; font-style: italic; font-size: 1.35rem; line-height: 1; min-width: 2.2ch; text-align: right; }
.pulse-meter__unit { font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--text-muted); }
@keyframes heart {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.28); }
  30% { transform: scale(1); }
  45% { transform: scale(1.16); }
  60% { transform: scale(1); }
}

/* ---- Stats: siffror räknas upp (JS), lite studs när de landar -------- */
.fx .stat.is-in .stat__value { animation: settle .8s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 90ms + .2s); }
@keyframes settle { 0% { letter-spacing: .08em; filter: blur(4px); } 100% { letter-spacing: 0; filter: none; } }

/* ---- Utan effekter --------------------------------------------------- */
.no-fx .marquee__track { animation: none; }
.no-fx .hero__pulse path { stroke-dasharray: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .fx [data-reveal] { opacity: 1; transform: none; }
  .fx .hero__line > span { transform: none; }
  .fx .hero__pulse path { stroke-dashoffset: 0; }
  .marquee__track { animation: none; }
  .pulse-meter { display: none; }
}

/* Toppbildens text animeras direkt när sidan laddas — den ska inte vänta på scroll */
.fx .hero [data-reveal] { transition: none; animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 130ms + 350ms); }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }