/* Animationsschicht der Startseite — Stile.
 *
 * Jede Regel hier hängt an html.kc-anim. Diese Klasse setzt animationen.js
 * selbst. Ohne JavaScript greift also nichts davon, und die Seite sieht aus
 * wie ohne die Schicht — kein verschobener, kein unsichtbarer Inhalt.
 *
 * Deckkraft wird nirgends animiert. Der Grund steht in animationen.js.
 */

/* --- Einblenden beim Scrollen ------------------------------------------ */
html.kc-anim .reveal {
  transform: translateY(46px);
  transition: transform 0.75s cubic-bezier(0.16, 0.84, 0.32, 1);
  will-change: transform;
}
html.kc-anim .reveal.is-in {
  transform: none;
}
/* Karten einer Reihe leicht versetzt — wirkt lebendiger als alles auf einmal */
html.kc-anim .reveal[data-verzug="1"] { transition-delay: 110ms; }
html.kc-anim .reveal[data-verzug="2"] { transition-delay: 220ms; }
html.kc-anim .reveal[data-verzug="3"] { transition-delay: 330ms; }

/* --- Kippen bei Mausbewegung ------------------------------------------- */
html.kc-anim [data-kippen] {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}
/* Während die Maus darüber fährt, soll es der Bewegung direkt folgen. */
html.kc-anim [data-kippen]:hover {
  transition: transform 0.08s linear, box-shadow 0.25s ease;
}
/* Erst der Schatten macht aus dem Kippen wirklich Tiefe — ohne ihn sieht es
   nach einer schiefen Flaeche aus statt nach einem Gegenstand, der sich hebt. */
html.kc-anim .feat-panel[data-kippen]:hover,
html.kc-anim .price-card[data-kippen]:hover,
html.kc-anim .step[data-kippen]:hover {
  box-shadow: 0 26px 50px -22px rgba(18, 25, 18, 0.45);
}
html.kc-anim .demo-stage[data-kippen]:hover {
  filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.35));
}

/* --- Tiefe: die Ebenen im Inneren stehen unterschiedlich weit vorn --------
 * Eine gedrehte Flaeche bleibt eine Flaeche. Raeumlich wird es erst, wenn
 * sich die Ebenen beim Kippen GEGENEINANDER verschieben. Deshalb bekommen
 * die Teile im Inneren eigene Z-Abstaende — dann wandert der Vordergrund
 * sichtbar anders als der Hintergrund.
 */
html.kc-anim [data-kippen] { transform-style: preserve-3d; }

/* Die zwei Telefone stehen leicht versetzt in der Tiefe, das linke naeher. */
html.kc-anim .demo-stage[data-kippen] .demo-phone { transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1); }
html.kc-anim .demo-stage[data-kippen]:hover .demo-phone:nth-of-type(1) { transform: translateZ(46px); }
html.kc-anim .demo-stage[data-kippen]:hover .demo-phone:nth-of-type(2) { transform: translateZ(12px); }
/* Die Beschriftungen schweben noch etwas darueber. */
html.kc-anim .demo-stage[data-kippen] .demo-phone-label { transition: transform 0.4s cubic-bezier(0.22,0.61,0.36,1); }
html.kc-anim .demo-stage[data-kippen]:hover .demo-phone-label { transform: translateZ(26px); }

/* In den Karten heben sich Zahl, Sinnbild und Ueberschrift von der Flaeche ab. */
html.kc-anim .feat-panel[data-kippen] .feat-panel-num,
html.kc-anim .feat-panel[data-kippen] .feat-panel-icon,
html.kc-anim .feat-panel[data-kippen] h3,
html.kc-anim .price-card[data-kippen] .amount,
html.kc-anim .price-card[data-kippen] .phase,
html.kc-anim .step[data-kippen] .step-num {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
/* Ohne preserve-3d auf der Zwischenebene flacht der Browser die Kinder
   wieder ab — dann passiert trotz translateZ gar nichts. */
html.kc-anim .feat-panel[data-kippen] .feat-panel-head,
html.kc-anim .demo-stage[data-kippen] .demo-phone { transform-style: preserve-3d; }
html.kc-anim .feat-panel[data-kippen]:hover .feat-panel-num { transform: translateZ(52px); }
html.kc-anim .feat-panel[data-kippen]:hover .feat-panel-icon { transform: translateZ(34px); }
html.kc-anim .feat-panel[data-kippen]:hover h3 { transform: translateZ(22px); }
html.kc-anim .price-card[data-kippen]:hover .amount { transform: translateZ(44px); }
html.kc-anim .price-card[data-kippen]:hover .phase { transform: translateZ(24px); }
html.kc-anim .step[data-kippen]:hover .step-num { transform: translateZ(44px); }

/* Ein Lichtschein, der der Maus folgt — das ist der Teil, der eine Karte
 * wie einen Gegenstand mit Oberflaeche wirken laesst statt wie ein Rechteck.
 * Position kommt als --mx/--my aus animationen.js.
 */
html.kc-anim .feat-panel[data-kippen],
html.kc-anim .price-card[data-kippen],
html.kc-anim .step[data-kippen] {
  position: relative;
}
html.kc-anim .feat-panel[data-kippen]::after,
html.kc-anim .price-card[data-kippen]::after,
html.kc-anim .step[data-kippen]::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    360px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0) 55%
  );
}
html.kc-anim .feat-panel[data-kippen]:hover::after,
html.kc-anim .price-card[data-kippen]:hover::after,
html.kc-anim .step[data-kippen]:hover::after {
  opacity: 1;
}

/* --- Demo ----------------------------------------------------------------
 * Das Festhalten beim Scrollen ist wieder draussen: Es kostete jeden Besucher
 * ueber einen Bildschirm zusaetzliches Scrollen, um an der Demo vorbeizukommen.
 * Die Demo laeuft wieder von allein, sobald sie ins Bild kommt.
 */

/* --- Wer weniger Bewegung will, bekommt gar keine ---------------------- */
@media (prefers-reduced-motion: reduce) {
  html.kc-anim .reveal,
  html.kc-anim [data-kippen] {
    transform: none !important;
    transition: none !important;
  }
  html.kc-anim .demo-halt {
    position: static;
    min-height: 0;
    padding: 0;
  }
  html.kc-anim .demo-bahn {
    height: auto !important;
  }
}