/* =========================================================
   Hero v3 — calm, domain-agnostic background animation
   Concept: drifting horizontal rules + slow gradient breath
   The headline is dominant; motion stays in the background.
   ========================================================= */

.hero-v3 {
  position: relative;
  padding: clamp(5rem, 10vw, 9rem) 0 clamp(3rem, 5vw, 5rem);
  overflow: hidden;
  isolation: isolate;
  background: #2E0D24;
}

/* Background layers (all aria-hidden, pointer-events disabled) */
.hero-bg-v3 {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* 1. Slow-breathing conic + radial gradient -- the atmosphere */
.hero-bg-v3 .bg-gradient {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(ellipse 60% 55% at 75% 35%, rgba(232, 200, 118, 0.13), transparent 65%),
    radial-gradient(ellipse 55% 50% at 20% 75%, rgba(154, 53, 130, 0.28), transparent 70%),
    linear-gradient(165deg, #2E0D24 0%, #48143d 55%, #2E0D24 100%);
  animation: heroBreath 22s ease-in-out infinite;
  will-change: transform, opacity;
}
@keyframes heroBreath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  50%      { transform: translate3d(-1.5%, 1%, 0) scale(1.04); opacity: 0.92; }
}

/* 2. Faint vertical measure-rules -- editorial texture, static */
.hero-bg-v3 .bg-rules {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(
    to right,
    rgba(232, 200, 118, 0.035) 1px,
    transparent 1px
  );
  background-size: 140px 100%;
  mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, black 30%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 80% 100% at 50% 50%, black 30%, transparent 88%);
  opacity: 0.9;
}

/* 3. Drifting horizontal lines -- suggest text/pages sliding by */
.hero-bg-v3 .bg-drift {
  position: absolute;
  inset: 0;
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}
.drift-line {
  position: absolute;
  top: var(--y);
  left: -60%;
  width: var(--w);
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(232, 200, 118, 0.32) 30%,
    rgba(232, 200, 118, 0.55) 50%,
    rgba(232, 200, 118, 0.32) 70%,
    transparent 100%
  );
  animation: drift var(--d, 40s) linear infinite;
  animation-delay: var(--t, 0s);
  will-change: transform, opacity;
  opacity: 0;
}
@keyframes drift {
  0%   { transform: translate3d(0, 0, 0);      opacity: 0; }
  8%   { opacity: 0.9; }
  92%  { opacity: 0.9; }
  100% { transform: translate3d(260%, 0, 0);   opacity: 0; }
}

/* 4. Tiny gold dust motes -- the subtlest layer */
.hero-bg-v3 .bg-dust { position: absolute; inset: 0; }
.dust {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #e8c876;
  box-shadow: 0 0 6px rgba(232, 200, 118, 0.6);
  animation: dustFloat var(--d, 20s) ease-in-out infinite;
  animation-delay: var(--t, 0s);
  opacity: 0;
  will-change: transform, opacity;
}
@keyframes dustFloat {
  0%   { transform: translate3d(0, 0, 0);      opacity: 0; }
  20%  { opacity: 0.8; }
  80%  { opacity: 0.8; }
  100% { transform: translate3d(-10px, -24px, 0); opacity: 0; }
}

/* Inner wrapper: centered single column, headline dominant */
.hero-inner-v3 {
  position: relative;
  max-width: 900px;
}
.hero-v3 .hero-title {
  max-width: 900px;
}

/* Keep the strip block consistent with other hero versions */
.hero-v3 .hero-strip-wrap {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  position: relative;
}
.hero-v3 .hero-strip-wrap .hero-strip {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* Respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hero-bg-v3 .bg-gradient,
  .drift-line,
  .dust { animation: none !important; opacity: 1; }
  .drift-line, .dust { opacity: 0.4; }
}