/* ==================================================
   Parallax Image
   Place .parallax-img directly inside .parallax-container.
   Set the container height or aspect ratio in Webflow as needed.
   ================================================== */
 
.parallax-container {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
 
.parallax-container > .parallax-img {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
 
/* Keep a static image unless scroll-driven animations are supported.
   The oversized image provides room to move without exposing gaps. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .parallax-container {
      view-timeline-name: --parallax-image;
      view-timeline-axis: block;
    }
 
    .parallax-container > .parallax-img {
      top: -10%;
      bottom: auto;
      height: 120%;
      animation: parallax-image-scroll linear both;
      animation-timeline: --parallax-image;
      animation-range: cover;
    }
  }
}
 
@keyframes parallax-image-scroll {
  from { transform: translateY(-8%); }
  to { transform: translateY(8%); }
}
 
 
/* ==================================================
   Fade In
   ================================================== */
 
/* Initial hidden state for every fade-in element. */
.fade-section .fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  will-change: opacity, transform;
}
 
/* Added by JavaScript when the section enters the viewport. */
.fade-section .fade-in.fade-in-active {
  opacity: 1;
  transform: translateY(0);
}
 
/* ==================================================
   Character Fade
   ================================================== */
 
.character-fade {
  white-space: normal;
}
 
.character-fade-word {
  display: inline-flex;
  margin-right: 0.25em;
  white-space: nowrap;
}
 
.character-fade-word:last-child {
  margin-right: 0;
}
 
.character-fade-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.25em);
  transition:
    opacity 320ms ease-out,
    transform 320ms ease-out;
  transition-delay: calc(var(--character-index) * 20ms);
}
 
.character-fade-active .character-fade-char {
  opacity: 1;
  transform: translateY(0);
}
 
/* Gold-gradient character variant. */
.text-gradient-gold.character-fade {
  background: none;
  color: inherit;
  -webkit-text-fill-color: initial;
}
 
.text-gradient-gold.character-fade .character-fade-char {
  background: linear-gradient(135deg, #c56129 0%, #f5ad59 100%);
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
 
/* ==================================================
   Vertical Line Reveal
   ================================================== */
 
.v-line {
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.9s cubic-bezier(0.37, 0, 0.63, 1);
}
 
.v-line.is-visible {
  transform: scaleY(1);
}
 
/* ==================================================
   Focus In
   ================================================== */
 
.focus-in {
  opacity: 0;
  filter: blur(8px);
  transform: scale(0.985);
  transition:
    opacity 280ms ease-out,
    filter 280ms ease-out,
    transform 280ms ease-out;
  will-change: opacity, filter, transform;
}
 
.focus-in.focus-in-active {
  opacity: 1;
  filter: blur(0);
  transform: scale(1);
}
 
/* ==================================================
   Mask Reveal Up
   ================================================== */
 
.reveal-up {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 600ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}
 
.reveal-up.reveal-up-active {
  clip-path: inset(0);
}
 
/* ==================================================
   Sticky Sections
   ================================================== */
 
.js-sticky-section {
  position: relative;
}
 
.js-sticky-left {
  align-self: flex-start;
}
 
@media (max-width: 991px) {
  .js-sticky-left {
    transform: none !important;
    will-change: auto !important;
  }
}
 
/* ==================================================
   Reduced Motion
   ================================================== */
 
@media (prefers-reduced-motion: reduce) {
  .fade-section .fade-in,
  .focus-in,
  .character-fade-char {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }
 
  .reveal-up {
    clip-path: none;
    transition: none;
  }
 
  .v-line {
    transform: scaleY(1);
    transition: none;
  }
}
 
/* ==================================================
   JavaScript Hero Parallax
   Set the hero height/min-height in Webflow or let content size it.
   Use these classes separately from the CSS parallax classes above.
   ================================================== */
 
.hero-parallax {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
 
.hero-parallax > .hero-parallax-img {
  position: absolute;
  top: -30%;
  left: 0;
  width: 100%;
  height: 160%;
  max-width: none;
  display: block;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  filter: sepia(0.35);
}
 
/* Above the image and below hero content; never intercepts clicks. */
.hero-parallax::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: var(--hero-overlay-opacity, 0);
  pointer-events: none;
}
 
@media (prefers-reduced-motion: reduce) {
  .hero-parallax::before {
    opacity: 0;
  }
 
  .hero-parallax > .hero-parallax-img {
    transform: none !important;
    opacity: 1 !important;
  }
}