/* ===========================================================
   HERO-SCRUB — componente aislado de vídeo controlado por scroll
   ===========================================================
   Depende únicamente de las variables de color/tipografía ya
   definidas en :root por css/style.css (--color-gold, --font-*,
   --header-h, --space-*, --ease-out). Si se reutiliza este
   componente en otro proyecto, basta con definir esas variables
   (o sustituir los var(...) de abajo por valores fijos).

   Las constantes que controlan el comportamiento (altura del
   efecto, velocidad de suavizado, rango de desvanecido del
   texto…) NO están aquí: viven en js/hero-scrub.js. Este archivo
   solo define presentación.
   =========================================================== */

.hero-scrub {
  position: relative;
  /* Altura del "carril" de scroll. Controlada desde JS vía
     --hero-scrub-vh (ver CONFIG.SCROLL_HEIGHT_VH); 300vh de
     respaldo si el JS no llega a ejecutarse. */
  height: var(--hero-scrub-vh, 300vh);
  background: var(--color-hero-bg, #030303);
}

/* Modo estático (reduced-motion, canvas no soportado, o fallback):
   el componente ya no necesita reservar espacio de scroll. */
.hero-scrub.hero-scrub--static { height: auto; }

/* El sticky se ancla justo debajo del header (top: var(--header-h)) y
   ocupa el resto de la pantalla, para que el header tenga su propio
   espacio fijo y la escena (barco, mástil, bandera) se vea siempre
   completa debajo, nunca tapada por él. */
.hero-scrub__sticky {
  position: sticky;
  top: var(--header-h, 0px);
  height: calc(100svh - var(--header-h, 0px));
  overflow: hidden;
  background: var(--color-hero-bg, #030303);
  display: flex;
  align-items: center;
}
.hero-scrub--static .hero-scrub__sticky {
  position: relative;
  top: auto;
  margin-top: var(--header-h, 0px);
  min-height: calc(100svh - var(--header-h, 0px));
}

.hero-scrub__canvas,
.hero-scrub__video,
.hero-scrub__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* Aproximación para el póster/vídeo de respaldo (rutas que no pasan por
     canvas, solo se ven un instante durante la precarga o en el fallback
     estático). El canvas en JS usa un encuadre más elaborado — ver
     drawFrameImage y CONFIG.MOBILE_CROP_ASPECT — que no es reproducible
     con solo object-fit/object-position. */
  object-fit: cover;
  object-position: center 15%;
}

/* Desktop: se ve el frame completo, sin recortes (mismo criterio que el
   canvas en JS — ver drawFrameImage, CONFIG.EDGE_FADE_PCT). Puede dejar
   franjas lisas del color de fondo a los lados en monitores muy
   panorámicos (--color-hero-bg, sin difuminar). El fundido en los bordes
   izq./der. de la propia imagen (5%) que hace el canvas evita que se note
   como un corte duro contra ese fondo; el póster/vídeo (rutas de
   respaldo, no pasan por canvas) se quedan sin ese fundido por
   simplicidad — solo se ven un instante durante la precarga o en el
   fallback estático. */
@media (min-width: 768px) {
  .hero-scrub__canvas,
  .hero-scrub__video,
  .hero-scrub__poster {
    object-fit: contain;
    object-position: center;
  }
}
.hero-scrub__canvas { z-index: 2; opacity: 0; }
.hero-scrub__video { z-index: 2; }
.hero-scrub__poster { z-index: 1; transition: opacity 600ms var(--ease-out, ease-out); }

/* Una vez lista la escena (frames o vídeo cargados), el canvas/vídeo
   se revela y el póster se retira. Lo activa js/hero-scrub.js
   añadiendo esta clase al contenedor sticky. */
.hero-scrub__sticky.is-ready .hero-scrub__canvas,
.hero-scrub__sticky.is-ready .hero-scrub__video { opacity: 1; }
.hero-scrub__sticky.is-ready .hero-scrub__poster { opacity: 0; }

/* Velo de contraste para que el titular sea legible sobre
   cualquier fotograma de la escena (más denso donde está el texto). */
.hero-scrub__scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(75deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.42) 34%, rgba(0,0,0,0.05) 60%),
    linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 30%);
}

.hero-scrub .hero__content {
  position: relative;
  z-index: 4;
  max-width: 760px;
  padding-bottom: var(--space-6, 4rem);
  opacity: 0;
  animation: hero-text-in 500ms ease-out 100ms forwards;
}
@keyframes hero-text-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-scrub .hero__content > * { will-change: opacity, transform; }

/* Modo estático: sin animación, texto siempre visible. */
.hero-scrub--static .hero__content { opacity: 1 !important; transform: none !important; }
.hero-scrub--static .hero-scrub__canvas,
.hero-scrub--static .hero-scrub__video { display: none; }
.hero-scrub--static .hero-scrub__poster { opacity: 1; }

@media (max-width: 768px) {
  .hero-scrub .hero__content { padding-bottom: var(--space-4, 2rem); }
  /* Sube el bloque de texto (en vez de centrado verticalmente) para que
     el titular quede arriba, sobre la zona negra del cielo, en vez de
     sobre el barco. */
  .hero-scrub__sticky { align-items: flex-start; }
  .hero-scrub .hero__content { padding-top: var(--space-5, 3rem); }
  .hero-scrub .hero__title { margin-top: 0; }
  /* El bloque del título se centra horizontalmente (como conjunto),
     pero el texto de cada línea sigue alineado a la izquierda dentro
     de ese bloque (no se centra línea a línea). */
  .hero-scrub .hero__title { width: fit-content; margin-inline: auto; text-align: left; }
  .hero__subtitle-break { display: inline; }
  /* +10 líneas, -2 líneas, +1 línea (font-size 1rem, line-height 1.6
     heredado en este breakpoint = 1.6rem/línea): 13.8rem + 1.6rem = 15.4rem.
     Ajuste posterior: el botón quedaba solapado con el widget de música
     fijo (esquina inferior izquierda); se reduce ~3rem para dejar margen
     de separación sin perder la posición pedida por el usuario.
     +1 línea (1.6rem): 12.4rem + 1.6rem = 14rem.
     +1 línea más: 14rem + 1.6rem = 15.6rem. */
  .hero-scrub .hero__subtitle { margin-top: 15.6rem; }
}