#section-hero {
  position: relative;
}

.hero-background {
  overflow: hidden;
}

.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateX(24px) scale(1.02);
  transition: opacity 700ms ease, transform 700ms ease;
}

.hero-slide.is-active {
  opacity: 1;
  transform: translateX(0) scale(1);
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slider-controls .dot {
  transition: all 300ms ease;
}

.slider-controls .dot:hover {
  opacity: 0.9;
}

.arrow-btn {
  transition: transform 200ms ease;
}

.arrow-btn:hover {
  transform: translateY(-2px);
}

/* Hero reveal animation (pure CSS) */
.hero-slide {
  transform: translateX(28px) scale(1.03);
  transition: opacity 700ms ease, transform 900ms ease;
}

.hero-slide img {
  transform: scale(1.08);
  clip-path: inset(0 0 0 8%);
  transition: transform 1300ms ease, clip-path 900ms ease;
  will-change: transform, clip-path;
}

.hero-slide.is-active img {
  transform: scale(1);
  clip-path: inset(0 0 0 0);
}

.hero-text-block .hero-reveal-item {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(2px);
  transition: opacity 520ms ease, transform 520ms ease, filter 520ms ease;
}

.hero-text-block.is-reveal-active .hero-reveal-item {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  transition-delay: var(--reveal-delay, 0ms);
}