/* ============================================
   ANIMATIONS — reveals, section morph, image fade,
   prefers-reduced-motion.
   ============================================ */

.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1.1s var(--ease-calm), transform 1.1s var(--ease-calm);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Section card-morph (driven by inline --exited variable set by JS) */
.section-morph {
  --exited: 0;
  transform: scale(calc(1 - var(--exited) * 0.02));
  transform-origin: 50% 0%;
  border-radius: calc(var(--exited) * 24px);
  position: relative;
  z-index: 1;
  overflow: hidden;
  will-change: transform, border-radius, box-shadow;
}

/* Lazy image fade-in */
img[loading="lazy"] {
  transition: opacity var(--t-slow) var(--ease-calm);
}
img[loading="lazy"]:not(.loaded) { opacity: 0; }
img.loaded { opacity: 1; }

/* Accessibility — respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
  .section-morph { transform: none !important; border-radius: 0 !important; box-shadow: none !important; }
}

/* ----- Keyframes used in hero entrance ----- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(10px); }
}