/* ==========================================================================
   Revista Fuga — Próximamente
   Fidelidad al diseño de Figma (frames "Slide 16:9 - 1" y "iPhone 14 & 15 Pro - 1")

   Cómo está armado el layout de las dos fotos+párrafos:
   - Cada "block" (.block--one / .block--two) agrupa una foto (con sus
     3 palabras superpuestas adentro) y su párrafo.
   - En mobile y tablet (hasta 899px), los .block fluyen en flujo
     normal, uno debajo del otro — el espaciado entre foto y párrafo,
     y entre un bloque y el otro, son simplemente margin-top en px.
     Fácil de tocar a mano y sin riesgo de que algo quede pisado por
     el footer (la altura ya no se "adivina", la calcula el navegador
     solo, viendo el contenido real).
   - En desktop (≥900px), .block pasa a display:contents (como si no
     existiera) y cada foto/párrafo vuelve a posicionarse solo con
     position:absolute sobre .stage, igual que antes.
   - Las palabras superpuestas (una/huida/heroica, hierba/que crece/
     entre baldosas) están ancladas a su propia foto (no a la pantalla
     ni al bloque completo) con porcentajes — por eso el mismo valor
     sirve para mobile, tablet y desktop: si movés o agrandás una
     foto, las palabras la siguen solas.
   ========================================================================== */

:root {
  --color-bg-dark: #180C1A;
  --color-purple: #301934;
  --color-cream: #E5DADA;
  --color-orange: #F46036;
  --color-yellow: #FFF275;

  /* Reemplazar por el nombre real de familia que te da el kit de Adobe Fonts */
  --font-display: 'thermal-variable', Georgia, 'Times New Roman', serif;

  --py: 0px; /* offset de parallax, lo pisa js/parallax.js por elemento */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg-dark);
  color: var(--color-cream);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}
a:hover { text-decoration: underline; }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  width: 100%;
  aspect-ratio: 393 / 683; /* mobile por defecto, se pisa en desktop */
  overflow: hidden;
  background: var(--color-purple);
}

.hero__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero__bg-img {
  position: absolute;
  left: -15%;
  top: -15%;
  width: 130%;
  max-width: none; /* si no, la regla global "img { max-width:100% }" la achica y deja hueco a la derecha */
  height: 130%;
  object-fit: cover;
}

.hero__gradient {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42.02%; /* 287 / 683, mobile por defecto */
  background: linear-gradient(to top, var(--color-bg-dark) 0%, rgba(24, 12, 26, 0) 100%);
  pointer-events: none;
}

.hero__logo {
  position: absolute;
  top: 29%;      /* 198 / 683, mobile por defecto */
  left: 50%;
  transform: translateX(-50%);
  width: 69.72%; /* 274 / 393, mobile por defecto */
  height: auto;
}

/* .hero__text agrupa titulo + bajada. El titulo ("nos vemos en
   setiembre") se queda en el flujo normal (flex) y es el que ancla
   la posicion de todo el bloque via el "top" de aca abajo — se
   mantiene fijo pase lo que pase con la bajada.
   La bajada ("revista impresa...") se sacó del flujo (position:
   absolute, ver mas abajo) para poder moverla de forma totalmente
   independiente del titulo, sin que uno empuje al otro. */
.hero__text {
  position: absolute;
  top: 57.25%; /* 391 / 683, mobile por defecto */
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Nunca baja de 140px: a partir de ahi deja de achicarse y el
     texto se mantiene centrado en vez de pasar a 3 lineas. */
  width: clamp(140px, 48vw, 201px); /* 201px = ancho de la bajada en 393 */
}

.hero__title,
.hero__subtitle {
  margin: 0;
  width: 100%;
  line-height: 1.1; /* interlineado 110% */
  font-weight: 400;
  font-style: normal;
  color: var(--color-cream);
}

/* "nos vemos en setiembre": sigue en el flujo normal, sin cambios de
   posicion. El margin-top de aca abajo es el mismo de antes MAS el
   alto que ocupaba la bajada cuando todavia estaba en el flujo (su
   font-size, ya que el interlineado es 100%) — asi, ahora que la
   bajada quedo afuera del flujo (ver .hero__subtitle), el titulo
   queda exactamente en el mismo lugar que antes de este cambio. */
.hero__title {
  margin-top: calc(clamp(40px, 10vw, 64px) + clamp(13px, 4.58vw, 18px));
  font-size: clamp(22px, 8.14vw, 32px);
}

/* "revista impresa de creación y pensamiento": posicionada aparte
   (afuera del flujo) para poder acercarla o alejarla del logo sin
   afectar al titulo para nada.
   ---> EL VALOR A TOCAR A MANO ES "top" ACÁ ABAJO <---
   Es relativo a donde arrancaba la bajada antes (0 = misma altura de
   siempre). Más negativo = más arriba = más cerca del logo. */
