/* ============ Basis-Variablen ============ */
:root{
  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: 1000ms;          /* Standard-Dauer für Reveals/Slides */
  --lift-dur: 220ms;     /* Hover-Karten */
}

/* ============ Fade-Up Reveal (neutral) ============ */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: none;
}

/* ============ Slide-In Reveals (Richtung) ============ */
.reveal-slide{
  opacity: 0;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  will-change: opacity, transform;
}

/* Startzustände je Richtung */
.reveal-slide.from-left   { transform: translateX(-28px); }
.reveal-slide.from-right  { transform: translateX( 28px); }
.reveal-slide.from-top    { transform: translateY(-18px); }
.reveal-slide.from-bottom { transform: translateY( 18px); }

/* Optionales, sehr dezentes Scale-Up (z. B. für Bilder) */
.reveal-slide.scale-up          { transform: scale(.985); }
.reveal-slide.scale-up.is-visible{ transform: scale(1); }

/* Sichtbar */
.reveal-slide.is-visible{
  opacity: 1;
  transform: none;
}

/* ============ Karten / Buttons (Micro-Interactions) ============ */
.card--lift{
  transition: transform var(--lift-dur) var(--ease), box-shadow var(--lift-dur) var(--ease);
  will-change: transform, box-shadow;
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
}
.card--lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.btn-anim{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.9rem 1.2rem; border-radius:999px;
  background:#111; color:#fff; border:1px solid #222;
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
  text-decoration:none;
}
.btn-anim:hover{ transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); }
.btn-anim:active{ transform: translateY(0); box-shadow:none; }
.btn-anim .chev{ transition: transform 180ms var(--ease); }
.btn-anim:hover .chev{ transform: translateX(3px); }

/* ============ Blur-Up Bild-Reveal (Low → High) ============ */
.img-reveal{
  filter: blur(8px) saturate(.96) contrast(.98);
  transform: scale(1.02);
  transition: filter 600ms var(--ease), transform 600ms var(--ease), opacity 300ms var(--ease);
  opacity:.9;
}
.img-reveal.is-loaded{
  filter: none;
  transform: scale(1);
  opacity:1;
}

/* ============ Hero / Parallax Basis (optional) ============ */
.hero{ position: relative; overflow: hidden; }
.hero-bg{
  position:absolute; inset:-10%;
  width:120%; height:120%; object-fit:cover; transform: translateZ(0);
}
.hero-content{ position:relative; z-index:2; }

/* ============ Barrierefreiheit ============ */
@media (prefers-reduced-motion: reduce){
  .reveal,
  .reveal-slide,
  .card--lift,
  .btn-anim,
  .img-reveal{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }
}