/* ============================================
   GRUPO HRZ · Motion & Polish layer
   ============================================ */

/* ============== WORD-STAGGERED REVEALS ==============
   Words are always visible by default — wrapping is just for per-word styling.
   The whole heading fades via parent .reveal animation. */
[data-stagger-words] .word {
  display: inline-block;
  vertical-align: top;
}
[data-stagger-words] .word-i {
  display: inline-block;
  /* No opacity/transform reveal here — too fragile with inherited gradient text */
}

/* ============== SCROLL PROGRESS BAR ============== */
.scroll-progress {
  position: fixed;
  top: 56px; /* below nav */
  left: 0; right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 90;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.5);
}

/* ============== GRAIN OVERLAY ============== */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Subtle grain on full-bleed dark editorial sections too */
.editorial::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* ============== SECTION DIVIDERS ============== */
/* hairline gold divider between adjacent dark sections */
.section + .section,
.section + .editorial,
.editorial + .section,
.editorial + .editorial,
.section + .number-slide,
.number-slide + .section {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.section + .section::before,
.section + .editorial::before,
.editorial + .section::before,
.editorial + .editorial::before,
.number-slide + .section::before,
.section + .number-slide::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(720px, 60%);
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(212, 175, 55, 0.32) 50%, transparent 100%);
  pointer-events: none;
}

/* ============== CARD HOVER LIFTS ============== */
.case-card,
.flow-card,
.founder-card,
.scen-cell,
.cost-ticker,
.pain-card {
  transition: transform .5s var(--ease-out), border-color .5s var(--ease-out), background .5s var(--ease-out);
}
.case-card:hover {
  border-color: rgba(212, 175, 55, 0.18);
}
.scen-cell:hover {
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.05) 0%, #050505 100%);
}
.pain-card:hover {
  border-color: rgba(212, 175, 55, 0.18);
  background: linear-gradient(180deg, rgba(212, 175, 55, 0.04), rgba(255, 255, 255, 0));
}
.cost-ticker:hover {
  background: #080808;
}

/* ============== LINK MICRO-INTERACTION ============== */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 600;
}
.text-link .arrow {
  display: inline-block;
  transition: transform .35s var(--ease);
}
.text-link:hover .arrow {
  transform: translateX(6px);
}

/* ============== BUTTON ARROW MICRO ============== */
.btn .arrow {
  display: inline-block;
  margin-left: 6px;
  transition: transform .35s var(--ease);
}
.btn:hover .arrow {
  transform: translateX(4px);
}

/* ============== SECTION HEAD VERTICAL RHYTHM ============== */
/* Standardize the "eyebrow → headline → lede" pattern across the page */
.section .eyebrow {
  margin-bottom: 20px;
  display: inline-block;
}
.section .reveal > .eyebrow + .t-h1,
.section .reveal > .eyebrow + .t-h2 {
  margin-top: 4px;
}
.t-h1 + .t-lead,
.t-h2 + .t-lead,
.editorial-h1 + .editorial-lede {
  margin-top: 28px !important;
}

/* ============== HERO TITLE LAYER STABILITY ============== */
/* Hero parallax via JS sets transform on title; ensure it's GPU'd */
.hero-title,
.hero-sub,
.hero-eyebrow {
  will-change: transform;
}

/* Fraunces optical sizing helper */
.font-serif {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" 50;
}

/* ============== SCROLL HINT (tiny) ============== */
.hero::before {
  content: "";
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 56px;
  background: linear-gradient(180deg, transparent 0%, rgba(212, 175, 55, 0.5) 50%, transparent 100%);
  z-index: 3;
  animation: scroll-hint 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes scroll-hint {
  0%, 100% { opacity: 0.3; transform: translateX(-50%) scaleY(0.6); }
  50% { opacity: 1; transform: translateX(-50%) scaleY(1); }
}

/* ============== CURSOR REFINEMENT ============== */
@media (hover: hover) {
  a, button, [data-magnetic] {
    cursor: pointer;
  }
}