/* LUM360 · recorridos inmobiliarios · capa 4 de 4 · escenas: escenarios WebGL, pósters, rótulos proyectados y maqueta plana de respaldo */

/* ---------- Escenario ----------
   Un solo renderer WebGL para toda la página; cada escenario muestra su copia en una vista (canvas 2D).
   Cada escenario tiene un póster (CSS o imagen fija) para cuando la vista aún no tiene imagen. */

.re-experience .ws-stage {
  position: relative;
  overflow: hidden;
  background: var(--ws-scene-bg);
  isolation: isolate;
}

.re-experience .ws-stage--hero {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.re-experience .ws-stage canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.re-experience .ws-stage canvas {
  opacity: 0;
  transition: opacity 600ms var(--ws-ease-out);
}

.re-experience .ws-stage.is-live canvas {
  opacity: 1;
}

/* Póster del hero: el terreno. Retícula de obra en perspectiva, solo CSS.
   Es lo que se ve en el primer render, antes de que cargue Three.js. */
.re-experience .ws-stage__terrain {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transition: opacity 600ms var(--ws-ease-out);
}

.re-experience .ws-stage__terrain::before {
  content: "";
  position: absolute;
  top: 46%;
  left: -60%;
  width: 220%;
  height: 150%;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--ws-scene-grid) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--ws-scene-grid) 22%, transparent) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  -webkit-mask-image: radial-gradient(ellipse 46% 60% at 50% 18%, #000 0%, transparent 100%);
  mask-image: radial-gradient(ellipse 46% 60% at 50% 18%, #000 0%, transparent 100%);
  transform: perspective(60rem) rotateX(64deg);
  transform-origin: 50% 0;
}

.re-experience .ws-stage.is-live .ws-stage__terrain {
  opacity: 0;
}

/* Grano sutil, solo en el nivel de calidad alto: quita el aspecto plástico del render */
html[data-stage-tier="high"] .re-experience .ws-stage--hero.is-live::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.07;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* Velos: el texto del hero se lee sobre la escena con contraste AA en ambos temas */
.re-experience .ws-stage--hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(to bottom, var(--ws-scrim) 0, var(--ws-scrim-soft) 34%, var(--ws-scrim-none) 52%),
    linear-gradient(to top, var(--ws-scrim) 0, var(--ws-scrim-soft) 20%, var(--ws-scrim-none) 38%);
  pointer-events: none;
  transition: opacity var(--ws-dur-long) var(--ws-ease-out);
}

.re-experience .ws-hero:not([data-phase="intro"]) .ws-stage--hero::after {
  opacity: 0.62;
}

@media (min-width: 60rem) {
  .re-experience .ws-stage--hero::after {
    background:
      linear-gradient(to right, var(--ws-scrim) 0, var(--ws-scrim-soft) 34%, var(--ws-scrim-none) 58%),
      linear-gradient(to top, var(--ws-scrim) 0, var(--ws-scrim-soft) 9%, var(--ws-scrim-none) 20%);
  }

  .re-experience .ws-hero:not([data-phase="intro"]) .ws-stage--hero::after {
    opacity: 0.7;
  }
}

/* ---------- Rótulos proyectados ----------
   Texto DOM colocado por JS en la posición de pantalla de un punto 3D.
   Nítido a cualquier densidad y con el tema por CSS. Decorativo: la información
   equivalente está en la lista de etapas. */

