/* =========================================================
   HEENESIS — Museo: pasillo de luz con portales al fondo
   Medidas (--W --H --S --D --P --ui) las calcula museum.js
   ========================================================= */

.museum {
  --W: 1200px;
  --H: 800px;
  --S: 320px;
  --D: 3200px;
  --P: 800px;
  --ui: 1.5;
}

.museum__viewport {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: var(--P);
  perspective-origin: 50% 50%;
}

.corridor,
.slice {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
}
.slice { left: 0; top: 0; }

/* ---------- Caras del pasillo ---------- */
.face {
  position: absolute;
  left: 0;
  top: 0;
  opacity: var(--fog, 1);
  pointer-events: none;
}

.face--floor,
.face--ceiling {
  width: var(--W);
  height: var(--S);
  margin: calc(var(--S) / -2) 0 0 calc(var(--W) / -2);
}
.face--floor {
  transform: translate3d(0, calc(var(--H) / 2), var(--z)) rotateX(90deg);
  background:
    linear-gradient(90deg, rgba(160, 244, 236, .42) 0 1px, transparent 1px calc(100% - 1px), rgba(160, 244, 236, .42) calc(100% - 1px)),
    linear-gradient(180deg, rgba(160, 244, 236, .14) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(160, 244, 236, .16) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(90deg, rgba(3, 8, 16, .72), rgba(8, 24, 34, .5) 50%, rgba(3, 8, 16, .72));
}
/* pulsos de energía que viajan hacia los portales */
.face--floor::after {
  content: '';
  position: absolute;
  left: calc(50% - 1px);
  top: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent 0 38%, rgba(190, 255, 248, .85) 50%, transparent 62%) 0 0 / 100% var(--S) repeat-y;
  animation: floor-pulse 2.8s linear infinite;
}
@keyframes floor-pulse {
  from { background-position: 0 var(--S); }
  to   { background-position: 0 0; }
}

.face--ceiling {
  transform: translate3d(0, calc(var(--H) / -2), var(--z)) rotateX(-90deg);
  background:
    linear-gradient(90deg, rgba(160, 244, 236, .22) 0 1px, transparent 1px calc(100% - 1px), rgba(160, 244, 236, .22) calc(100% - 1px)),
    linear-gradient(180deg, rgba(160, 244, 236, .08) 0 1px, transparent 1px),
    rgba(3, 8, 16, .35);
}

.face--wall {
  width: var(--S);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--S) / -2);
  background:
    linear-gradient(180deg, rgba(160, 244, 236, .34) 0 1px, transparent 1px calc(100% - 1px), rgba(160, 244, 236, .34) calc(100% - 1px)),
    linear-gradient(90deg, rgba(160, 244, 236, .12) 0 1px, transparent 1px),
    linear-gradient(180deg, rgba(10, 22, 36, .32), rgba(5, 12, 22, .58));
}
.face--left  { transform: translate3d(calc(var(--W) / -2), 0, var(--z)) rotateY(90deg); }
.face--right { transform: translate3d(calc(var(--W) /  2), 0, var(--z)) rotateY(-90deg); }

/* Marcos vacíos: aquí vivirán las obras */
.frame {
  position: absolute;
  left: 16%;
  right: 16%;
  top: 26%;
  bottom: 32%;
  border: 1px solid rgba(200, 248, 244, .22);
  box-shadow: inset 0 0 30px rgba(var(--energy-rgb), .06), 0 0 24px rgba(var(--energy-rgb), .05);
  background: radial-gradient(ellipse at 50% 40%, rgba(var(--energy-rgb), .05), transparent 70%);
}
.frame::after {
  content: '';
  position: absolute;
  left: 30%;
  right: 30%;
  bottom: -14%;
  height: 1px;
  background: rgba(200, 248, 244, .25);
}

/* Umbral de entrada */
.doorway {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
  border: 1px solid rgba(180, 246, 240, .5);
  box-shadow: 0 0 50px rgba(var(--energy-rgb), .14), inset 0 0 50px rgba(var(--energy-rgb), .1);
  pointer-events: none;
}

/* ---------- Pared del fondo y portales ---------- */
.endwall {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--W);
  height: var(--H);
  margin: calc(var(--H) / -2) 0 0 calc(var(--W) / -2);
  transform: translate3d(0, 0, calc(var(--D) * -1));
  display: grid;
  place-items: center;
  border: 1px solid rgba(160, 244, 236, .3);
  background:
    radial-gradient(ellipse 70% 55% at 50% 58%, rgba(40, 100, 110, .22), transparent 75%),
    rgba(3, 8, 15, .62);
}

.portals {
  width: 86%;
  height: 72%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(var(--W) * .025);
}
.is-portrait .portals {
  width: 82%;
  height: 80%;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  row-gap: calc(var(--H) * .04);
}

.portal {
  --rgb: 143, 243, 230;
  position: relative;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: calc(6px * var(--ui));
  text-align: center;
  color: var(--ink);
  outline: none;
  pointer-events: auto;
}