.hero__subtitle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -32px;
  font-size: clamp(13px, 4.58vw, 18px);
}

/* ---------- CONTENT ---------- */

.content {
  position: relative;
  max-width: 1920px;
  margin: 0 auto;
  background: var(--color-bg-dark);
  padding: 0 0 clamp(32px, 5vw, 96px);
}

.stage {
  position: relative;
}

/* ---------- Bloque foto+párrafo (mobile/tablet: flujo normal) ---------- */

.block {
  width: 60vw;
}

.block--one {
  margin-left: 4vw;
}

.block--two {
  margin-left: auto;
  margin-right: 4vw;
  /* Espacio entre el primer bloque (foto+parrafo) y este. En tablet
     se pisa a 200px fijos mas abajo. */
  margin-top: 40px;
}

.el-photo {
  position: relative; /* contiene a las palabras superpuestas (.deco) */
  width: 100%;
  transform: translateY(var(--py));
  will-change: transform;
  /* "Respiracion": usamos las propiedades sueltas scale/translate (no
     transform:) para que convivan con el transform de scroll-parallax
     de arriba sin pisarse — CSS las compone todas juntas solas. */
  animation: photo-breathe 14s ease-in-out infinite;
  transform-origin: center;
}

.el-photo--1 { animation-duration: 13s; }
.el-photo--2 { animation-duration: 16s; animation-delay: -6s; }

@keyframes photo-breathe {
  0%   { scale: 1;     translate: 0 0; }
  30%  { scale: 1.025; translate: 3px -4px; }
  60%  { scale: 1.01;  translate: -4px 3px; }
  100% { scale: 1;     translate: 0 0; }
}

.el-photo img {
  width: 100%;
  display: block;
  border-radius: 0;
  transition: scale 1.5s ease;
}

/* El hover de escala va en el <img>, no en .el-photo (el wrapper ya
   usa "scale" para la animacion de respiracion): son propiedades
   independientes y se componen solas sin pisarse. */
.el-photo:hover img {
  scale: 1.06;
}

/* Palabras superpuestas: porcentaje relativo a SU foto (.el-photo es
   el padre posicionado, relative en mobile/tablet, absolute en
   desktop) — mismo valor en cualquier breakpoint. */
.deco {
  position: absolute;
  /* --dx-guard lo pisa js/deco-guard.js SOLO si la palabra quedaria
     cortada contra el borde izquierdo de la pantalla (ej. "heroica"
     en mobile) -- 0px de default, no cambia nada si no hace falta. */
  transform: translateX(calc(-50% + var(--dx-guard, 0px))) translateY(var(--py));
  will-change: transform;
  white-space: nowrap;
  line-height: 1.1;
  font-family: var(--font-display);
  font-weight: 400;
}

.deco--yellow { color: var(--color-yellow); }
.deco--orange { color: var(--color-orange); }

.deco--una           { left: 36.8%; top: 13.0%; }
.deco--huida         { left: 49.9%; top: 26.8%; }
.deco--heroica       { left: 10.4%; top: 44.3%; }
.deco--hierba        { left: 50.1%; top: 45.2%; }
.deco--quecrece      { left: 14.5%; top: 58.9%; }
.deco--entrebaldosas { left: 36.6%; top: 76.6%; }

/* Deriva horizontal constante, sutil, distinta y desincronizada en
   cada palabra (misma logica: translate/scale sueltos + transform). */
@keyframes drift-x-1 { 0%, 100% { translate: -5px 0; } 50% { translate: 5px 0; } }
@keyframes drift-x-2 { 0%, 100% { translate: 4px 0; }  50% { translate: -6px 0; } }
@keyframes drift-x-3 { 0%, 100% { translate: -3px 0; } 50% { translate: 7px 0; } }

.deco--una           { animation: drift-x-1 9s   ease-in-out infinite; }
.deco--huida         { animation: drift-x-2 11s  ease-in-out infinite; animation-delay: -3s; }
.deco--heroica       { animation: drift-x-3 8s   ease-in-out infinite; animation-delay: -5s; }
.deco--hierba        { animation: drift-x-2 10s  ease-in-out infinite; animation-delay: -2s; }
.deco--quecrece      { animation: drift-x-1 12s  ease-in-out infinite; animation-delay: -7s; }
.deco--entrebaldosas { animation: drift-x-3 9.5s ease-in-out infinite; animation-delay: -1s; }