.re-experience .ws-stage__labels {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.re-experience .ws-label {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--ws-muted);
  font-size: var(--ws-text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
}

.re-experience .ws-label::before {
  content: "";
  width: 1.1rem;
  height: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.re-experience .ws-label--cota {
  color: var(--ws-accent-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.re-experience .ws-label--cota::before {
  display: none;
}

.re-experience .ws-label--node {
  padding: 0.4rem 0.6rem;
  border: var(--ws-hairline) solid var(--ws-rule);
  border-radius: var(--ws-radius-sm);
  color: var(--ws-ink);
  background: var(--ws-scrim);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-transform: none;
}

.re-experience .ws-label--node::before {
  display: none;
}

.re-experience .ws-label--left {
  flex-direction: row-reverse;
}

.re-experience .ws-label--bare::before {
  display: none;
}

/* Los nombres de los cuartos van sobre la maqueta: tinta plena y un halo del color del fondo para leerse sobre las líneas */
.re-experience .ws-label--bare {
  color: var(--ws-ink);
  text-shadow: 0 0 0.5rem var(--ws-scene-bg), 0 0 0.2rem var(--ws-scene-bg);
}

.re-experience .ws-label.is-active {
  color: var(--ws-accent-strong);
}


/* ---------- Recorrido del visitante: el flujo ---------- */

.re-experience .ws-stage--flow {
  min-height: 30rem;
  background: var(--ws-paper-2);
}

.re-experience .ws-flow-poster i {
  position: absolute;
  right: 20%;
  left: 20%;
  height: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.re-experience .ws-flow-poster i:nth-child(1) { top: 12.5%; }
.re-experience .ws-flow-poster i:nth-child(2) { top: 37.5%; }
.re-experience .ws-flow-poster i:nth-child(3) { top: 62.5%; }
.re-experience .ws-flow-poster i:nth-child(4) { top: 87.5%; background: var(--ws-accent-fill, var(--ws-accent-strong)); }

.re-experience .ws-flow-poster::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 12.5%;
  left: 50%;
  width: var(--ws-hairline);
  background: var(--ws-rule-strong);
}

.re-experience .ws-flow__sources {
  display: none;
}

@media (min-width: 60rem) {
  .re-experience .ws-stage--flow {
    height: clamp(15rem, 24vw, 21rem);
    min-height: 0;
  }

  .re-experience .ws-flow-poster i {
    top: 12% !important;
    right: auto;
    bottom: 12%;
    width: var(--ws-hairline);
    height: auto;
  }

  .re-experience .ws-flow-poster i:nth-child(1) { left: 20%; }
  .re-experience .ws-flow-poster i:nth-child(2) { left: 40%; }
  .re-experience .ws-flow-poster i:nth-child(3) { left: 60%; }
  .re-experience .ws-flow-poster i:nth-child(4) { left: 80%; }

  .re-experience .ws-flow-poster::before {
    top: 50%;
    right: 4%;
    bottom: auto;
    left: 11%;
    width: auto;
    height: var(--ws-hairline);
  }

  /* las cuatro entradas, alineadas con los cuatro carriles del flujo */
  .re-experience .ws-flow__sources {
    position: absolute;
    z-index: 3;
    top: 10%;
    bottom: 10%;
    left: 0;
    display: grid;
    width: 10%;
    grid-template-rows: repeat(4, minmax(0, 1fr));
    align-items: center;
    color: var(--ws-muted);
    font-size: var(--ws-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
}

/* ---------- Recorridos 360: el panorama ---------- */

.re-experience .ws-stage--pano {
  aspect-ratio: 1 / 1;
  border: var(--ws-hairline) solid var(--ws-rule-strong);
  border-radius: var(--ws-radius-md);
  touch-action: pan-y;
  cursor: grab;
}

.re-experience .ws-stage--pano.is-dragging {
  cursor: grabbing;
}

@media (min-width: 40rem) {
  .re-experience .ws-stage--pano {
    aspect-ratio: 4 / 3;
  }
}

/* ==================================================================
   PÓSTERES DE ESCENARIO Y MAQUETA PLANA DE RESPALDO
   ================================================================== */

.re-experience .ws-stage__poster {
  position: absolute;
  inset: 0;
  transition: opacity 600ms var(--ws-ease-out);
}

.re-experience .ws-stage.is-live .ws-stage__poster {
  opacity: 0;
}

.re-experience img.ws-stage__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* El hero deja pasar el gesto vertical (scroll) y recibe el horizontal cuando el visitante ya está dentro de la fotografía */
.re-experience .ws-stage--hero {
  touch-action: pan-y;
}

.re-experience .ws-stage--hero.is-lookable {
  cursor: grab;
}

.re-experience .ws-stage--hero.is-dragging {
  cursor: grabbing;
}

/* La fotografía real se ve sin velo pesado: el texto se lee sobre el degradado lateral */
.re-experience .ws-hero[data-phase="final"] .ws-stage--hero::after {
  opacity: 0.72;
}

.re-experience .ws-hero[data-phase="final"] .ws-hero__caption {
  text-shadow: 0 1px 1.2rem var(--ws-scrim);
}

/* ---------- Maqueta plana: planta SVG + fotografía ----------
   Es lo que se ve sin WebGL, con movimiento reducido, con ahorro de datos y sin JavaScript. Un estado por etapa. */

.re-experience .ws-story {
  position: relative;
  min-width: 0;
}

.re-experience .ws-story__table {
  position: relative;
  overflow: hidden;
  width: min(100%, 36rem);
  margin-inline: auto;
  aspect-ratio: 4 / 3.1;
  border: var(--ws-hairline) solid var(--ws-rule);
  background:
    linear-gradient(to right, color-mix(in oklch, var(--ws-scene-grid) 16%, transparent) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(to bottom, color-mix(in oklch, var(--ws-scene-grid) 16%, transparent) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    var(--ws-paper-2);
}

.re-experience .ws-story__svg {
  position: absolute;
  inset: 3% 4%;
  width: 92%;
  height: 94%;
  overflow: visible;
}

.re-experience .ws-story__svg * {
  transition: opacity var(--ws-dur-long) var(--ws-ease-out);
}

.re-experience .ws-story__plot {
  fill: none;
  stroke: var(--ws-rule-strong);
  stroke-dasharray: 5 4;
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__floor {
  fill: var(--ws-card);
  stroke: var(--ws-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__tree {
  fill: color-mix(in oklch, var(--ws-accent) 24%, var(--ws-card));
  stroke: var(--ws-rule);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__pool {
  fill: color-mix(in oklch, var(--ws-accent) 38%, transparent);
  stroke: var(--ws-accent);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__walls {
  fill: none;
  stroke: var(--ws-accent-strong);
  stroke-linecap: square;
  stroke-width: 2.4;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__roof {
  fill: color-mix(in oklch, var(--ws-card-2) 60%, transparent);
  stroke: var(--ws-accent);
  stroke-dasharray: 4 3;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.re-experience .ws-story__label {
  fill: var(--ws-muted);
  font-family: var(--ws-font-body);
  font-size: 7.4px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.re-experience .ws-story__ground,
.re-experience .ws-story__walls,
.re-experience .ws-story__roof,
.re-experience .ws-story__label {
  opacity: 0;
}

.re-experience .ws-story__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--ws-dur-long) var(--ws-ease-out);
}

.re-experience .ws-story__spots {
  position: absolute;
  right: var(--ws-space-sm);
  bottom: var(--ws-space-sm);
  left: var(--ws-space-sm);
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-space-xs);
  justify-content: center;
  opacity: 0;
  transition: opacity var(--ws-dur-long) var(--ws-ease-out);
}

.re-experience .ws-story__spots li {
  padding: 0.4rem 0.65rem;
  border: var(--ws-hairline) solid var(--ws-rule-strong);
  border-radius: var(--ws-radius-sm);
  color: var(--ws-ink);
  background: var(--ws-scrim);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.re-experience .ws-story__tag {
  position: absolute;
  top: var(--ws-space-sm);
  left: var(--ws-space-sm);
  padding: 0.25rem 0.5rem;
  color: var(--ws-subtle);
  background: var(--ws-scrim-soft);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Estados: 0 lote · 1 planta · 2 volumen · 3 corte · 4 entrada · 5 visita */
.re-experience .ws-story:is([data-story-state="1"], [data-story-state="2"], [data-story-state="3"]) :is(.ws-story__walls, .ws-story__label),
.re-experience .ws-story:is([data-story-state="2"], [data-story-state="3"]) .ws-story__ground,
.re-experience .ws-story[data-story-state="3"] .ws-story__roof {
  opacity: 1;
}

.re-experience .ws-story:is([data-story-state="4"], [data-story-state="5"]) .ws-story__photo,
.re-experience .ws-story[data-story-state="5"] .ws-story__spots {
  opacity: 1;
}

.re-experience .ws-story:is([data-story-state="4"], [data-story-state="5"]) .ws-story__tag {
  opacity: 0;
}

/* Sin JS, se muestra la casa abierta y la fotografía como lo que es: dos cosas distintas, una debajo de otra */
html:not(.ws-js) .re-experience .ws-story__table {
  aspect-ratio: auto;
  display: grid;
  gap: var(--ws-space-md);
  padding: var(--ws-space-md);
}

html:not(.ws-js) .re-experience .ws-story__svg {
  position: static;
  width: 100%;
  height: auto;
}

html:not(.ws-js) .re-experience .ws-story :is(.ws-story__ground, .ws-story__walls, .ws-story__label, .ws-story__roof) {
  opacity: 1;
}

html:not(.ws-js) .re-experience .ws-story__photo {
  position: static;
  height: auto;
  aspect-ratio: 4 / 3;
  opacity: 1;
}

html:not(.ws-js) .re-experience .ws-story__spots,
html:not(.ws-js) .re-experience .ws-story__tag {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .re-experience .ws-stage canvas,
  .re-experience .ws-stage__terrain,
  .re-experience .ws-stage__poster,
  .re-experience .ws-story__svg *,
  .re-experience .ws-story__photo,
  .re-experience .ws-story__spots {
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Cierre: la ruta del recorrido sobre la maqueta ---------- */

.re-experience .ws-plan3d {
  display: grid;
  min-width: 0;
  gap: var(--ws-space-sm);
}

.re-experience .ws-stage--plan {
  aspect-ratio: 5 / 4;
  border: var(--ws-hairline) solid var(--ws-rule-strong);
  border-radius: var(--ws-radius-md);
}

.re-experience .ws-plan3d__poster {
  display: grid;
  place-items: center;
  padding: var(--ws-space-md);
  background: var(--ws-paper-2);
}

.re-experience .ws-plan3d__poster svg {
  width: 100%;
  max-height: 100%;
}

.re-experience .ws-plan3d figcaption {
  display: grid;
  gap: var(--ws-space-3xs);
  color: var(--ws-muted);
  font-size: var(--ws-text-sm);
  line-height: 1.5;
}

.re-experience .ws-plan3d figcaption strong {
  color: var(--ws-ink);
  font-family: var(--ws-font-display);
  font-size: var(--ws-text-lg);
  font-weight: 500;
  line-height: 1.2;
}

.re-experience .ws-plan3d figcaption em {
  color: var(--ws-subtle);
  font-size: var(--ws-text-xs);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}