/* ============================================================
   SCRUB — sección de video anclada al scroll
   El contenedor mide --scrub-length; el stage es sticky a 100vh.
   --progress (0→1) lo escribe js/scroll-scrub.js y aquí solo se
   consume: una propiedad custom, cero JavaScript de animación.
   ============================================================ */

.scrub {
  position: relative;
  height: var(--scrub-length);
}

/* El hero y la vendimia no duran lo mismo. El hero abre la pagina
   y tiene que aguantar el recorrido; la vendimia es un solo
   concepto, asi que su riel es mas corto. Con el mismo
   `--scrub-length` de tres pantallas, la vendimia se sintia como
   un fallo de scroll. */
.scrub--corta {
  height: calc(var(--scrub-length) * 0.62);
}

.scrub__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.scrub__video {
  position: absolute;
  inset: 0;
  z-index: var(--z-stage);
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--noche);
}

.scrub__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.scrub__keyline {
  position: absolute;
  inset: 0;
  z-index: 3;
  border: var(--keyline) solid transparent;
  pointer-events: none;
  transition: border-color var(--dur) var(--ease);
}

.scrub[data-state="ready"] .scrub__keyline {
  border-color: var(--line-dark);
}

/* --- Variante oscura: la ventana a la sala ----------------- */
.scrub--dark {
  background: var(--noche);
}

.scrub--dark .scrub__scrim {
  background:
    linear-gradient(
      to top,
      rgba(23, 16, 15, 0.94) 0%,
      rgba(23, 16, 15, 0.52) 34%,
      rgba(23, 16, 15, 0) 66%
    ),
    linear-gradient(
      to bottom,
      rgba(23, 16, 15, 0.6) 0%,
      rgba(23, 16, 15, 0) 28%
    );
}

.scrub--dark .scrub__stage {
  color: var(--hueso);
}

.scrub--dark .scrub__lede {
  color: var(--hueso-2);
}

/* --- Panel de texto ---------------------------------------- */
.scrub__panel {
  position: absolute;
  inset: auto 0 0;
  z-index: var(--z-panel);
  display: grid;
  gap: var(--space-m);
  padding: var(--space-3xl) var(--gutter) var(--space-2xl);
  transition: opacity var(--dur-slow) var(--ease);
}

.scrub[data-state="loading"] .scrub__panel {
  opacity: 0.25;
}

/* --- Sostén del texto sobre el metraje ----------------------
   El degradado de `.scrub--dark` es fijo sobre la altura del stage, y
   el bloque de texto no lo es: cambia con el ancho, con el tamano del
   wordmark y con cuantas lineas.meta el lede. Medido, el borde del
   scrim caia justo sobre el eyebrow y lo dejaba a 1,14:1 en movil
   apaisado y a 3,96:1 en 1024x600. Un degradado en porcentajes no
   puede seguir contenido que se mueve.

   Asi que el sosten vive en el panel, que si crece con el texto, y
   sube `18rem` por encima de su borde superior para alcanzar el
   eyebrow, que vive dentro del padding. A ancho completo no deja
   bordes laterales, y en un stage corto el headroom pesa mas y el
   eyebrow cae mas abajo en el degradado, donde hay mas tinta: se
   corrige solo. */
#inicio .scrub__panel {
  background: linear-gradient(
    to top,
    rgba(23, 16, 15, 0.62) 0%,
    rgba(23, 16, 15, 0.62) 40%,
    rgba(23, 16, 15, 0.5) 66%,
    rgba(23, 16, 15, 0) 96%
  );
  background-size: 100% calc(100% + 8rem);
  background-position: 0 100%;
  background-repeat: no-repeat;
  text-shadow: 0 1px 2px rgba(23, 16, 15, 0.4), 0 2px 16px rgba(23, 16, 15, 0.45);
}

/* --- Coreografía del panel: solo el hero ---------------------
   El panel cuelga de un stage sticky, clavado al viewport durante
   los 460vh del riel, así que una línea de tiempo `view()` sobre el
   panel mediría siempre lo mismo. Lo que de verdad viaja es la
   sección. Por eso el movimiento se apoya en `--progress`, que es el
   mismo número que gobierna `currentTime`: el texto y el metraje no
   pueden separarse nunca, ni un frame.

   Cada elemento tiene su propia ventana de salida y su propia
   velocidad. Esa diferencia de ritmo es lo que hace que el conjunto
   se lea como una composición y no como un fundido único; con la
   misma curva para los cuatro, el efecto se ve como una mascara que
   se desliza.

   Las ventanas viven en el stage, no en el panel, porque asi quedan a
   un solo sitio y no se recalculan por hijo. El scrim no se anima: es
   el sostén del texto sobre el video, y desvanecerlo para "devolverle
   el encuadre" dejaba al titulo sin base oscura y lo comia el frame
   mas claro de la imagen. */