.el-text {
  position: relative; /* flujo normal en mobile/tablet */
  width: 100%;
  margin: 2px 0 0; /* espacio entre la foto y el parrafo */
  line-height: 1.4;
  color: var(--color-cream);
  /* Sin transform aca a proposito: en mobile/tablet el parrafo esta
     cerca del final de una pagina bien larga, y en ciertos casos
     (por ejemplo capturas de pantalla de pagina completa, donde el
     "viewport" que usa el navegador pasa a ser del alto de toda la
     pagina) el calculo de scroll-parallax le daba un offset grande
     que lo empujaba contra el footer. En vez de seguir persiguiendo
     ese calculo, directamente el parallax de --py solo se aplica acá
     en desktop (ver mas abajo), donde la pagina es corta y no pasa
     nada de esto. En mobile/tablet el parrafo queda fijo en su lugar.
  */
  will-change: transform;
}

/* Los parrafos aparecen recien al pasar el mouse por la foto (solo
   desktop, ver reveal.js). Arranca en opacity:0 para que no haya un
   flash del texto plano antes de que el JS lo envuelva en lineas; en
   cuanto js/reveal.js arma las lineas, pasa a "reveal-ready" (vuelve
   a opacity:1 el contenedor) y cada .line maneja su propia opacidad. */