.portal__arch {
  position: relative;
  width: 100%;
  max-width: calc(210px * var(--ui));
  flex: 1;
  min-height: 0;
  overflow: hidden;
  border-radius: 999px 999px calc(4px * var(--ui)) calc(4px * var(--ui));
  border: 1px solid rgba(var(--rgb), .45);
  background:
    radial-gradient(ellipse 80% 60% at 50% 78%, rgba(var(--rgb), .32), transparent 70%),
    rgba(2, 6, 12, .7);
  box-shadow:
    0 0 calc(26px * var(--ui)) rgba(var(--rgb), .18),
    inset 0 0 calc(40px * var(--ui)) rgba(var(--rgb), .16);
  transition: box-shadow .8s var(--ease-soft), border-color .8s var(--ease-soft);
}

/* nubes de luz que orbitan lentamente dentro del arco */
.portal__swirl {
  position: absolute;
  left: -30%;
  top: 0;
  width: 160%;
  aspect-ratio: 1;
  background:
    radial-gradient(circle at 32% 38%, rgba(var(--rgb), .34), transparent 34%),
    radial-gradient(circle at 70% 62%, rgba(var(--rgb), .22), transparent 36%),
    radial-gradient(circle at 58% 28%, rgba(255, 255, 255, .1), transparent 26%);
  animation: portal-spin 26s linear infinite;
}
.portal:nth-child(2n) .portal__swirl { animation-direction: reverse; animation-duration: 28s; }

.portal__core {
  position: absolute;
  left: 50%;
  bottom: 16%;
  width: 46%;
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(255, 255, 255, .55), rgba(var(--rgb), .3) 28%, transparent 68%);
  animation: portal-pulse 6s ease-in-out infinite;
}
.portal:nth-child(2) .portal__core { animation-delay: -1.5s; }
.portal:nth-child(3) .portal__core { animation-delay: -3s; }
.portal:nth-child(4) .portal__core { animation-delay: -4.5s; }

@keyframes portal-spin  { to { transform: rotate(360deg); } }
@keyframes portal-pulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(.9); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.08); }
}

.portal__name {
  font-weight: 300;
  font-size: calc(12.5px * var(--ui));
  letter-spacing: .22em;
  padding-left: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 0 calc(12px * var(--ui)) rgba(var(--rgb), .45);
}
.portal__desc {
  max-width: 92%;
  height: 4.2em;
  overflow: hidden;
  font-size: calc(10px * var(--ui));
  letter-spacing: .06em;
  line-height: 1.4;
  color: var(--ink-faint);
}
.is-portrait .portal__name { font-size: calc(10px * var(--ui)); letter-spacing: .14em; padding-left: .14em; }
.is-portrait .portal__desc { display: none; }

.portal:hover .portal__arch,
.portal:focus-visible .portal__arch {
  border-color: rgba(var(--rgb), .9);
  box-shadow:
    0 0 calc(46px * var(--ui)) rgba(var(--rgb), .38),
    inset 0 0 calc(60px * var(--ui)) rgba(var(--rgb), .3);
}

/* los portales se despiertan al llegar */
.museum .portal { opacity: .35; transition: opacity 1.6s var(--ease-soft); }
.museum.is-arrived .portal { opacity: 1; }

/* ---------- HUD ---------- */
.museum__exit {
  position: absolute;
  z-index: 5;
  top: max(16px, env(safe-area-inset-top));
  left: 16px;
}

.museum__caption {
  position: absolute;
  z-index: 5;
  left: 0; right: 0;
  bottom: max(24px, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.6s .4s var(--ease-soft);
}
.museum.is-arrived .museum__caption { opacity: 1; }
.museum.is-in-portal .museum__caption { opacity: 0; transition-delay: 0s; }
.museum__exit { transition: opacity .8s var(--ease-soft), color .4s, border-color .4s, box-shadow .4s; }
.museum.is-in-portal .museum__exit { opacity: 0; pointer-events: none; }
.museum__caption strong {
  display: block;
  font-weight: 200;
  font-size: .78rem;
  letter-spacing: .5em;
  padding-left: .5em;
  text-transform: uppercase;
  color: var(--ink);
}
.museum__caption span {
  display: block;
  margin-top: 6px;
  font-size: .58rem;
  letter-spacing: .34em;
  padding-left: .34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ---------- Vista de portal ---------- */
.portal-view {
  --rgb: 143, 243, 230;
  position: absolute;
  z-index: 8;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: radial-gradient(circle at 50% 50%, rgba(var(--rgb), .16), rgba(2, 4, 10, .86) 72%);
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s var(--ease-soft), visibility 0s linear .9s;
}
.portal-view.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.1s var(--ease-soft), visibility 0s;
}

.portal-view__inner {
  max-width: 520px;
  text-align: center;
  transform: translateY(10px);
  transition: transform 1.2s var(--ease-soft);
}
.portal-view.is-open .portal-view__inner { transform: none; }

.portal-view__eyebrow {
  margin: 0 0 12px;
  font-size: .62rem;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: rgb(var(--rgb));
}
.portal-view__title {
  margin: 0 0 18px;
  font-weight: 100;
  font-size: clamp(1.8rem, 7vw, 3.2rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-shadow: 0 0 24px rgba(var(--rgb), .45);
}
.portal-view__desc {
  margin: 0 0 10px;
  font-size: .95rem;
  line-height: 1.7;
  color: var(--ink-dim);
}
.portal-view__soon {
  margin: 0 0 34px;
  font-size: .64rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink-faint);
}