:root {
  --hero-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --hero-float-ease: cubic-bezier(0.37, 0, 0.2, 1);
  --section-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

.animate {
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(0.985);
  filter: blur(10px);
  transition:
    opacity 1.1s var(--section-reveal-ease),
    transform 1.1s var(--section-reveal-ease),
    filter 1.1s var(--section-reveal-ease);
  transition-delay: var(--animate-delay, 0s);
  will-change: opacity, transform, filter;
}

.animate.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
}

.hero-section {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
}

.hero-overlay {
  transition:
    opacity 1.6s ease,
    transform 1.8s var(--hero-float-ease);
  transform: scale(1.02);
}

.hero-background-video {
  transition:
    transform 1.8s var(--hero-float-ease),
    filter 1.4s ease;
  filter: saturate(0.92) brightness(0.95);
  transform: scale(1.08);
  will-change: transform;
}

.hero-content {
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
  transition: transform 1.2s var(--hero-float-ease);
  will-change: transform;
}

[data-hero-reveal] {
  opacity: 0;
  transform: translate3d(0, 34px, 0) scale(0.985);
  filter: blur(14px);
  will-change: transform, opacity, filter;
}

.hero-section.hero-animate-ready [data-hero-reveal] {
  animation: heroReveal 1.45s var(--hero-reveal-ease) forwards;
}

.hero-section.hero-animate-ready [data-hero-reveal="title"] {
  animation-delay: 0.32s;
}

.hero-section.hero-animate-ready [data-hero-reveal="description"] {
  animation-delay: 0.74s;
}

.hero-section.hero-animate-ready [data-hero-reveal="button"] {
  animation-delay: 1.12s;
}

.hero-section.hero-animate-ready .hero-background-video {
  filter: saturate(1) brightness(1);
  transform: scale(1);
}

.hero-section.hero-animate-ready .hero-overlay {
  transform: scale(1);
}

.hero-btn {
  transition:
    transform 0.7s var(--hero-float-ease),
    box-shadow 0.7s var(--hero-float-ease),
    filter 0.7s var(--hero-float-ease);
}

.hero-section.hero-animate-ready .hero-btn {
  animation:
    heroReveal 1.45s var(--hero-reveal-ease) 1.12s forwards,
    heroButtonFloat 5.4s ease-in-out 2.7s infinite;
}

.hero-btn:hover,
.hero-btn:focus-visible {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 18px 36px rgba(62, 42, 33, 0.16);
  filter: brightness(1.03);
}

@keyframes heroReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, 0) scale(0.985);
    filter: blur(14px);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes heroButtonFloat {
  0%,
  100% {
    transform: translateY(0);
    box-shadow: 0 10px 24px rgba(62, 42, 33, 0.08);
  }

  50% {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(62, 42, 33, 0.14);
  }
}

@media (prefers-reduced-motion: reduce) {
  .animate,
  .animate.is-visible,
  .hero-overlay,
  .hero-background-video,
  .hero-content,
  .hero-btn,
  [data-hero-reveal] {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    filter: none !important;
  }

  [data-hero-reveal] {
    opacity: 1 !important;
  }

  .animate,
  .animate.is-visible {
    opacity: 1 !important;
  }
}