/* ══════════════════════════════════════════════════════════════════
   GINNOA · /espacios/ FX — Editorial Quiet Cinematic
   Cargar DESPUÉS de espacios-index.css (override predecible por orden).
   Todo gated por html.espacios-fx-ready para no romper no-JS.
   ══════════════════════════════════════════════════════════════════ */

/* ─── Contenedores de canvas ─── */
body.espacios-page .espacios-hero__dust {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.espacios-page .espacios-hero__inner {
  position: relative;
  z-index: 1;
}
body.espacios-page .espacios-close { position: relative; }
body.espacios-page .espacios-fx-burst {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
body.espacios-page .espacios-close__inner {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════
   REVEAL BASE  —  gated por html.espacios-fx-ready
   Sin JS: estados finales visibles (progressive enhancement)
   ══════════════════════════════════════════════════════════════════ */
html.espacios-fx-ready body.espacios-page [data-fx] {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 1.05s cubic-bezier(.16, 1, .3, 1),
    transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--fx-delay, 0) * 1ms);
  will-change: opacity, transform;
}
html.espacios-fx-ready body.espacios-page [data-fx].is-fx-revealed {
  opacity: 1;
  transform: none;
}

/* Variante line-grow (rule del hero) */
html.espacios-fx-ready body.espacios-page [data-fx="line"] {
  opacity: 1;
  transform: none;
  width: 0 !important;
  transition: width 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--fx-delay, 0) * 1ms);
}
html.espacios-fx-ready body.espacios-page [data-fx="line"].is-fx-revealed {
  width: 64px !important;
}

/* Variante blur-in (título del close) */
html.espacios-fx-ready body.espacios-page [data-fx="blur-in"] {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(12px);
  transition:
    opacity 1.4s cubic-bezier(.16, 1, .3, 1),
    filter 1.4s cubic-bezier(.16, 1, .3, 1),
    transform 1.4s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--fx-delay, 0) * 1ms);
}
html.espacios-fx-ready body.espacios-page [data-fx="blur-in"].is-fx-revealed {
  opacity: 1;
  filter: none;
  transform: none;
}

/* Containers cuya animación viven en sus hijos (data-fx-group) */
html.espacios-fx-ready body.espacios-page [data-fx-group] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ══════════════════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════════════════ */

/* Parallax micro sobre <img> del collage. Compone con :hover scale sin pisar
   los translateY brick de la <figure>. */
body.espacios-page .espacios-hero__tile img {
  transform: translate3d(0, var(--fx-tile-y, 0px), 0);
  will-change: transform;
}
body.espacios-page .espacios-hero__tile:hover img {
  transform: translate3d(0, var(--fx-tile-y, 0px), 0) scale(1.04);
}

/* Word-split del h1: el h1 en sí queda visible; los .fx-word-inner suben */
html.espacios-fx-ready body.espacios-page h1.espacios-hero__title[data-fx] {
  opacity: 0;
  transform: none;
  transition: opacity .25s cubic-bezier(.16, 1, .3, 1);
}
html.espacios-fx-ready body.espacios-page h1.espacios-hero__title[data-splitted="1"] {
  opacity: 1;
  transition: none;
}
body.espacios-page .fx-word {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
}
body.espacios-page .fx-word-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .95s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 70ms + var(--fx-delay, 0) * 1ms);
  will-change: transform;
}
html.espacios-fx-ready body.espacios-page h1.espacios-hero__title.is-fx-revealed .fx-word-inner {
  transform: translateY(0);
}

