/* =============================================
   NICHOLE MEDINA — Animations
   animations.css
   ============================================= */

/* ── Scroll Reveal ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1),
              transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.reveal--left  { transform: translateX(-28px); }
.reveal.reveal--right { transform: translateX(28px); }
.reveal.reveal--scale { transform: scale(0.94); }
.reveal.visible       { opacity: 1; transform: none; }

/* Staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.4,0,0.2,1),
              transform 0.55s cubic-bezier(0.4,0,0.2,1);
}
.stagger.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.12s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.19s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.26s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.33s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.40s; }
.stagger.visible > * { opacity: 1; transform: none; }

/* ── Hero Entrance ──────────────────────────── */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroBadge {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes heroFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.hero__badge   { animation: heroBadge  0.6s cubic-bezier(0.34,1.4,0.64,1) 0.2s  both; }
.hero__title   { animation: heroFadeUp 0.75s cubic-bezier(0.4,0,0.2,1)    0.38s both; }
.hero__sub     { animation: heroFadeUp 0.75s cubic-bezier(0.4,0,0.2,1)    0.55s both; }
.hero__actions { animation: heroFadeUp 0.75s cubic-bezier(0.4,0,0.2,1)    0.68s both; }
.hero__scroll  { animation: heroFadeIn 1s   ease                           1.2s  both; }

.page-hero__label { animation: heroFadeUp 0.5s ease 0.1s  both; }
.page-hero__title { animation: heroFadeUp 0.6s ease 0.22s both; }
.page-hero__sub   { animation: heroFadeUp 0.6s ease 0.36s both; }

/* ── Wave divider shape ─────────────────────── */
.wave-divider { position: relative; line-height: 0; overflow: hidden; }
.wave-divider svg { display: block; width: 100%; height: 60px; }

/* ── Portfolio filter animation ─────────────── */
.portfolio-item.filtering {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* ── Image shimmer placeholder ──────────────── */
.img-loading {
  background: linear-gradient(90deg, var(--off-white, #f8fafa) 25%, var(--light-gray, #f2f5f5) 50%, var(--off-white, #f8fafa) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} }

/* ── Hover underline util ───────────────────── */
.hover-underline { position: relative; display: inline-block; }
.hover-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 1.5px; background: var(--teal); transition: width 0.3s ease; }
.hover-underline:hover::after { width: 100%; }

/* ── Reduce motion ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
  .hero__bg-image { transform: none !important; }
}