/* Pfotenzirkel – dezente Bewegung. Alles nur, wenn niemand "Bewegung reduzieren" eingestellt hat;
   ohne JavaScript bleibt jeder Inhalt sichtbar (Einblenden haengt an html.pz-motion). */

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

  /* Buttons: minimal anheben, beim Klicken eindruecken */
  .pz-button { transition: transform 0.18s ease, filter 0.18s ease, background-color 0.18s ease; }
  .pz-button:hover { transform: translateY(-1px); }
  .pz-button:active { transform: translateY(0) scale(0.98); }

  /* Klickbare Karten (Tiere, Neuigkeiten) heben sich leicht */
  .pz-animal-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .pz-animal-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgb(0 0 0 / 0.08); }

  /* Signet: die Zehen tippen nacheinander, wenn man ueber das Logo faehrt */
  .pz-brand .pz-signet circle { transform-box: fill-box; transform-origin: center; }
  .pz-brand:hover .pz-signet circle:nth-of-type(-n+4) { animation: pz-tap 0.5s ease both; }
  .pz-brand:hover .pz-signet circle:nth-of-type(2) { animation-delay: 0.07s; }
  .pz-brand:hover .pz-signet circle:nth-of-type(3) { animation-delay: 0.14s; }
  .pz-brand:hover .pz-signet circle:nth-of-type(4) { animation-delay: 0.21s; }
  @keyframes pz-tap { 40% { transform: translateY(-2.5px); } }

  /* Hero: Boegen zeichnen sich, die Sonne geht auf und atmet danach ganz ruhig */
  .pz-hero__arcs path { stroke-dasharray: 700; stroke-dashoffset: 700; animation: pz-draw 1.8s cubic-bezier(0.3, 0.6, 0.3, 1) forwards; }
  .pz-hero__arcs path:nth-of-type(2) { animation-delay: 0.15s; }
  .pz-hero__arcs path:nth-of-type(3) { animation-delay: 0.3s; }
  .pz-hero__arcs path:nth-of-type(4) { animation-delay: 0.45s; }
  .pz-hero__arcs .pz-hero__sun { transform-box: fill-box; transform-origin: center; animation: pz-rise 1.4s 0.5s cubic-bezier(0.2, 0.7, 0.3, 1) both, pz-breathe 7s 2s ease-in-out infinite; }
  .pz-hero__animal-card { animation: pz-up 0.9s 0.35s cubic-bezier(0.2, 0.7, 0.3, 1) both; }
  .pz-hero__stamp .pz-stamp { animation: pz-stamp 0.5s 1.1s cubic-bezier(0.3, 1.4, 0.5, 1) both; }
  @keyframes pz-draw { to { stroke-dashoffset: 0; } }
  @keyframes pz-rise { from { opacity: 0; transform: translateY(40px); } }
  @keyframes pz-breathe { 50% { transform: scale(1.05); } }
  @keyframes pz-up { from { opacity: 0; transform: translateY(24px); } }
  @keyframes pz-stamp { from { opacity: 0; transform: rotate(-20deg) scale(1.6); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }

  /* Trennbogen: der Punkt pulsiert sacht */
  .pz-arc circle { transform-box: fill-box; transform-origin: center; animation: pz-pulse 4s ease-in-out infinite; }
  @keyframes pz-pulse { 50% { transform: scale(1.6); opacity: 0.6; } }

  /* Pfotenspur: Abdruecke erscheinen nacheinander und verblassen wieder */
  .pz-pawtrail__print { opacity: 0; animation: pz-step 12s ease-in-out infinite; }
  .pz-pawtrail__print:nth-child(2) { animation-delay: 0.7s; }
  .pz-pawtrail__print:nth-child(3) { animation-delay: 1.4s; }
  .pz-pawtrail__print:nth-child(4) { animation-delay: 2.1s; }
  .pz-pawtrail__print:nth-child(5) { animation-delay: 2.8s; }
  .pz-pawtrail__print:nth-child(6) { animation-delay: 3.5s; }
  .pz-pawtrail__print:nth-child(7) { animation-delay: 4.2s; }
  .pz-pawtrail__print:nth-child(8) { animation-delay: 4.9s; }
  @keyframes pz-step { 0% { opacity: 0; } 6% { opacity: 1; } 55% { opacity: 1; } 75%, 100% { opacity: 0; } }

  /* Erfolgsmeldungen gleiten ein */
  .pz-notice { animation: pz-down 0.4s ease-out both; }
  @keyframes pz-down { from { opacity: 0; transform: translateY(-8px); } }

  /* Beim Scrollen sanft hereingleiten (Klassen setzt motion.js) */
  .pz-motion .pz-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1); transition-delay: var(--pz-delay, 0s); }
  .pz-motion .pz-reveal.is-visible { opacity: 1; transform: none; }
}

/* Pfotenspur: Lage und Farbe (auch ohne Bewegung als ruhiges Muster sichtbar) */
.pz-section--deep, .pz-footer { position: relative; overflow: hidden; }
.pz-section--deep > .pz-container, .pz-footer > .pz-container { position: relative; }
.pz-pawtrail { position: absolute; bottom: 24px; width: 180px; height: auto; pointer-events: none; fill: var(--blackberry); opacity: 0.07; }
.pz-pawtrail--right { right: 2%; }
.pz-pawtrail--left { left: 2%; transform: scaleX(-1); }
.pz-footer .pz-pawtrail { fill: var(--on-blackberry); opacity: 0.08; }
@media (max-width: 760px) { .pz-pawtrail { width: 110px; opacity: 0.05; } }