/* Highlight amarillo del <em> (hero) pintándose */
body.espacios-page .espacios-hero__title em {
  background-image: linear-gradient(#ffcc00, #ffcc00);
  background-repeat: no-repeat;
  background-position: 0% 92%;
  background-size: 0% .10em;
  padding: 0 .05em;
  transition: background-size 1.4s cubic-bezier(.16, 1, .3, 1) 1.2s;
}
html.espacios-fx-ready body.espacios-page h1.espacios-hero__title.is-fx-revealed em {
  background-size: 100% .10em;
}

/* Lista hero: cada <li> hace fade-up staggered */
html.espacios-fx-ready body.espacios-page .espacios-hero__list[data-fx-group] > li {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity .9s cubic-bezier(.16, 1, .3, 1),
    transform .9s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.espacios-fx-ready body.espacios-page .espacios-hero__list[data-fx-group].is-fx-revealed > li {
  opacity: 1;
  transform: none;
}

/* Magnetic — usar CSS 'translate' (property propio, no pisa transform del hover) */
body.espacios-page .fx-mag {
  translate: var(--mag-x, 0) var(--mag-y, 0);
  transition: translate .55s cubic-bezier(.16, 1, .3, 1);
}

/* ══════════════════════════════════════════════════════════════════
   ÍNDICE
   ══════════════════════════════════════════════════════════════════ */

/* Mask-reveal por fila (clip-path + opacity) */
html.espacios-fx-ready body.espacios-page .espacios-index__list[data-fx-group] > li {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    clip-path 1s cubic-bezier(.86, 0, .07, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
html.espacios-fx-ready body.espacios-page .espacios-index__list[data-fx-group].is-fx-revealed > li {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* Under-hover trace amarillo (coexiste con el hover padding+color existente) */
body.espacios-page .espacios-index__list a { position: relative; }
body.espacios-page .espacios-index__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 204, 0, 0.55);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .8s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}
body.espacios-page .espacios-index__list a:hover::after {
  transform: scaleX(1);
}

/* ══════════════════════════════════════════════════════════════════
   EDITORIAL — sub-stagger post-.is-revealed (piggyback)
   ══════════════════════════════════════════════════════════════════ */

html.espacios-fx-ready body.espacios-page .espacio-editorial .fx-sub {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 1s cubic-bezier(.16, 1, .3, 1),
    transform 1s cubic-bezier(.16, 1, .3, 1);
}
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__meta.fx-sub    { transition-delay: 100ms; }
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__name.fx-sub    { transition-delay: 220ms; }
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__summary.fx-sub { transition-delay: 340ms; }
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__foot > .fx-sub:nth-child(1) { transition-delay: 620ms; }
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__foot > .fx-sub:nth-child(2) { transition-delay: 720ms; }
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .fx-sub {
  opacity: 1;
  transform: none;
}

/* Features list — fade-up staggered */
html.espacios-fx-ready body.espacios-page .espacio-editorial__features > li.fx-sub-line {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(440ms + var(--i, 0) * 90ms);
}
html.espacios-fx-ready body.espacios-page .espacio-editorial.fx-sub-revealed .espacio-editorial__features > li.fx-sub-line {
  opacity: 1;
  transform: none;
}

/* Media parallax — compone con :hover scale 1.05 existente */
body.espacios-page .espacio-editorial__media img {
  transform: translate3d(0, var(--fx-py, 0px), 0);
  will-change: transform;
}
body.espacios-page .espacio-editorial__media:hover img {
  transform: translate3d(0, var(--fx-py, 0px), 0) scale(1.05);
}

/* ══════════════════════════════════════════════════════════════════
   PROCESS — border-top line-draw + step reveal
   ══════════════════════════════════════════════════════════════════ */

/* Reemplaza el border-top del li por un ::before controlable (scaleX) */
html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li {
  border-top-color: transparent !important;
  position: relative;
}
html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.05s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 160ms);
}
html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group].is-fx-revealed > li::before {
  transform: scaleX(1);
}

/* Stagger del contenido de cada step (num, div wrapper) */
html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li > * {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity .85s cubic-bezier(.16, 1, .3, 1),
    transform .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(240ms + var(--i, 0) * 160ms);
}
html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group].is-fx-revealed > li > * {
  opacity: 1;
  transform: none;
}

/* ══════════════════════════════════════════════════════════════════
   CLOSE — letter-split + <em> paint + CTA pulse-glow
   ══════════════════════════════════════════════════════════════════ */