#inicio .scrub__stage {
  --p: var(--progress, 0);
  --out-cue: clamp(0, calc((var(--p) - 0.005) / 0.065), 1);
  --out-eyebrow: clamp(0, calc((var(--p) - 0.03) / 0.17), 1);
  --out-mark: clamp(0, calc((var(--p) - 0.06) / 0.46), 1);
  --out-lede: clamp(0, calc((var(--p) - 0.20) / 0.60), 1);
}

/* La pista es una invitación, no una etiqueta. En cuanto el usuario
   ha entendido que aquí hay riel, su trabajo está hecho y sobra. */
#inicio .scrub__cue {
  opacity: calc(1 - var(--out-cue));
  transform: translate3d(0, calc(var(--out-cue) * 0.75rem), 0);
}

/* El eyebrow deja de ser el acento de marca. Es texto de 12,8px en
   mayusculas sobre un video que en ningun momento garantiza un fondo
   estable, y a ese tamaño WCAG exige 4,5:1: no hay forma de cumplirlo
   sin oscurecer el video lo suficiente como para que se vea como un
   cuadro. Subido a 20px con peso 700 entra de lleno en "texto grande",
   y la barra baja a 3:1 — medido 3,40:1 sobre el frame mas claro con
   un velo mucho mas discreto. El acento se queda en el resto del
   sitio, pero no como tinta pequeña sobre imagen en movimiento. */
#inicio .scrub__panel .eyebrow {
  color: var(--hueso);
  font-size: 1.25rem;
  font-weight: 700;
  opacity: calc(1 - var(--out-eyebrow));
  transform: translate3d(0, calc(var(--out-eyebrow) * -1.5rem), 0);
}

/* En pantallas bajas no cabe un sostén discreto: el bloque de texto
   llena el stage y el borde del degradado cae por encima del eyebrow.
   Solo aqui se refuerza; en vertical y en escritorio el video se ve
   limpio, que es donde se mira. */
@media (max-height: 620px) {
  #inicio .scrub__panel {
    background: linear-gradient(
      to top,
      rgba(23, 16, 15, 0.92) 0%,
      rgba(23, 16, 15, 0.88) 32%,
      rgba(23, 16, 15, 0.78) 58%,
      rgba(23, 16, 15, 0) 92%
    );
    background-size: 100% calc(100% + 12rem);
  }
}

/* El wordmark es el movimiento grande del hero: sube, encoge un poco
   y se disuelve a lo largo de la mitad del riel. El `scale` va en el
   mismo `transform` a proposito, para no abrir una capa de
   composicion paralela. */
#inicio .wordmark {
  opacity: calc(1 - var(--out-mark));
  transform:
    translate3d(0, calc(var(--out-mark) * -6rem), 0)
    scale(calc(1 - var(--out-mark) * 0.04));
}

/* El lede es lo ultimo en irse. Es el mensaje, no la marca, asi que
   aguanta hasta el 80% del riel: cuando se va, el video ya lleva un
   rato ganado la escena. */
#inicio .scrub__lede {
  opacity: calc(1 - var(--out-lede));
  transform: translate3d(0, calc(var(--out-lede) * -2.5rem), 0);
}

.wordmark {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-wordmark);
  font-weight: 500;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
}

.wordmark em {
  font-weight: 400;
}

.scrub__lede {
  max-width: var(--measure);
  font-size: var(--fs-lede);
  font-weight: 400;
  line-height: 1.5;
}

.scrub__cue {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--hueso-2);
}

.scrub__cue::before {
  content: "";
  width: clamp(2.5rem, 8vw, 5rem);
  height: var(--keyline);
  background: var(--vino-300);
}

