/* ── Scroll-triggered Entrance Animations ────── */
.reveal {
  opacity: 0;
  transform: translateY(36px);
  transition:
    opacity 0.7s var(--ease),
    transform 0.7s var(--ease);
}

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

/* Staggered children */
.reveal-children>* {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s var(--ease),
    transform 0.6s var(--ease);
}

.reveal-children.visible>*:nth-child(1) { opacity: 1; transform: none; transition-delay: 0s; }
.reveal-children.visible>*:nth-child(2) { opacity: 1; transform: none; transition-delay: .05s; }
.reveal-children.visible>*:nth-child(3) { opacity: 1; transform: none; transition-delay: .10s; }
.reveal-children.visible>*:nth-child(4) { opacity: 1; transform: none; transition-delay: .15s; }
.reveal-children.visible>*:nth-child(5) { opacity: 1; transform: none; transition-delay: .20s; }
.reveal-children.visible>*:nth-child(6) { opacity: 1; transform: none; transition-delay: .25s; }
.reveal-children.visible>*:nth-child(7) { opacity: 1; transform: none; transition-delay: .30s; }
.reveal-children.visible>*:nth-child(8) { opacity: 1; transform: none; transition-delay: .35s; }
.reveal-children.visible>*:nth-child(9) { opacity: 1; transform: none; transition-delay: .40s; }
.reveal-children.visible>*:nth-child(10) { opacity: 1; transform: none; transition-delay: .45s; }
.reveal-children.visible>*:nth-child(11) { opacity: 1; transform: none; transition-delay: .50s; }
.reveal-children.visible>*:nth-child(12) { opacity: 1; transform: none; transition-delay: .55s; }
.reveal-children.visible>*:nth-child(13) { opacity: 1; transform: none; transition-delay: .60s; }
.reveal-children.visible>*:nth-child(14) { opacity: 1; transform: none; transition-delay: .65s; }
.reveal-children.visible>*:nth-child(15) { opacity: 1; transform: none; transition-delay: .70s; }
.reveal-children.visible>*:nth-child(16) { opacity: 1; transform: none; transition-delay: .75s; }
.reveal-children.visible>*:nth-child(17) { opacity: 1; transform: none; transition-delay: .80s; }
.reveal-children.visible>*:nth-child(18) { opacity: 1; transform: none; transition-delay: .85s; }
.reveal-children.visible>*:nth-child(19) { opacity: 1; transform: none; transition-delay: .90s; }
.reveal-children.visible>*:nth-child(20) { opacity: 1; transform: none; transition-delay: .95s; }
.reveal-children.visible>*:nth-child(21) { opacity: 1; transform: none; transition-delay: 1.00s; }
.reveal-children.visible>*:nth-child(22) { opacity: 1; transform: none; transition-delay: 1.05s; }
.reveal-children.visible>*:nth-child(23) { opacity: 1; transform: none; transition-delay: 1.10s; }
.reveal-children.visible>*:nth-child(24) { opacity: 1; transform: none; transition-delay: 1.15s; }
.reveal-children.visible>*:nth-child(25) { opacity: 1; transform: none; transition-delay: 1.20s; }
.reveal-children.visible>*:nth-child(26) { opacity: 1; transform: none; transition-delay: 1.25s; }
.reveal-children.visible>*:nth-child(27) { opacity: 1; transform: none; transition-delay: 1.30s; }
.reveal-children.visible>*:nth-child(28) { opacity: 1; transform: none; transition-delay: 1.35s; }
.reveal-children.visible>*:nth-child(29) { opacity: 1; transform: none; transition-delay: 1.40s; }
.reveal-children.visible>*:nth-child(30) { opacity: 1; transform: none; transition-delay: 1.45s; }
.reveal-children.visible>*:nth-child(31) { opacity: 1; transform: none; transition-delay: 1.50s; }
.reveal-children.visible>*:nth-child(32) { opacity: 1; transform: none; transition-delay: 1.55s; }
.reveal-children.visible>*:nth-child(33) { opacity: 1; transform: none; transition-delay: 1.60s; }
.reveal-children.visible>*:nth-child(34) { opacity: 1; transform: none; transition-delay: 1.65s; }
.reveal-children.visible>*:nth-child(35) { opacity: 1; transform: none; transition-delay: 1.70s; }
.reveal-children.visible>*:nth-child(36) { opacity: 1; transform: none; transition-delay: 1.75s; }
.reveal-children.visible>*:nth-child(37) { opacity: 1; transform: none; transition-delay: 1.80s; }
.reveal-children.visible>*:nth-child(38) { opacity: 1; transform: none; transition-delay: 1.85s; }
.reveal-children.visible>*:nth-child(39) { opacity: 1; transform: none; transition-delay: 1.90s; }
.reveal-children.visible>*:nth-child(40) { opacity: 1; transform: none; transition-delay: 1.95s; }