html.espacios-fx-ready body.espacios-page h2.espacios-close__title[data-fx] {
  opacity: 0;
  transform: none;
  filter: none;
  transition: opacity .25s cubic-bezier(.16, 1, .3, 1);
}
html.espacios-fx-ready body.espacios-page h2.espacios-close__title[data-splitted="1"] {
  opacity: 1;
  transition: none;
}

body.espacios-page .fx-word-nowrap {
  display: inline-block;
  white-space: nowrap;
}
body.espacios-page .fx-char {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
  padding-bottom: 0.24em;
  margin-bottom: -0.18em;
}
body.espacios-page .fx-char-inner {
  display: inline-block;
  transform: translateY(115%);
  transition: transform .85s cubic-bezier(.16, 1, .3, 1);
  transition-delay: calc(var(--i, 0) * 35ms + var(--fx-delay, 0) * 1ms);
  will-change: transform;
}
html.espacios-fx-ready body.espacios-page h2.espacios-close__title.is-fx-revealed .fx-char-inner {
  transform: translateY(0);
}

/* Highlight amarillo del <em> (close) pintándose después de las letras
   — Bajo los descenders para no cortar las letras (i, u, n, o del italic). */
body.espacios-page .espacios-close__title em {
  background-image: linear-gradient(#ffcc00, #ffcc00);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% .08em;
  padding: 0 .06em .16em;
  transition: background-size 1.6s cubic-bezier(.16, 1, .3, 1) 1.6s;
}
html.espacios-fx-ready body.espacios-page h2.espacios-close__title.is-fx-revealed em {
  background-size: 100% .08em;
}

/* CTA pulse-glow único post-reveal */
html.espacios-fx-ready body.espacios-page .espacios-close__link[data-fx].is-fx-revealed {
  animation: espacios-cta-glow 2.6s cubic-bezier(.16, 1, .3, 1) 1.6s 1 forwards;
}
@keyframes espacios-cta-glow {
  0%   { box-shadow: 0 0 0 0 rgba(255, 204, 0, 0); }
  55%  { box-shadow: 0 16px 44px -8px rgba(255, 204, 0, 0.38); }
  100% { box-shadow: 0 6px 20px -6px rgba(255, 204, 0, 0.20); }
}

/* ══════════════════════════════════════════════════════════════════
   REDUCED MOTION — corta todo lo costoso, fuerza estados finales
   ══════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  body.espacios-page .espacios-hero__dust,
  body.espacios-page .espacios-fx-burst { display: none !important; }

  html.espacios-fx-ready body.espacios-page [data-fx],
  html.espacios-fx-ready body.espacios-page [data-fx="blur-in"],
  html.espacios-fx-ready body.espacios-page .espacios-index__list[data-fx-group] > li,
  html.espacios-fx-ready body.espacios-page .espacios-hero__list[data-fx-group] > li,
  html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li > *,
  html.espacios-fx-ready body.espacios-page .espacio-editorial .fx-sub,
  html.espacios-fx-ready body.espacios-page .espacio-editorial__features > li.fx-sub-line,
  html.espacios-fx-ready body.espacios-page .fx-word-inner,
  html.espacios-fx-ready body.espacios-page .fx-char-inner {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  html.espacios-fx-ready body.espacios-page [data-fx="line"] {
    width: 64px !important;
    transition: none !important;
  }
  html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li {
    border-top-color: rgba(255, 255, 255, 0.20) !important;
  }
  html.espacios-fx-ready body.espacios-page .espacios-process__steps[data-fx-group] > li::before {
    display: none !important;
  }
  body.espacios-page .espacios-hero__tile img,
  body.espacios-page .espacio-editorial__media img {
    transform: none !important;
    transition: none !important;
  }
  body.espacios-page .espacios-hero__title em,
  body.espacios-page .espacios-close__title em {
    background-size: 100% .10em !important;
    transition: none !important;
  }
  body.espacios-page .fx-mag {
    translate: 0 0 !important;
    transition: none !important;
    animation: none !important;
  }
}