/* --- Raíl de progreso + reloj ------------------------------ */
.scrub__hud {
  position: absolute;
  top: 50%;
  right: var(--gutter);
  z-index: var(--z-panel);
  display: grid;
  justify-items: center;
  gap: var(--space-s);
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.scrub[data-state="ready"] .scrub__hud {
  opacity: 1;
}

.scrub__time {
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  color: var(--hueso);
}

.scrub__time--muted {
  color: var(--hueso-3);
}

.scrub__track {
  position: relative;
  width: var(--keyline);
  height: var(--rail-track);
  background: var(--line-dark);
}

/* scaleY en vez de height: mismo resultado visual, cero layout.
   inset fija la altura; el origen es el borde superior. */
.scrub__fill {
  position: absolute;
  inset: var(--rail-inset) 0;
  background: var(--vino-300);
  transform-origin: top center;
  transform: scaleY(var(--progress, 0));
}

.scrub__marker {
  position: absolute;
  top: 50%;
  left: 0;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  background: var(--vino-300);
  transform: translateY(calc(var(--rail-travel) * (var(--progress, 0) - 0.5))) rotate(45deg);
}

/* --- Estado de carga --------------------------------------- */
.scrub__loader {
  position: absolute;
  top: 7rem;
  left: 50%;
  z-index: var(--z-panel);
  width: min(11rem, 40vw);
  height: var(--keyline);
  overflow: hidden;
  background: var(--line-dark);
  opacity: 0;
  transform: translateX(-50%);
  transition: opacity var(--dur) var(--ease);
}

.scrub[data-state="loading"] .scrub__loader {
  opacity: 1;
}

.scrub__loader span {
  display: block;
  width: 40%;
  height: 100%;
  background: var(--vino-300);
  animation: vn-loader 1400ms var(--ease) infinite;
}

@keyframes vn-loader {
  from { transform: translateX(-110%); }
  to   { transform: translateX(360%); }
}

/* --- Modo respaldo: sin scrub ------------------------------ */
.scrub[data-mode="loop"] {
  height: auto;
}

.scrub[data-mode="loop"] .scrub__stage {
  position: relative;
  height: auto;
  min-height: 78vh;
}

.scrub[data-mode="loop"] .scrub__hud,
.scrub[data-mode="loop"] .scrub__loader,
.scrub[data-mode="loop"] .scrub__cue {
  display: none;
}

.scrub[data-mode="loop"] .wordmark {
  transform: none;
}

/* En modo loop `--progress` vale 0 y las ventanas ya estan en 0, asi
   que esto deberia ser redundante. Se neutraliza igual de forma
   explicita porque que el titulo se lea bien no puede depender de que
   un numero dentro del motor siga exactamente en cero. */
.scrub[data-mode="loop"] .scrub__panel > * {
  opacity: 1;
  transform: none;
}

.scrub[data-mode="loop"] .scrub__video {
  position: absolute;
}

@media (hover: none) {
  .scrub__cue {
    display: none;
  }
}

/* --- Segundo scrub: la vendimia -----------------------------
   Es el mismo motor, pero con una seccion mas corta: la
   vendimia es un momento, no una apertura. Un riel de scroll de
   tres pantallas para un solo concepto hace que el usuario piense
   que se le ha colado algo. */
.scrub__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
  max-width: 18ch;
}

/* --- Loop ambiental: la finca ------------------------------
   No es un scrub, asi que no tiene el motor de sticky. Es un
   video decorativo en loop, con el texto encima. */
.ambiente {
  background: var(--noche);
  border-block: var(--keyline) solid var(--line-dark);
}

.ambiente__stage {
  position: relative;
  display: grid;
  min-height: 88vh;
  min-height: 88dvh;
  overflow: hidden;
  isolation: isolate;
}

.ambiente__video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--noche-2);
}

.ambiente__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    100deg,
    var(--noche) 0%,
    color-mix(in oklab, var(--noche) 78%, transparent) 46%,
    color-mix(in oklab, var(--noche) 28%, transparent) 100%
  );
}

.ambiente__panel {
  position: relative;
  z-index: var(--z-panel);
  align-self: center;
  max-width: var(--measure-wide);
  padding: var(--space-2xl) var(--gutter);
  color: var(--hueso);
}

.ambiente__titulo {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--hueso);
  margin-block: var(--space-s) var(--space-m);
}

.ambiente__texto {
  max-width: var(--measure);
  font-size: var(--fs-lede);
  color: var(--hueso-2);
}

/* Con `prefers-reduced-motion` y sin JS, nadie llama a play(): el
   poster del <video> es lo unico que se ve, y es lo correcto. No
   hace falta ninguna regla CSS para eso, asi que no hay ninguna.
   Lo que si hace falta es que el poster no desaparezca: por eso
   el `preload="none"` del HTML y no un preload automatico. */