/* ============================================================
   VIDA INDOOR CYCLING - base.css
   Tokens de marca, superficies clay, tipografia y motion.
   Las tipografias se declaran en css/fonts.css
   ============================================================ */

:root {
  /* ---------- Color: paleta VIDA ---------- */
  --yellow: #ffe600;
  --yellow-deep: #e5cf00;
  --carbon: #0b0b0b;
  --grey: #8f8f8f;
  --ivory: #f8f6ef;

  /* Escala de profundidad sobre carbon. Un unico acento. */
  --bg: #090908;
  --surface: #121211;
  --surface-2: #171716;
  --surface-3: #1e1e1c;

  --fg: var(--ivory);
  --fg-soft: #b4b2ac;  /* 8.6:1 sobre --surface */
  --fg-faint: #8f8f8f; /* 5.5:1 sobre --surface */
  --line: rgba(248, 246, 239, 0.1);
  --line-strong: rgba(248, 246, 239, 0.22);

  /* Sobre amarillo */
  --on-yellow: #0b0b0b;
  --on-yellow-soft: #332e02;

  /* ---------- Superficies clay ----------
     Tres sombras: una exterior que separa de la pagina y dos
     interiores que dan el volumen. La primera de la lista pinta
     encima, asi que el orden no es decorativo. En oscuro el
     brillo no es blanco puro ni la sombra negro puro. */
  --clay-lift: 0 22px 46px -20px rgba(0, 0, 0, 0.9);
  --clay-dark: inset -6px -8px 16px rgba(0, 0, 0, 0.42);
  --clay-light: inset 7px 9px 16px rgba(248, 246, 239, 0.055);
  --clay: var(--clay-lift), var(--clay-dark), var(--clay-light);

  --clay-lift-sm: 0 12px 26px -14px rgba(0, 0, 0, 0.85);
  --clay-dark-sm: inset -4px -5px 10px rgba(0, 0, 0, 0.38);
  --clay-light-sm: inset 4px 5px 10px rgba(248, 246, 239, 0.05);
  --clay-sm: var(--clay-lift-sm), var(--clay-dark-sm), var(--clay-light-sm);

  /* El amarillo lleva su propia sombra teñida, no negra */
  --clay-yellow:
    0 18px 38px -16px rgba(140, 126, 0, 0.55),
    inset -5px -7px 14px rgba(120, 108, 0, 0.3),
    inset 6px 8px 14px rgba(255, 255, 255, 0.4);

  /* ---------- Forma ----------
     Una sola escala, de fuera hacia dentro. */
  --r-shell: 30px;
  --r-card: 22px;
  --r-inner: 16px;
  --r-input: 14px;
  --r-pill: 999px;

  /* ---------- Tipografia ---------- */
  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-micro: 0.6875rem;
  --fs-label: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-body: 1.0625rem;
  --fs-lead: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --fs-h4: clamp(1.0625rem, 0.95rem + 0.45vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
  --fs-h2: clamp(1.875rem, 1.15rem + 3vw, 3.375rem);
  --fs-h1: clamp(2.375rem, 1rem + 5.4vw, 4.75rem);
  --fs-display: clamp(2.25rem, 4.4vw, 4.5rem);

  --track-label: 0.18em;

  /* ---------- Ritmo ---------- */
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --max: 1320px;
  --sec-y: clamp(4.5rem, 8.5vw, 8rem);
  --frame: clamp(0.5rem, 1.1vw, 1rem);
  /* Separacion entre tarjetas que conviven en una misma fila o pila */
  --gap-card: clamp(0.7rem, 1.3vw, 1rem);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --t-press: 150ms;
  --t-ui: 200ms;
  --t-panel: 320ms;

  --head-h: 62px;
  color-scheme: dark;
}

@media (min-width: 900px) {
  :root { --head-h: 76px; }
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 1.5rem);
  background: var(--bg);
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

body.is-locked { overflow: hidden; }

img,
svg,
iframe { display: block; max-width: 100%; }

img { height: auto; }

button,
input,
select,
textarea { font: inherit; color: inherit; letter-spacing: inherit; }

button { background: none; border: 0; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

a { color: inherit; text-decoration-color: var(--line-strong); text-underline-offset: 0.22em; }

table { border-collapse: collapse; width: 100%; }

/* ---------- Grano: una capa fija, sin eventos ----------
   Va fija y no se desplaza: aplicarla a un contenedor con scroll
   obliga al navegador a repintarla en cada frame. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

/* ============================================================
   TIPOGRAFIA
   Una sola familia display. El segundo renglon de un titular
   cambia de color, no de fuente.
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: 'wdth' 100;
  line-height: 0.96;
  letter-spacing: -0.034em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.04; letter-spacing: -0.024em; }
h4 {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: -0.005em;
  line-height: 1.25;
  text-transform: none;
}

.alt { display: block; color: var(--yellow); }
.on-yellow .alt { color: var(--on-yellow); opacity: 0.62; }

p { max-width: 68ch; text-wrap: pretty; }

strong { font-weight: 600; }

.label {
  font-family: var(--sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--fg-faint);
}

.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--fg-soft); }

.nums { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.mark { color: var(--yellow); }

.u-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- Superficies del navegador ---------- */
::selection { background: var(--yellow); color: var(--on-yellow); text-shadow: none; }

:root { scrollbar-color: #33322d var(--bg); scrollbar-width: thin; }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: #33322d; border: 3px solid var(--bg); border-radius: var(--r-pill); }
::-webkit-scrollbar-thumb:hover { background: #4b4a42; }

:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
.on-yellow :focus-visible { outline-color: var(--on-yellow); }

/* ---------- Layout primitivo ---------- */
.wrap {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}

/* Dos familias, y nada a medio camino:
   las bandas de pagina van a sangre y sin redondeo;
   las tarjetas van redondeadas y con aire entre ellas. */
.hero,
.page-head,
.closing,
.bleed-fig,
.site-foot { width: 100%; }

.hero__inner,
.page-head__inner,
.cta-band__inner,
.foot-inner {
  width: min(100% - (var(--gut) * 2), var(--max));
  margin-inline: auto;
}

.section { padding-block: var(--sec-y); }
.section--top { padding-top: clamp(2.25rem, 4.5vw, 3.5rem); }
.section--half { padding-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }

/* Superficie clay reutilizable */
.clay {
  background: linear-gradient(176deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--clay);
}

.clay--sm { border-radius: var(--r-inner); box-shadow: var(--clay-sm); }

.on-yellow {
  background: var(--yellow);
  color: var(--on-yellow);
}

.on-yellow p { color: var(--on-yellow-soft); }
.on-yellow ::selection { background: var(--on-yellow); color: var(--yellow); }

/* ============================================================
   MOTION
   Tres entradas distintas segun lo que entra.
   ============================================================ */
[data-rv] { --rv-d: 0ms; }

[data-rv='up'] { opacity: 0; transform: translateY(18px); }
[data-rv='up'].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 600ms var(--ease-out) var(--rv-d),
    transform 600ms var(--ease-out) var(--rv-d);
}

/* El recorte va en la imagen, nunca en el elemento observado: un
   elemento recortado a cero area no intersecta nunca y se quedaria
   oculto para siempre. */
[data-rv='img'] > img { clip-path: inset(0 0 100% 0); }
[data-rv='img'] > figcaption { opacity: 0; }

[data-rv='img'].is-in > img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1000ms var(--ease-inout) var(--rv-d);
}

[data-rv='img'].is-in > figcaption {
  opacity: 1;
  transition: opacity 320ms linear calc(var(--rv-d) + 620ms);
}

[data-rv='mask'] {
  overflow: hidden;
  padding-top: 0.12em;
  margin-top: -0.12em;
  padding-bottom: 0.09em;
}

[data-rv='mask'] > span { display: block; transform: translateY(105%); }
[data-rv='mask'].is-in > span {
  transform: none;
  transition: transform 820ms var(--ease-out) var(--rv-d);
}

/* Barra de progreso de lectura: CSS puro, sin listener de scroll */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 95;
  background: var(--yellow);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .progress {
    animation: progress-grow linear both;
    animation-timeline: scroll(root block);
  }
}

@keyframes progress-grow {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  [data-rv] { opacity: 1; transform: none; }
  [data-rv] > span { transform: none; }
  [data-rv='img'] > img { clip-path: none; }
  [data-rv='img'] > figcaption { opacity: 1; }
  [data-rv].is-in { transition: opacity 180ms linear; }
  .progress { display: none; }
}