/* Effekt-Ebene (FX) — erstehilfe-duderstadt.de. Charakter: Eichsfeld, Fachwerk, Sonnenaufgang, Glut.
   Nur transform/opacity/clip-path/filter, kein Layout-Sprung. Alles hinter prefers-reduced-motion:
   no-preference; ohne JS bleibt die Seite unverändert. Wird NACH styles.css geladen. */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- Seitenübergänge ---------- */
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: fx-head; }
  ::view-transition-old(root) { animation: fx-page-out 200ms cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root) { animation: fx-page-in 420ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes fx-page-out { to { opacity: 0; transform: translateY(-6px); } }
  @keyframes fx-page-in { from { opacity: 0; transform: translateY(14px); } }

  /* ---------- Lese-Fortschritt: Glut-Verlauf ---------- */
  .fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 120; pointer-events: none;
    background: linear-gradient(90deg, #FFB020, #EA580C 55%, #C2410C); transform-origin: 0 50%; transform: scaleX(0);
    box-shadow: 0 0 12px rgba(234,88,12,.6); }

  /* ---------- Hero: Sonnenaufgang, Fachwerk, Lichtkegel, Wort-Auftritt ---------- */
  .fx-hero { position: relative; }
  .fx-hero > .wrap { position: relative; z-index: 1; }
  .page-hero .fx-fachwerk { display: none; }
  .fx-sun { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
  .fx-sun::before { content: ""; position: absolute; left: -12%; right: -12%; bottom: -55%; height: 120%;
    background: radial-gradient(closest-side, rgba(255,176,32,.22), rgba(249,115,22,.12) 45%, rgba(234,88,12,0) 72%);
    transform-origin: 50% 100%; opacity: 0; animation: fx-sunrise 2200ms cubic-bezier(.16,1,.3,1) 150ms forwards, fx-breathe 9s ease-in-out 2.4s infinite alternate; }
  @keyframes fx-sunrise { from { opacity: 0; transform: translate3d(0, 30%, 0) scale(.7); } to { opacity: 1; transform: none; } }
  @keyframes fx-breathe { from { transform: scale(1); } to { transform: scale(1.08) translate3d(0, -2%, 0); } }
  .fx-fachwerk { position: absolute; right: -2%; top: 6%; width: min(46%, 560px); height: auto; color: #EA580C; opacity: .22;
    clip-path: inset(0 100% 0 0); animation: fx-draw 2600ms cubic-bezier(.5,0,.2,1) 400ms forwards; }
  .fx-fachwerk path { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: square; }
  @keyframes fx-draw { to { clip-path: inset(0); } }
  @media (max-width: 760px) { .fx-fachwerk { width: 70%; top: 2%; opacity: .14; } }

  .fx-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 500ms ease;
    background: radial-gradient(480px circle at var(--sx, 60%) var(--sy, 40%), rgba(251,146,60,.20), rgba(251,146,60,0) 62%); }
  .fx-hero.fx-hot .fx-spot { opacity: 1; }

  .fx-word { display: inline-block; white-space: normal; max-width: 100%; overflow-wrap: anywhere; opacity: 0; transform: translate3d(0, .6em, 0); filter: blur(7px);
    animation: fx-word-in 900ms cubic-bezier(.16,1,.3,1) forwards; animation-delay: calc(140ms + var(--i) * 85ms); }
  @keyframes fx-word-in { to { opacity: 1; transform: none; filter: blur(0); } }
  .fx-on :is(.hero, .page-hero) :is(.eyebrow, .hero-sub, .hero-actions, .hero-trust, .hero-panel, .lead) {
    opacity: 0; transform: translate3d(0, 18px, 0); animation: fx-up 900ms cubic-bezier(.16,1,.3,1) forwards; }
  .fx-on :is(.hero, .page-hero) .eyebrow { animation-delay: 60ms; }
  .fx-on :is(.hero, .page-hero) :is(.hero-sub, .lead) { animation-delay: 700ms; }
  .fx-on :is(.hero, .page-hero) .hero-actions { animation-delay: 860ms; }
  .fx-on :is(.hero, .page-hero) .hero-trust { animation-delay: 980ms; }
  .fx-on :is(.hero, .page-hero) .hero-panel { animation-delay: 420ms; }
  .fx-on :is(.hero, .page-hero) h1:not(.fx-split) { opacity: 0; }
  @keyframes fx-up { to { opacity: 1; transform: none; } }

  /* ---------- Live-Punkt: Puls-Ringe ---------- */
  .live-dot:not(.is-fallback) i { position: relative; animation: none; box-shadow: none; }
  .live-dot:not(.is-fallback) i::before, .live-dot:not(.is-fallback) i::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: var(--ok, #15803d); opacity: 0; transform: scale(1); pointer-events: none; animation: fx-ring 2.6s cubic-bezier(.2,.6,.3,1) infinite; }
  .live-dot:not(.is-fallback) i::after { animation-delay: 1.3s; }
  @keyframes fx-ring { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(3.6); } }

  /* ---------- Termin-Karten: gestaffelter Einflug (Klasse setzt das JS pro neue Zeile) ---------- */
  .termin-row.fx-fly { animation: fx-fly 650ms cubic-bezier(.16,1,.3,1) backwards; animation-delay: calc(var(--fi, 0) * 90ms); }
  @keyframes fx-fly { from { opacity: 0; transform: translate3d(0, 22px, 0) scale(.98); } }

  /* Glut-Glanz beim Hover (nur Maus) */
  @media (hover: hover) and (pointer: fine) {
    a.termin-row { position: relative; }
    a.termin-row::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 260ms ease;
      background: radial-gradient(260px circle at var(--gx, 20%) 50%, rgba(251,146,60,.20), rgba(251,146,60,0) 70%); }
    a.termin-row:hover::before { opacity: 1; }
    a.termin-row:hover { box-shadow: 0 16px 34px -16px rgba(234,88,12,.5); }
  }

  /* ---------- Überschriften: Glut-Linie zeichnet sich (absolut, kein Layout-Sprung) ---------- */
  .section-head h2 { position: relative; }
  .section-head h2::after { content: ""; position: absolute; left: 0; bottom: -10px; width: 72px; height: 4px; border-radius: 4px;
    background: linear-gradient(90deg, #FFB020, #EA580C); transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 900ms cubic-bezier(.16,1,.3,1) 250ms; pointer-events: none; }
  .section-head.center h2::after { left: 50%; margin-left: -36px; transform-origin: 50% 50%; }
  .section-head.fx-in h2::after { transform: scaleX(1); }

  /* ---------- Karten: 3D-Neigung + Glut-Reflex (nur Maus/Trackpad) ---------- */
  .fx-tilt { position: relative; transform-style: preserve-3d; }
  .js .rv.in.fx-tilt { transition-delay: 0ms !important; }
  .fx-tilt.fx-tilt-on { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px) scale(1.012) !important;
    transition: transform 90ms ease-out, box-shadow 250ms ease, border-color 250ms ease !important;
    box-shadow: 0 28px 56px -20px rgba(234,88,12,.5) !important; border-color: var(--o-300, #FDBA74) !important; }
  .fx-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 250ms ease; z-index: 3;
    background: radial-gradient(320px circle at var(--gx, 50%) var(--gy, 0%), rgba(255,160,70,.26), rgba(255,160,70,0) 62%); }
  .fx-tilt-on > .fx-glare { opacity: 1; }

  /* ---------- Primäre Buttons: magnetisch + Glanzstreifen (Höhe/Padding unverändert) ---------- */
  .fx-mag { position: relative; overflow: hidden; translate: var(--bx, 0px) var(--by, 0px);
    transition: translate 200ms cubic-bezier(.2,.8,.2,1), transform .18s var(--ease, ease), box-shadow .2s var(--ease, ease), background .2s var(--ease, ease); }
  .fx-mag::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%) skewX(-18deg);
    background: linear-gradient(100deg, transparent 30%, rgba(255,236,200,.5) 50%, transparent 70%); }
  .fx-mag:hover::after { transform: translateX(130%) skewX(-18deg); transition: transform 720ms cubic-bezier(.2,.7,.2,1); }

  /* ---------- Kennzahlen ---------- */
  .fx-count { font-variant-numeric: tabular-nums; }

  /* ---------- Bilder: Wisch-Auftritt ---------- */
  .fx-wipe-pre { clip-path: inset(0 0 100% 0); }
  .fx-wipe-pre.fx-in { clip-path: inset(0); transition: clip-path 1100ms cubic-bezier(.16,1,.3,1); }

  /* ---------- Footer: Spalten gestaffelt ---------- */
  .fx-foot-pre > * { opacity: 0; transform: translate3d(0, 22px, 0); }
  .fx-foot-pre.fx-in > * { opacity: 1; transform: none; transition: opacity 700ms ease, transform 900ms cubic-bezier(.16,1,.3,1); }
  .fx-foot-pre.fx-in > *:nth-child(2) { transition-delay: 90ms; }
  .fx-foot-pre.fx-in > *:nth-child(3) { transition-delay: 180ms; }
  .fx-foot-pre.fx-in > *:nth-child(4) { transition-delay: 270ms; }
}

/* Touch-Geräte: keine Maus-Effekte */
@media (hover: none), (pointer: coarse) {
  .fx-spot, .fx-glare { display: none !important; }
}