@media (min-width: 900px) {
  .el-text { opacity: 0; }
  .el-text.reveal-ready { opacity: 1; }

  .el-text .line {
    display: block;
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  .el-text.is-revealed .line {
    opacity: 1;
  }
}

.site-footer {
  text-align: center;
  padding-top: 0;
  font-size: clamp(16px, 1.25vw, 24px);
}

/* En vez del subrayado seco de "a:hover", el link del footer se tiñe
   de naranja de forma gradual. transition en el estado normal (no en
   :hover) para que la transicion se use tanto al entrar como al salir
   del hover. */
.site-footer a {
  transition: color 0.5s ease;
}
.site-footer a:hover {
  color: var(--color-orange); /* #F46036 */
  text-decoration: none;
}

/* ---------- Mobile (base, hasta 599px): frame "iPhone 14 & 15 Pro - 1", ref. 393px ---------- */

.deco--yellow,
.deco--orange { font-size: clamp(22px, 8.14vw, 32px); }

.el-text--1,
.el-text--2 { font-size: clamp(13px, 4.58vw, 18px); }

.site-footer { font-size: clamp(13px, 5.09vw, 20px); margin-top: 64px; }

/* Parrafos mas anchos SOLO en mobile (no tablet/desktop), para que no
   queden tan "verticales" -- 130% en vez del 100% (60vw) de siempre.
   .el-text--1 (block--one, anclado a la izquierda) puede crecer hacia
   la derecha sin problema, hay lugar de sobra.
   .el-text--2 (block--two, anclado a la DERECHA de la pantalla via
   margin-right en .block--two) es al revés: si solo le agrandamos el
   width, la mitad nueva se va afuera de la pantalla por la derecha.
   Por eso ademas se le pone margin-left negativo (mismo % que crecio
   el width, en negativo): asi el borde derecho queda exactamente
   donde estaba (alineado con la foto) y todo lo que se agranda es
   hacia la izquierda, sin salirse de la pantalla. */
@media (max-width: 599px) {
  .el-text--1,
  .el-text--2 {
    width: 130%;
  }
  .el-text--2 {
    margin-left: -30%;
  }
}

/* ---------- Tablet (600px a 899px) ---------- */

@media (min-width: 600px) and (max-width: 899px) {
  /* Pedido puntual: no más de 200px entre el primer párrafo y la
     segunda foto. Como ahora todo fluye normal, este margen ya
     incluye lo que mida el párrafo de arriba, sin adivinar nada. */
  .block--two {
    margin-top: 200px;
  }
}

/* ---------- Desktop (≥900px): frame "Slide 16:9 - 1", ref. 1920px ---------- */

@media (min-width: 900px) {

  .hero { aspect-ratio: 1920 / 1080; }
  .hero__gradient { height: 26.57%; } /* 287 / 1080 */
  .hero__logo { top: 26.11%; width: 32.5%; } /* 282/1080, 624/1920 */

  /* En desktop el texto va en una sola linea si o si (asi esta en el
     diseno). En vez de fijar un ancho en px que depende de la fuente
     (y con la fuente de respaldo actual puede no alcanzar), dejamos
     que el contenedor y los textos se ajusten a su contenido real. */
  .hero__text { top: 56.11%; width: auto; }
  .hero__title,
  .hero__subtitle { width: auto; white-space: nowrap; }
  /* Mismo criterio que en mobile: se le suma a mano el alto que
     dejo de ocupar la bajada en el flujo (su font-size de desktop). */
  .hero__title { margin-top: calc(clamp(20px, 2.2vw, 40px) + clamp(16px, 1.25vw, 24px) + 25px); font-size: clamp(28px, 2.083vw, 40px); } /* 406/1920, +25px mas abajo */
  /* En desktop la bajada queda mas cerca del logo que en mobile/
     tablet (-32px de la regla base, 25px mas lejos que el -82px
     anterior = -57px). */
  .hero__subtitle { top: -57px; font-size: clamp(16px, 1.25vw, 24px); } /* 433/1920 */

  /* Bug con pantallas mas anchas que 1920px (2K, 4K, ultrawide):
     .content ya tope a 1920px de ancho (max-width + margin:auto), pero
     estas posiciones de aca abajo estaban en "vw" puro, que siempre es
     relativo al ANCHO REAL DE LA VENTANA, no al ancho de .stage/.content.
     Entonces pasado los 1920px, .stage se quedaba quieto en 1920px pero
     las fotos/parrafos seguian corriendose hacia la derecha (mas vw =
     mas px, sin techo). Fix: en vez de "Xvw", usamos --stage-w (el
     ancho real de .stage, con el mismo tope de 1920px) y calc() — asi
     escalan igual que antes hasta 1920px, y de ahi para arriba quedan
     fijas en su lugar, igual que el resto del contenido. */
  .stage {
    --stage-w: min(100vw, 1920px);
    height: calc(var(--stage-w) * 0.323);
  }

  /* Ojo: NO usamos display:contents en .block para "desactivarlo" en
     desktop — varios navegadores resuelven mal el contenedor de
     referencia de un position:absolute cuyo padre tiene
     display:contents (el hijo termina posicionandose respecto a la
     pantalla entera en vez de .stage). En cambio, dejamos .block
     como una caja normal pero SIN position — al no estar posicionada,
     no cuenta como contenedor de referencia, y .el-photo/.el-text
     (position:absolute) van derecho a buscar a .stage, que si esta
     position:relative. .block termina sin alto propio (sus hijos son
     absolute, quedan afuera del flujo) asi que no genera ningun hueco. */
  .block {
    width: auto;
    margin: 0;
  }

  .el-photo {
    position: absolute;
    width: calc(var(--stage-w) * 0.1594);
  }

  .el-photo--1 { left: calc(var(--stage-w) * 0.1047); top: calc(var(--stage-w) * -0.1453); }
  .el-photo--2 { left: calc(var(--stage-w) * 0.7906); top: calc(var(--stage-w) * -0.0641); }

  .deco--yellow,
  .deco--orange { font-size: clamp(24px, 2.083vw, 40px); }

  .el-text {
    position: absolute;
    margin: 0;
    width: calc(var(--stage-w) * 0.20);
    /* Acá sí: la página desktop es corta, no pasa lo del comentario
       de más arriba. */
    transform: translateY(var(--py));
  }

  /* top calculado para que el parrafo arranque ~50px antes de que
     termine su foto (alto de la foto = width * proporcion original
     383/306 o 382/306 de la imagen). Si cambias el ancho de la foto,
     hay que recalcular esto. Los porcentajes de mas abajo son sobre
     --stage-w (ver comentario arriba de .stage), no sobre vw directo. */
  .el-text--1 { left: calc(var(--stage-w) * 0.1214); top: calc(var(--stage-w) * 0.028);  width: calc(var(--stage-w) * 0.2021); font-size: clamp(16px, 1.25vw, 24px); } /* foto1 termina en 5.42vw, menos 50px */
  .el-text--2 { left: calc(var(--stage-w) * 0.7255); top: calc(var(--stage-w) * 0.109); width: calc(var(--stage-w) * 0.1974); font-size: clamp(16px, 1.25vw, 24px); } /* foto2 termina en 13.49vw, menos 50px */

  .site-footer { font-size: clamp(16px, 1.25vw, 24px); }
}

/* No hace falta forzar transform:none para prefers-reduced-motion:
   parallax.js corta el bucle apenas detecta esa preferencia y la
   variable --py queda en 0, asi que estos elementos ya quedan
   estaticos (forzar transform:none rompe el centrado de los que
   usan translateX(-50%)). Las animaciones de "respiracion"/deriva si
   se apagan directo, esas no hacen falta para nada. */
/* ---------- Cursor de partículas (solo desktop, ver js/cursor.js) ---------- */

.cursor-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}

html.has-custom-cursor,
html.has-custom-cursor body,
html.has-custom-cursor a {
  cursor: none;
}

@media (prefers-reduced-motion: reduce) {
  .el-photo,
  .deco--una,
  .deco--huida,
  .deco--heroica,
  .deco--hierba,
  .deco--quecrece,
  .deco--entrebaldosas {
    animation: none;
  }

  .el-photo img {
    transition: none;
  }
}