/* ==========================================================================
   THE BOLD WAY - V3 · HERO EXPRESSIONS
   Shared logo light-reveal + the three expressions (Forged / Rise / Statement)
   ========================================================================== */

/* ---------- LOGO: forged-in-the-dark light reveal ---------- */
.hero-logo { --glow: 0; position: relative; isolation: isolate; }
.hero-logo::after {
  content: ''; position: absolute; left: 50%; top: 46%;
  width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side,
    rgba(255,140,70, calc(0.20 + var(--glow) * 0.34 + (var(--ember-glow, 0.4) - 0.4) * 0.3)),
    rgba(229,68,58, calc(0.10 + var(--glow) * 0.18)) 45%,
    transparent 72%);
  filter: blur(8px);
  transition: background 0.3s var(--ease);
}
.hero-logo img {
  opacity: 0; transform: translateY(18px) scale(0.97);
  filter: brightness(0.45) saturate(0.65);
  transition: opacity 1.4s var(--ease-out), transform 1.6s var(--ease-out), filter 0.45s var(--ease);
}
/* after load: full brightness + live cursor-proximity forge glow */
body.loaded .hero-logo img {
  opacity: 1; transform: none;
  filter:
    brightness(calc(1 + var(--glow) * 0.16))
    saturate(calc(1.05 + var(--glow) * 0.20))
    drop-shadow(0 14px 40px rgba(142,32,24, calc(0.40 + var(--glow) * 0.40)));
}

/* wordmark reveal */
.hero-wordmark { opacity: 0; transform: translateY(10px); transition: opacity 1s var(--ease-out) 0.5s, transform 1s var(--ease-out) 0.5s; }
body.loaded .hero-wordmark { opacity: 1; transform: none; }

/* staged hero text entrance (independent of scroll reveal) */
.v3-hero .hero-eyebrow,
.v3-hero .hero-h,
.v3-hero .hero-sub,
.v3-hero .hero-actions,
.v3-hero .hero-micro {
  opacity: 0; transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
}
body.loaded .v3-hero .hero-eyebrow { transition-delay: 0.20s; opacity: 1; transform: none; }
body.loaded .v3-hero .hero-h       { transition-delay: 0.30s; opacity: 1; transform: none; }
body.loaded .v3-hero .hero-sub     { transition-delay: 1.35s; opacity: 1; transform: none; }
body.loaded .v3-hero .hero-actions { transition-delay: 1.55s; opacity: 1; transform: none; }
body.loaded .v3-hero .hero-micro   { transition-delay: 1.72s; opacity: 1; transform: none; }

.hero-h { font-size: var(--fs-h1); font-weight: 900; line-height: 1.06; letter-spacing: -0.04em; }
.hero-h .ink-gold, .hero-h .ink-ember { display: inline-block; }

/* Headline: bold masked line reveal that BREATHES, then an unmistakable white->gold wipe.
   No drop-shadow (it was being clipped by the mask into a visible box). */
.v3-hero .hero-h { opacity: 1; transform: none; }
.hero-h .hl { display: block; overflow: hidden; padding-bottom: 0.16em; margin-bottom: -0.10em; }
.hero-h .hl > span { display: block; transform: translateY(118%); transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
body.loaded .v3-hero .hero-h .hl:nth-child(1) > span { transition-delay: 0.40s; transform: none; }
body.loaded .v3-hero .hero-h .hl:nth-child(2) > span { transition-delay: 0.85s; transform: none; }
body.loaded .v3-hero .hero-h .hl:nth-child(3) > span { transition-delay: 1.30s; transform: none; }

/* gold emphasis: the line rises in WHITE, then lights up gold left->right as a slow, clear payoff */
.hero-h .ink-gold {
  background: linear-gradient(94deg, var(--gold) 0%, var(--gold) 40%, #F7E9B8 49%, #F6F6F3 60%, #F6F6F3 100%);
  background-size: 235% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
body.loaded .hero-h .ink-gold { animation: heroGoldWipe 1.7s cubic-bezier(0.45, 0, 0.15, 1) 2.05s 1 forwards; }
@keyframes heroGoldWipe { from { background-position: 100% 0; } to { background-position: 0% 0; } }

/* ---------- EXPRESSION A - FORGED (default) ---------- */
.hero-forged .hero-content.center { display: flex; flex-direction: column; align-items: center; }
.hero-forged .hero-logo { margin-bottom: 28px; }
.hero-forged .hero-h { margin-top: 6px; max-width: 20ch; }
.hero-forged .hero-logo img { height: clamp(92px, 13.5vw, 170px); }
.hero-forged .hero-inner { padding-block: clamp(88px, 12vh, 120px) clamp(64px, 9vh, 100px); }
@media (max-height: 880px) { .hero-forged .scroll-cue { display: none; } }

/* the quiet brand-promise line under the sub */
.hero-promise {
  margin-top: 20px; font-size: 14px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold);
  opacity: 0; transform: translateY(14px);
  transition: opacity 1s var(--ease-out) 1.45s, transform 1s var(--ease-out) 1.45s;
}
body.loaded .hero-promise { opacity: 1; transform: none; }

/* subliminal forge-fire layer - a warm glow rising from the base only, never a photo */
.hero-forge {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 36%, rgba(0,0,0,0.5) 70%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 36%, rgba(0,0,0,0.5) 70%, #000 100%);
}
.hero-forge img { width: 132%; height: 132%; object-fit: cover; object-position: 58% 100%; opacity: 0.32; mix-blend-mode: screen; filter: contrast(1.05) saturate(1.1) brightness(0.92); }
@media (prefers-reduced-motion: reduce) { .hero-forge img { opacity: 0.22; } }