/* Default state for elements that animate in via IntersectionObserver. */
[data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); will-change: transform, opacity; }
[data-reveal].in { opacity: 1; transform: translateY(0); }

/* Stagger child reveals with --i index variable. */
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity var(--dur-reveal) var(--ease-reveal), transform var(--dur-reveal) var(--ease-reveal); transition-delay: calc(var(--i, 0) * 80ms); }
[data-reveal-stagger].in > * { opacity: 1; transform: translateY(0); }

/* Curtain reveal — clip-path inset opens upward. */
[data-curtain] { clip-path: inset(0 0 100% 0); transition: clip-path var(--dur-reveal) var(--ease-curtain); }
[data-curtain].in { clip-path: inset(0 0 0 0); }

/* Drawn line for section labels. */
[data-line] { display: inline-block; vertical-align: middle; width: 0; height: 1px; background: var(--accent-oxblood); transition: width 600ms var(--ease-reveal); margin-right: 12px; }
[data-line].in { width: 32px; }

/* Word-by-word hero reveal. */
.word { display: inline-block; opacity: 0; transform: translateY(40%); filter: blur(6px); transition: opacity 1000ms var(--ease-hover), transform 1100ms var(--ease-hover), filter 900ms var(--ease-hover); }
.word.in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *, [data-curtain], [data-line], .word {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    width: auto !important;
    filter: none !important;
    transition: none !important;
  }
}

/* Hero warm-tone drift — two soft blobs slowly cycling on long durations.
   Sotheby's-style: alive but invisible unless you look for it. */
.hero-drift {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}
.hero-drift::before,
.hero-drift::after,
.hero-drift > .hero-drift__amber {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform, opacity;
}
.hero-drift::before {
  /* warm champagne — rich, dominant warm field */
  width: 75%;
  height: 90%;
  top: -15%;
  left: -15%;
  background: #DDB774;            /* saturated champagne */
  opacity: 0.62;
  animation: heroDriftA 32s ease-in-out infinite alternate;
}
.hero-drift::after {
  /* oxblood — primary brand bloom */
  width: 65%;
  height: 80%;
  top: 15%;
  right: -20%;
  background: var(--accent-oxblood, #8B2500);
  opacity: 0.24;
  animation: heroDriftB 38s ease-in-out infinite alternate;
}
.hero-drift__amber {
  /* deep amber accent at low opacity — adds tonal depth between the two main blobs */
  width: 45%;
  height: 55%;
  bottom: -10%;
  left: 30%;
  background: #C04020;
  opacity: 0.18;
  animation: heroDriftC 46s ease-in-out infinite alternate;
}

@keyframes heroDriftA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(32%, 22%, 0) scale(1.22); }
}
@keyframes heroDriftB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-26%, -32%, 0) scale(1.18); }
}
@keyframes heroDriftC {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(-18%, -25%, 0) scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-drift::before,
  .hero-drift::after,
  .hero-drift > .hero-drift__amber {
    animation: none !important;
  }
}