/* Page load fade-in classes */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.load-1 {
  opacity: 0;
  animation: fade-up 0.8s 0.2s var(--ease) forwards;
}

.load-2 {
  opacity: 0;
  animation: fade-up 0.8s 0.4s var(--ease) forwards;
}

.load-3 {
  opacity: 0;
  animation: fade-up 0.8s 0.6s var(--ease) forwards;
}

.load-4 {
  opacity: 0;
  animation: fade-up 0.8s 0.8s var(--ease) forwards;
}

.load-5 {
  opacity: 0;
  animation: fade-up 0.8s 1.0s var(--ease) forwards;
}

/* Bounce arrow */
@keyframes bounce-y {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }
}

.bounce {
  animation: bounce-y 2s ease-in-out infinite;
}

/* Glow pulse on green elements */
@keyframes glow-pulse {

  0%,
  100% {
    box-shadow: 0 0 20px var(--green-glow);
  }

  50% {
    box-shadow: 0 0 40px rgba(46, 125, 50, 0.20);
  }
}

.glow-pulse {
  animation: glow-pulse 3s ease-in-out infinite;
}

/* Shimmer on loading placeholders */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.shimmer {
  background: var(--bg-secondary);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Timeline dot pulse */
@keyframes timeline-pulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 var(--green-glow);
  }

  50% {
    box-shadow: 0 0 0 8px transparent;
  }
}

.timeline-dot {
  animation: timeline-pulse 2.5s ease-in-out infinite;
}

/* ── Antigravity Hero Overlay ────── */
.hero-content-antigravity {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
  padding-top: 10vh; /* Push down to clear fixed navbar */
  animation: antigravity-float 8s ease-in-out infinite;
}

@keyframes antigravity-float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(15px);
  }
}

.hero-content-antigravity>* {
  pointer-events: auto;
}

.hero-top-text {
  font-family: var(--sans);
  font-size: 2rem;
  font-weight: 500;
  color: white;
  letter-spacing: 0.6em;
  text-transform: none;
  opacity: 1;
  margin-bottom: 0.2rem;
}

.hero-main-headline {
  font-family: var(--sans);
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: 900;
  color: #ff7518;
  /* Pumpkin Orange */
  margin: 0.2rem 0;
  text-transform: uppercase;
  text-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3em;
  position: relative;
  width: 100%;
}

.cursor {
  color: #ff7518;
  animation: blink 0.8s infinite;
  margin-left: 0.2rem;
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

.hero-subheadline {
  font-family: var(--sans);
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: #ffffff;
  margin-top: 1.5rem;
  letter-spacing: 0.02em;
  font-weight: 400;
  max-width: 900px;
  line-height: 1.4;
}

.btn-pumpkin-orange {
  margin-top: 3.5rem;
  background: #ff7518;
  border: 2px solid #ff7518;
  color: white;
  padding: 1rem 2.8rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s var(--ease);
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(255, 117, 24, 0.3);
}

.btn-pumpkin-orange:hover {
  background: #fa6a02;
  border-color: #fa6a02;
  color: white;
  box-shadow: 0 0 30px rgba(255, 117, 24, 0.6);
  transform: translateY(-3px);
}

.btn-outline-white-hero {
  margin-top: 3.5rem;
  background: transparent;
  border: 2px solid rgba(255, 255, 255, 0.4);
  color: white;
  padding: 1rem 2.8rem;
  font-family: var(--mono);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
  border-radius: 8px;
  transition: all 0.3s var(--ease);
  cursor: pointer;
}

.btn-outline-white-hero:hover {
  background: white;
  color: #000;
  border-color: white;
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

/* ── Scenic Scroll Animation ────── */
@keyframes scenicScroll {
  from { background-position: 0 0; }
  to { background-position: 0 1000px; }
}

.scenic-banner-container {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: #071a0e; /* Deep forest base for contrast */
}

.scenic-banner {
  width: 100%;
  height: 100%;
  background: url('../assets/images/s.webp') repeat;
  background-size: cover;
  animation: scenicScroll 80s linear infinite;
  opacity: 0.4; /* Stronger presence */
  filter: brightness(0.6) contrast(1.1); /* Bring out details */
}