html {
  scroll-behavior: smooth;
}

body {
  background-image: radial-gradient(circle at 10% 10%, rgba(187, 123, 51, 0.05) 0%, transparent 45%),
    radial-gradient(circle at 90% 20%, rgba(31, 34, 37, 0.08) 0%, transparent 40%);
}

.grain {
  pointer-events: none;
  opacity: 0.08;
  background-image: radial-gradient(#111111 0.55px, transparent 0.55px);
  background-size: 5px 5px;
}

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

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

.hero-stage {
  min-height: 100vh;
}

.hero-vignette {
  background:
    radial-gradient(circle at center, transparent 15%, rgba(17, 17, 17, 0.34) 66%, rgba(17, 17, 17, 0.7) 100%),
    linear-gradient(102deg, rgba(17, 17, 17, 0.92) 6%, rgba(17, 17, 17, 0.64) 48%, rgba(17, 17, 17, 0.55) 100%);
}

.hero-sepia {
  background: linear-gradient(to top right, rgba(187, 123, 51, 0.2), rgba(187, 123, 51, 0.08));
  mix-blend-mode: soft-light;
}

.hero-lines {
  background-image: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.08) 0,
    rgba(255, 255, 255, 0.08) 1px,
    transparent 1px,
    transparent 56px
  );
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.48), transparent 82%);
}

.hero-film {
  opacity: 0.12;
  background-image:
    radial-gradient(circle at 16% 21%, rgba(255, 255, 255, 0.65) 0.7px, transparent 0.7px),
    radial-gradient(circle at 82% 66%, rgba(255, 255, 255, 0.5) 0.6px, transparent 0.6px),
    radial-gradient(circle at 35% 78%, rgba(255, 255, 255, 0.42) 0.6px, transparent 0.6px);
  background-size:
    170px 170px,
    220px 220px,
    200px 200px;
  animation: filmShift 16s linear infinite;
}

.hero-zoom img {
  animation: heroZoom 11s ease-out both;
  filter: saturate(0.92) contrast(1.06);
}

.hero-frame {
  animation: panelIn 700ms ease-out both;
}

.hero-kicker {
  animation: fadeUp 650ms ease-out both;
}

.hero-stamp {
  animation: stampIn 650ms 320ms ease-out both;
}

.hero-title-line {
  opacity: 0;
  transform: translateY(20px);
  animation: titleLift 750ms cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.hero-title-line:nth-child(1) {
  animation-delay: 180ms;
}

.hero-title-line:nth-child(2) {
  animation-delay: 320ms;
}

.hero-cta {
  animation: fadeUp 780ms 360ms ease-out both, pulseGlow 2.8s 1.4s ease-in-out infinite;
}

@keyframes heroZoom {
  from {
    transform: scale(1.12);
  }
  to {
    transform: scale(1);
  }
}

@keyframes panelIn {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes stampIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes titleLift {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes filmShift {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(70px);
  }
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(187, 123, 51, 0.15);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(187, 123, 51, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero-zoom img,
  .hero-film,
  .hero-frame,
  .hero-kicker,
  .hero-stamp,
  .hero-title-line,
  .hero-cta {
    animation: none;
    opacity: 1;
    transform: none;
  }

  html {
    scroll-behavior: auto;
  }
}