/* ============================================================
   HERO / COVER  —  triggered on page load
   ============================================================ */

@keyframes heroImage {
  from { transform: scale(1.07); opacity: 0.65; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes heroReveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.cover-anim-image {
  animation: heroImage 1.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.cover-anim-text {
  animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}
.cover-anim-actions {
  animation: heroReveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both;
}


/* ============================================================
   SCROLL ANIMATIONS  —  triggered by IntersectionObserver
   ============================================================ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeScale {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* Hidden initial state — only applied after JS adds the class */
.anim-fade-up,
.anim-fade-left,
.anim-fade-right,
.anim-fade-scale {
  opacity: 0;
}

/* Triggered state */
.anim-fade-up.visible {
  animation: fadeUp 0.75s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.anim-fade-left.visible {
  animation: fadeInLeft 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.anim-fade-right.visible {
  animation: fadeInRight 0.85s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.anim-fade-scale.visible {
  animation: fadeScale 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
}


/* ============================================================
   ACCESSIBILITY  —  honour reduced-motion preference
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up,
  .anim-fade-left,
  .anim-fade-right,
  .anim-fade-scale,
  .cover-anim-image,
  .cover-anim-text,
  .cover-anim-actions {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}