/**
 * The Hemp House — Hero Signature (capa cinematográfica)
 * =====================================================
 * Eleva el hero existente con:
 *   1. Veil de revelado (curtain hero-local, fail-safe)
 *   2. Motas de luz dorada a la deriva (canvas, desktop)
 *   3. Glow radial reactivo al cursor (desktop, fine pointer)
 *   4. Headline char-split con barrido de luz dorada
 *   5. Focus-pull al hacer scroll (escala + blur sutil)
 *
 * Reglas heredadas (MASTER.md / home-immersive.md):
 *   - Solo transform / opacity / filter en GPU
 *   - Paleta gold (#C9A961) + sage sobre fondos casi-OLED
 *   - Respeta prefers-reduced-motion y age-gate
 *   - Hover/cursor gates con (hover:hover) and (pointer:fine)
 *
 * Carga DESPUÉS de home-immersive.css (hereda custom properties).
 * Mantener este archivo <16 KB por el WAF de Webempresa.
 */

/* ====================================================
   1. Z-INDEX del hero — reordenado para las capas nuevas
   video(1) · overlay(2) · glow(2) · motes(3) · content(4) · veil(6)
   ==================================================== */
.thh-hero__content { z-index: 4; }
.thh-hero__scroll-hint { z-index: 4; }

/* ====================================================
   2. GLOW reactivo al cursor — radial dorado que sigue el ratón
   ==================================================== */
.thh-hero__glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 60vmax;
  height: 60vmax;
  margin: -30vmax 0 0 -30vmax;     /* centrado sobre el punto 0,0 */
  z-index: 2;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(
    circle,
    rgba(201, 169, 97, 0.18) 0%,
    rgba(201, 169, 97, 0.08) 30%,
    rgba(201, 169, 97, 0) 65%
  );
  mix-blend-mode: screen;
  will-change: transform, opacity;
  transition: opacity 600ms var(--thh-ease-out);
}
.thh-hero.is-pointer-active .thh-hero__glow { opacity: 1; }

/* ====================================================
   3. CANVAS de motas de luz doradas
   ==================================================== */
.thh-hero__motes {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--thh-ease-out);
}
.thh-hero.is-revealed .thh-hero__motes { opacity: 1; }

/* ====================================================
   4. VEIL de revelado — curtain hero-local (NO bloquea la página)
   Visible por defecto; JS lo retira en thh:ready.
   Fail-safe CSS: se auto-oculta a los 7s aunque el JS no corra.
   ==================================================== */
.thh-hero__veil {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 120% at 50% 50%,
      rgba(15, 31, 21, 0.6) 0%,
      var(--thh-bg-deep) 70%);
  /* fail-safe: si el JS muere, el veil se va igual */
  animation: thhVeilFailsafe 0.6s var(--thh-ease-out) 7s forwards;
  will-change: transform, opacity;
}

/* Línea/wordmark que brilla mientras el veil está activo */
.thh-hero__veil-mark {
  font-family: var(--thh-font-heading);
  font-style: italic;
  font-size: clamp(20px, 3vw, 34px);
  letter-spacing: 0.04em;
  color: transparent;
  background: linear-gradient(
    100deg,
    var(--thh-gold-dim) 0%,
    var(--thh-gold-bright) 45%,
    #fff7e6 50%,
    var(--thh-gold-bright) 55%,
    var(--thh-gold-dim) 100%
  );
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: thhMarkSheen 2.2s linear infinite;
}

/* Estado revelado: el veil se abre como cortina hacia arriba */
.thh-hero__veil.is-opening {
  animation: none;
  transform: translateY(-101%);
  transition: transform 1.1s var(--thh-ease-in-out);
}
.thh-hero__veil.is-gone { display: none; }

@keyframes thhMarkSheen {
  0%   { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}
@keyframes thhVeilFailsafe {
  to { transform: translateY(-101%); opacity: 0; }
}

/* ====================================================
   5. HEADLINE char-split + barrido de luz dorada
   Cada letra envuelta en .thh-char por JS; las palabras quedan en
   .thh-word (inline-block) para no romper el wrap natural.
   ==================================================== */
.thh-hero__title .thh-word {
  display: inline-block;
  white-space: nowrap;
}
.thh-hero__title .thh-char {
  display: inline-block;
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* Barrido de luz: una sola pasada sobre el título tras el reveal */
.thh-hero__title {
  position: relative;
}
.thh-hero.is-revealed .thh-hero__title::after {
  content: "";
  position: absolute;
  inset: -0.2em -0.1em;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(232, 200, 121, 0.55) 50%,
    transparent 62%
  );
  mix-blend-mode: screen;
  transform: translateX(-120%);
  animation: thhTitleSheen 1.6s var(--thh-ease-out) 0.5s 1 forwards;
}
@keyframes thhTitleSheen {
  to { transform: translateX(120%); }
}

/* ====================================================
   6. FOCUS-PULL — el vídeo del hero gana profundidad al hacer scroll
   (zoom + desenfoque vía GSAP en home-hero-signature.js).
   ==================================================== */
.thh-hero__bg-video,
.thh-hero__bg-image {
  transform-origin: center 40%;
  will-change: transform, filter;
}

/* Halo dorado de cierre del hero (debajo, refuerza el "vive") */
.thh-hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -40%;
  width: 120%;
  height: 80%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(201, 169, 97, 0.10) 0%,
    rgba(201, 169, 97, 0) 70%
  );
}

/* ====================================================
   7. ESTADO INICIAL pre-reveal (evita FOUC de las animaciones GSAP)
   El JS pone estos valores; el CSS los respalda por si GSAP tarda.
   Solo se aplican cuando el hero tiene la clase de "armado".
   ==================================================== */
.thh-hero.is-arming .thh-hero__eyebrow,
.thh-hero.is-arming .thh-hero__subtitle,
.thh-hero.is-arming .thh-hero__actions,
.thh-hero.is-arming .thh-hero__scroll-hint {
  opacity: 0;
}
.thh-hero.is-arming .thh-hero__title .thh-char {
  opacity: 0;
}

/* ====================================================
   8. MOBILE — aligerar: sin motes ni glow ni focus-pull pesado
   ==================================================== */
@media (max-width: 768px) {
  .thh-hero__motes,
  .thh-hero__glow {
    display: none;
  }
  /* El veil en mobile es un fade simple, sin cortina */
  .thh-hero__veil {
    animation: thhVeilFadeMobile 0.5s var(--thh-ease-out) 4s forwards;
  }
  .thh-hero__veil.is-opening {
    transform: none;
    opacity: 0;
    transition: opacity 0.7s var(--thh-ease-out);
  }
  @keyframes thhVeilFadeMobile {
    to { opacity: 0; visibility: hidden; }
  }
}

/* ====================================================
   9. REDUCED MOTION — todo estático, contenido visible, sin veil
   ==================================================== */
@media (prefers-reduced-motion: reduce) {
  .thh-hero__veil { display: none !important; }
  .thh-hero__motes,
  .thh-hero__glow { display: none !important; }
  .thh-hero.is-arming .thh-hero__eyebrow,
  .thh-hero.is-arming .thh-hero__subtitle,
  .thh-hero.is-arming .thh-hero__actions,
  .thh-hero.is-arming .thh-hero__scroll-hint,
  .thh-hero.is-arming .thh-hero__title .thh-char {
    opacity: 1 !important;
  }
  .thh-hero.is-revealed .thh-hero__title::after { display: none !important; }
}