/**
 * Hero a pantalla completa: Hero A (Home, vídeo + máquina de escribir) y
 * Hero B (Sobre nosotros, imagen fija).
 *
 * Origen: bloques HERO de home-final.html y about-us.html (valores exactos).
 * Se carga solo en la portada y en la plantilla pages/about-us.php.
 *
 * @package silomasters
 */

.hero{
  position:relative; color:var(--white); overflow:hidden;
  min-height:100vh; min-height:100svh; display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.hero-media{position:absolute; inset:0; z-index:0; background:var(--graphite);}
.hero-media video{width:100%; height:100%; object-fit:cover; display:block;}

/* Hero B: <img> en lugar de background-image (mismo encuadre que cover + center) */
.hero-media-static{width:100%; height:100%; object-fit:cover; object-position:center;}

.hero-gradient{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 90% 65% at 50% 105%, rgba(236,101,41,.4) 0%, rgba(236,101,41,0) 60%),
    linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, rgba(0,0,0,.1) 55%, rgba(0,0,0,.45) 100%),
    linear-gradient(90deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35) 100%);
}

.hero-content{position:relative; z-index:2; padding:0 24px;}

/* ---- Hero A: título con máquina de escribir ---- */
.hero-title{
  position:relative;
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:clamp(56px, 11vw, 150px); line-height:0.88; letter-spacing:-0.01em;
  margin:0; color:var(--white);
}
/*
 * .hero-title-text es el texto real (SEO, lectores de pantalla, sin JS).
 * Con .is-typing se vuelve invisible pero sigue reservando las dos líneas, y
 * la animación se escribe en .hero-title-typed, superpuesta: el H1 no cambia
 * de altura (CLS 0).
 */
.hero-title-typed{display:none;}
/*
 * Hueco invisible del cursor del mockup (2px + .05em, misma altura): el texto
 * real ocupa y se centra exactamente igual que la capa animada, así que el
 * relevo al activar .is-typing es imperceptible.
 */
.hero-title-text::after{content:''; display:inline-block; width:.05em; height:.85em; margin-left:2px; vertical-align:-.1em;}
.hero-home.is-typing .hero-title-text{opacity:0;}
.hero-home.is-typing .hero-title-typed{display:block; position:absolute; top:0; left:0; right:0;}
/*
 * Cada línea arranca en una posición fija del layout y se centra con
 * transform: al escribir, los caracteres ya escritos no se desplazan en el
 * layout (no generan layout shift), pero visualmente crecen desde el centro
 * como en el mockup.
 */
.hero-title-line{display:block; width:max-content; margin-left:50%; transform:translateX(-50%);}
.hero-title-line::before{content:'\200B';} /* conserva la altura de la línea vacía (al inicio: no se mueve) */
/*
 * Cursor: va al inicio de la línea 2 con avance neto 0 (misma alineación
 * vertical que en el mockup) y el JS lo lleva al final del texto con
 * transform (--cursor-x). La línea reserva su anchura para centrar igual
 * que el mockup (texto + 2px + .05em).
 */
.hero-title-line-cursor{padding-right:calc(.05em + 2px);}
.hero-title-typed .hero-title-cursor{margin-left:0; margin-right:-.05em; transform:translateX(var(--cursor-x, 2px));}

.hero-title-future{display:inline-block; color:var(--white);}
.hero-title-future.hero-title-future-active{animation:heroFutureBlink 2.6s ease-in-out infinite;}
@keyframes heroFutureBlink{
  0%{ color:var(--white); }
  20%, 75%{ color:#F5A46B; }
  100%{ color:var(--white); }
}
.hero-title-cursor{
  display:inline-block; width:.05em; height:.85em; margin-left:2px;
  background:var(--white); vertical-align:-.1em;
  animation:heroCursorBlink .85s step-end infinite;
}
@keyframes heroCursorBlink{ 0%,100%{opacity:1;} 50%{opacity:0;} }

/* CTA: siempre visible. Como en el estado final del mockup, sin elevación al hover. */
.hero-calc-btn{
  display:inline-flex; margin-top:32px;
  transition:opacity .5s ease, transform .5s ease;
}
.hero-calc-btn:hover{transform:translateY(0);}

/* ---- indicador de scroll: siempre visible ---- */
.hero-scroll{
  position:absolute; left:50%; bottom:36px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-scroll-mouse{
  width:26px; height:42px; border:2px solid rgba(255,255,255,.7); border-radius:14px; position:relative;
}
.hero-scroll-mouse::before{
  content:''; position:absolute; top:7px; left:50%; width:4px; height:8px;
  background:var(--white); border-radius:2px; transform:translateX(-50%);
  animation:heroScrollDot 1.8s ease-in-out infinite;
}
.hero-scroll-label{
  font-family:var(--label); font-size:11px; letter-spacing:.15em; color:rgba(255,255,255,.75);
}
@keyframes heroScrollDot{
  0%{ opacity:1; transform:translate(-50%,0); }
  70%{ opacity:0; transform:translate(-50%,16px); }
  100%{ opacity:0; transform:translate(-50%,16px); }
}
@media(max-width:480px){ .hero-scroll{bottom:24px;} }

/* ---- Hero B: título y subtítulo estáticos ---- */
.hero-static-title{
  font-family:var(--display); font-weight:900; text-transform:uppercase; color:var(--white);
  font-size:clamp(38px, 6vw, 80px); line-height:1.05; max-width:920px; margin:0 auto;
}
.hero-static-sub{
  margin:20px auto 0; font-style:italic; font-weight:500; color:rgba(255,255,255,.9);
  font-size:19px; max-width:640px;
}

/* ---- movimiento reducido ---- */
@media(prefers-reduced-motion: reduce){
  .hero-title-future.hero-title-future-active,
  .hero-title-cursor,
  .hero-scroll-mouse::before{animation:none;}
  .hero-calc-btn{transition:none;}
}