/* fium · Escena del hero: de la fricción al flujo
   Capa decorativa detrás del contenido. Piezas de interfaz dispersas que, al hacer scroll,
   la pantalla absorbe y devuelve ordenadas sobre una recta. La mueve js/hero-scene.js;
   sin JS no se muestra y con «reducir movimiento» aparece ya ordenada y quieta. */

/* Lo único que se añade al hero: un contexto de apilamiento para que la escena quede detrás del contenido */
.hero {
  position: relative;
  isolation: isolate;
}

.hero-scene {
  --scene-tile: 3.5rem; /* altura de una pieza colocada en la recta */
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  overflow: clip;
  contain: layout paint;
  pointer-events: none;
  visibility: hidden; /* la muestra hero-scene.js cuando ya ha colocado las piezas */
}

.hero-scene.is-ready {
  visibility: visible;
}

/* Todo lo que mueve el script: solo transform y opacity */
.hero-scene__item,
.hero-scene__link,
.hero-scene__line {
  will-change: transform, opacity;
}

/* ── La recta: estado ordenado, centrada en el margen inferior del hero ── */
.hero-scene__rail {
  position: absolute;
  right: 0;
  bottom: calc((var(--space-9) - var(--scene-tile)) / 2);
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--scene-tile);
}

.hero-scene__line {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 2px;
  margin-top: -1px;
  border-radius: var(--radius-pill);
  background: var(--neblina);
  transform-origin: left center;
}

/* El nodo llega el último */
.hero-scene__end {
  flex: none;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  background: var(--neblina);
}

/* ── Piezas: 1em = altura de la pieza, así todo su interior escala con ella ── */
.hero-scene__tile {
  flex: none;
  width: 2.1em;
  height: 1em;
  font-size: var(--scene-tile);
}

.hero-scene__tile--window {
  z-index: 2; /* capa frontal */
  width: 2.2em;
}

.hero-scene__tile--form {
  z-index: 1;
}

.hero-scene__tile--list {
  width: 1.6em;
}

.hero-scene__tile--chart {
  width: 1.9em;
}

.hero-scene__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.11em;
  width: 100%;
  height: 100%;
  padding: 0.14em 0.18em;
  border: var(--border) solid var(--tinta-borde);
  border-radius: var(--radius-sm);
  background: var(--tinta-superficie);
}

.hero-scene__row {
  display: flex;
  align-items: center;
  gap: 0.1em;
}

.hero-scene__row--head {
  padding-bottom: 0.1em;
  border-bottom: var(--border) solid var(--tinta-borde);
}

.hero-scene__bar {
  height: 0.08em;
  border-radius: var(--radius-pill);
  background: var(--tinta-borde);
}

.hero-scene__bar--strong {
  background: var(--tinta-muted);
  opacity: 0.55;
}

.hero-scene__bar--w35 { width: 35%; }
.hero-scene__bar--w45 { width: 45%; }
.hero-scene__bar--w55 { width: 55%; }
.hero-scene__bar--w70 { width: 70%; }
.hero-scene__bar--w85 { width: 85%; }

.hero-scene__dot {
  flex: none;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: var(--tinta-borde);
}

/* Marca de estado: naranja mientras la pieza está suelta (a mano), azul cuando queda en la recta */
.hero-scene__mark {
  position: relative;
  flex: none;
  width: 0.14em;
  height: 0.14em;
  border-radius: 50%;
  background: var(--neblina);
}

.hero-scene__hot {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--friccion);
}

.hero-scene__field {
  flex: 1;
  height: 0.2em;
  border: var(--border) solid var(--tinta-borde);
  border-radius: var(--radius-sm);
}

.hero-scene__pill {
  flex: none;
  width: 0.46em;
  height: 0.2em;
  border-radius: var(--radius-pill);
  background: var(--tinta-borde);
}

.hero-scene__tile--chart .hero-scene__body {
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 0.09em;
}

.hero-scene__tile--chart .hero-scene__mark {
  align-self: flex-start;
  margin-right: auto;
}

.hero-scene__col {
  flex: none;
  width: 0.16em;
  border-radius: var(--radius-pill) var(--radius-pill) 0 0;
  background: var(--tinta-borde);
}

.hero-scene__col--h35 { height: 35%; }
.hero-scene__col--h55 { height: 55%; }
.hero-scene__col--h80 { height: 80%; }
.hero-scene__col--h100 { height: 100%; }

/* ── Capa posterior: contornos de ventana, sin relleno ── */
.hero-scene__ghost {
  position: absolute;
  aspect-ratio: 16 / 10;
}

.hero-scene__ghost .hero-scene__body {
  display: block;
  padding: 0;
  border-radius: var(--radius-md);
  background: none;
}

.hero-scene__ghost .hero-scene__body::before {
  content: "";
  display: block;
  height: 14%;
  border-bottom: var(--border) solid var(--tinta-borde);
}

.hero-scene__ghost--far {
  top: calc(var(--header-h) - 2.5rem);
  right: -7.5rem;
  width: clamp(15rem, 30vw, 26rem);
}

.hero-scene__ghost--far .hero-scene__body {
  rotate: -3deg;
}

.hero-scene__ghost--edge {
  top: 58%;
  right: -4.5rem;
  width: 10rem;
}

.hero-scene__ghost--edge .hero-scene__body {
  rotate: 5deg;
}

/* ── Conexiones entre piezas dispersas: líneas finas, como las cotas ── */
.hero-scene__link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px; /* el script la estira con scaleX hasta unir dos piezas */
  height: 1px;
  background: var(--tinta-muted);
  transform-origin: 0 50%;
}

/* ── Entrada: capas escalonadas, breve y sin rebotes ── */
@keyframes scene-enter {
  from {
    opacity: 0;
    translate: 0 1.125rem;
    scale: 0.96;
    rotate: var(--scene-turn, 0deg);
  }
}

@keyframes scene-fade {
  from {
    opacity: 0;
  }
}

.hero-scene.is-ready .hero-scene__body {
  animation: scene-enter var(--dur-narrative) var(--ease-cauce) var(--scene-delay, 0ms) backwards;
}

.hero-scene.is-ready .hero-scene__ghost .hero-scene__body {
  animation: scene-fade 900ms var(--ease-cauce) 120ms backwards;
}

.hero-scene.is-ready .hero-scene__link {
  animation: scene-fade var(--dur-narrative) var(--ease-cauce) 700ms backwards;
}

.hero-scene__tile--list { --scene-delay: calc(var(--stagger) * 4); --scene-turn: 3deg; }
.hero-scene__tile--chart { --scene-delay: calc(var(--stagger) * 5); --scene-turn: -2deg; }
.hero-scene__tile--window { --scene-delay: calc(var(--stagger) * 6); --scene-turn: -3deg; }
.hero-scene__tile--form { --scene-delay: calc(var(--stagger) * 7); --scene-turn: 2deg; }

/* ── Reducir movimiento: la escena aparece ya ordenada, sin piezas sueltas ── */
.hero-scene.is-static .hero-scene__hot,
.hero-scene.is-static .hero-scene__link {
  display: none;
}

/* ── Composición simplificada cuando el hero se apila (móvil y tablet) ── */
@media (max-width: 1023px) {
  .hero-scene {
    --scene-tile: 2.75rem;
  }

  .hero-scene__ghost,
  .hero-scene__link,
  .hero-scene__tile--chart {
    display: none;
  }
}