/* ============================================================
   Enoxo Planner — planner-fx (Bewegung & Tiefe)
   Startseite: lebendig.  Dashboard: dezent.
   Alles hinter prefers-reduced-motion; nichts Perpetuelles im Arbeitsbereich.
   ============================================================ */

/* Titel-Schimmer (Basis-Farbverlauf immer sichtbar) */
.fx-shimmer {
  background-image: linear-gradient(110deg,
    var(--teal) 0%, var(--cyan) 28%, #DAF7FF 46%, var(--cyan) 60%, var(--violet) 100%);
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Tilt-Basis */
[data-fx-tilt] { will-change: transform; }

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

  /* Schimmer-Bewegung */
  .fx-shimmer { animation: fxShimmer 7s linear infinite; }
  @keyframes fxShimmer { 0% { background-position: 0% center; } 100% { background-position: 220% center; } }

  /* Scroll-Reveal (Startseite) */
  .fx-reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1);
    will-change: opacity, transform;
  }
  .fx-reveal.fx-in { opacity: 1; transform: none; }

  /* Einmalige Einblend-Kaskade (Dashboard, dezent) */
  .fx-stagger > * { opacity: 0; transform: translateY(14px); animation: fxRise .6s cubic-bezier(.2,.7,.2,1) forwards; }
  .fx-stagger > *:nth-child(1){ animation-delay: .04s }
  .fx-stagger > *:nth-child(2){ animation-delay: .10s }
  .fx-stagger > *:nth-child(3){ animation-delay: .16s }
  .fx-stagger > *:nth-child(4){ animation-delay: .22s }
  .fx-stagger > *:nth-child(5){ animation-delay: .28s }
  .fx-stagger > *:nth-child(6){ animation-delay: .34s }
  .fx-stagger > *:nth-child(7){ animation-delay: .40s }
  .fx-stagger > *:nth-child(8){ animation-delay: .46s }
  .fx-stagger > *:nth-child(n+9){ animation-delay: .50s }
  @keyframes fxRise { to { opacity: 1; transform: none; } }
}