/* Index page — layout styles migrated to Tailwind utility classes in index.html */
/* Animations & scroll-reveal effects */

/* ── Ken Burns (Hero image slow zoom) ───────────────────────── */
@keyframes kenburns {
  0%   { transform: scale(1);    }
  100% { transform: scale(1.08); }
}
.hero-kenburns {
  animation: kenburns 20s ease-out forwards;
}

/* ── Hero text staggered fade-in ────────────────────────────── */
@keyframes heroFadeUp {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0);    }
}
.hero-fade-in {
  opacity: 0;
  animation: heroFadeUp 1s ease-out forwards;
}
.hero-fade-in-delay-1 { animation-delay: 0.3s; }
.hero-fade-in-delay-2 { animation-delay: 0.7s; }
.hero-fade-in-delay-3 { animation-delay: 1.1s; }

/* ── Scroll-view reveal (slide-in overlay) ──────────────────── */
.scroll-view {
  overflow: hidden;
  position: relative;
}
.scroll-view::before {
  z-index: 1;
  background-color: inherit;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.scroll-view.show::before {
  transition: transform 0.75s 0.1s cubic-bezier(0.075, 0.82, 0.165, 1);
  transform: translateX(100%);
}
.show {
  transition: opacity 0.2s, background-size 0.6s cubic-bezier(0.075, 0.82, 0.165, 1);
  background-size: 100% 100%;
}

/* ── Fade-up on scroll (for content blocks) ─────────────────── */
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(40px); }
  100% { opacity: 1; transform: translateY(0);    }
}
.fade-up {
  opacity: 0;
  transform: translateY(40px);
}
.fade-up.show {
  animation: fadeUp 0.8s ease-out forwards;
}

/* Stagger delays for child fade-ups */
.fade-up-delay-1.show { animation-delay: 0.15s; }
.fade-up-delay-2.show { animation-delay: 0.3s;  }
.fade-up-delay-3.show { animation-delay: 0.45s; }

/* ── Accent line grow animation ─────────────────────────────── */
.accent-line {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.6s 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.accent-line.show {
  transform: scaleX(1);
}

/* ── Scroll indicator pulse ─────────────────────────────────── */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; transform: translate(-50%, 0); }
  50%      { opacity: 1;   transform: translate(-50%, 6px); }
}
.scroll-indicator {
  animation: scrollPulse 2s ease-in-out infinite;
}