@import url('mv-tokens.css');
/* Copiado de plantilla-scroll.html: hojas, moneda, anillo y efectos originales. */
.portal-scroll{--cobre:var(--mv-cobre);--roca:var(--mv-roca);--mitad:50%;--lado:clamp(240px,min(24vw + 8vh,54vh),560px);--marco:calc(var(--lado)*1.3);
  /* DEMO sello-en-una-pieza: las hojas esperan a que el sello salga.
     El sello crece y se desvanece entre open 0,14 y 0,55; las hojas no
     empiezan a abrirse hasta open 0,35 y llegan al 100% en open 1. */
  --portal-hojas: clamp(0, calc((var(--portal-open) - 0.35) * 1.5385), 1);}
.enhanced #portal .portal-leaf {
  position: absolute; top: 0; bottom: 0;
  overflow: hidden;   /* cada hoja recorta lo suyo: ni sombras ni medias monedas cruzan la costura */
  background:
    linear-gradient(to bottom, rgba(200,136,98,0.055) 0%, rgba(200,136,98,0.014) 44%, rgba(0,0,0,0) 76%),
    repeating-linear-gradient(to bottom, rgba(255,255,255,0.012) 0 1px, rgba(0,0,0,0) 1px 3px),
    var(--roca);
  will-change: transform;
}
.enhanced #portal .portal-left { left: -20px;  width: calc(var(--mitad) + 24px);          transform: translate3d(calc(var(--portal-hojas) * -101%), 0, 0); }
.enhanced #portal .portal-right { right: -20px; width: calc(100% - var(--mitad) + 20px);   transform: translate3d(calc(var(--portal-hojas) *  101%), 0, 0); }
/* Hilo de cobre en la junta: mientras esta cerrada, la costura se lee
   como una linea puesta a proposito. En cuanto abre, desaparece. */
.enhanced #portal .portal-right::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px;
  /* Se interrumpe alrededor de la pieza: la linea no cruza ni el anillo
     ni la moneda. Los cortes se miden desde el anillo y no en %, porque
     si no, en ventanas bajas los topes se pisan y la linea acaba
     pasando por encima de las marcas. */
  background: linear-gradient(to bottom,
    rgba(200,136,98,0)    0%,
    rgba(200,136,98,0.34) calc(50% - var(--marco) / 2 - 62px),
    rgba(200,136,98,0.34) calc(50% - var(--marco) / 2 - 28px),
    rgba(200,136,98,0)    calc(50% - var(--marco) / 2 - 10px),
    rgba(200,136,98,0)    calc(50% + var(--marco) / 2 + 10px),
    rgba(200,136,98,0.34) calc(50% + var(--marco) / 2 + 28px),
    rgba(200,136,98,0.34) calc(50% + var(--marco) / 2 + 62px),
    rgba(200,136,98,0)    100%);
  opacity: calc(1 - var(--portal-open) * 4);
}
/* canto iluminado: solo se ve mientras la puerta esta abriendose */
.enhanced #portal .portal-leaf::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 22px;
  opacity: calc(var(--portal-hojas) * (1 - var(--portal-hojas)) * 3.2);
}
.enhanced #portal .portal-left::after { right: 4px; background: linear-gradient(to left,  rgba(200,136,98,0.26), rgba(200,136,98,0)); }
.enhanced #portal .portal-right::after { left: 0;    background: linear-gradient(to right, rgba(200,136,98,0.26), rgba(200,136,98,0)); }

/* LA MONEDA NO SE PARTE.
   Cada hoja lleva la pieza ENTERA -- anillo, moneda y efectos -- del
   mismo tamano y en la misma posicion exacta, centrada sobre la junta.
   Lo unico que las diferencia es que cada hoja recorta la que le sobra.
   Asi las dos mitades son el mismo pixel de la misma imagen y no puede
   haber ni desfase de medio pixel ni diferencia de brillo, salga el
   numero que salga al calcular el tamano. */
.enhanced #portal .portal-seal {
  position: absolute; top: 50%;
  width: var(--marco); height: var(--marco);
  transform: translateY(-50%) scale(var(--portal-scale));
  transform-origin: 50% 50%;
  /* Dos animaciones sobre propiedades distintas para que no se pisen:
     mv-flota mueve 'translate' y mv-cara mueve 'transform'.
     La perspectiva va DENTRO del transform, con perspective(), y no
     como propiedad del padre: asi el punto de fuga es el centro de la
     moneda en las dos hojas. Si la pusiera en la hoja, cada mitad se
     proyectaria desde un punto distinto y la costura se abriria. */
  animation: mv-flota 7s ease-in-out infinite,
             mv-cara 19s ease-in-out infinite;
  will-change: transform;
  /* DEMO: el sello sale como una pieza — crece hacia el visitante y se
     desvanece antes de que la puerta se abra. Nunca se parte por la mitad. */
  opacity: clamp(0, calc(1.35 - var(--portal-open) * 2.45), 1);
}
.enhanced #portal .portal-left .portal-seal { right: calc(4px - var(--marco) / 2); }
.enhanced #portal .portal-right .portal-seal { left:  calc(var(--marco) / -2); }

/* Anillo de instrumento: retoma la idea de la moneda -- una pieza de
   navegacion -- y le da algo alrededor sin robarle protagonismo. */
.enhanced #portal .mv-anillo {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  animation: mv-bisel 96s linear infinite;   /* una vuelta cada minuto y medio */
}
.enhanced #portal .mv-anillo circle { fill: none; }
/* El perimetro del circulo mide 600 exactos, asi que 72 marcas cortas
   (paso 8.3333) y 12 largas (paso 50) caen siempre en el mismo sitio y
   coinciden entre si. Con numeros que no dividan, la ultima marca se
   solapa con la primera y se ve una doble justo arriba. */
/* R-demo aro uniforme: las marcas del instrumento deben leerse igual en los
   360°. Causa real medida: no era solo la sombra de la moneda sino el fondo
   (gradiente cenital de las hojas, cobre arriba → negro abajo): con trazo al
   34% el antialiasing mezcla con el fondo y abajo las marcas desaparecian.
   Solucion: trazo al 78% + resplandor cobre simetrico (sin direccion), marcas
   autoluminosas e independientes del fondo. Verificado con toggle 0.78/0.10
   en vivo: anillo uniforme y legible en todo el perimetro. */
.enhanced #portal .mv-marcas        { stroke: rgba(200,136,98,0.78); stroke-width: 4.4; stroke-dasharray: 1.3 7.0333; }
.enhanced #portal .mv-marcas-largas { stroke: rgba(200,136,98,0.78); stroke-width: 9.6; stroke-dasharray: 1.6 48.4; }
.enhanced #portal .mv-marcas, .enhanced #portal .mv-marcas-largas {
  filter: drop-shadow(0 0 5px rgba(200,136,98,0.6));
}
.enhanced #portal .mv-aro           { stroke: rgba(184,178,171,0.09); stroke-width: 0.7; }

/* La moneda, centrada dentro del anillo */
.enhanced #portal .mv-moneda {
  position: absolute; left: 50%; top: 50%;
  width: var(--lado); height: var(--lado);
  margin: calc(var(--lado) / -2) 0 0 calc(var(--lado) / -2);
  /* R-demo aro uniforme: sombra mas corta y casi simetrica; la anterior
     (0 20px 46px) caia sobre el arco inferior y atenuaba sus marcas. */
  filter: drop-shadow(0 8px 22px rgba(0,0,0,0.5));
}
.enhanced #portal .mv-moneda img { width: 100%; height: 100%; display: block; }

.enhanced #portal .mv-moneda img.medallon-static { display: block; }
.enhanced #portal .mv-moneda img.medallon-static {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: 50%;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 53%, transparent 68%);
  mask-image: radial-gradient(circle at 50% 50%, #000 53%, transparent 68%);
}
/* Destello especular: una banda de luz que cruza el metal cada pocos
   segundos. Es lo que hace que se lea como una moneda y no como una
   foto pegada. */
.enhanced #portal .mv-barrido {
  position: absolute; inset: 2%; border-radius: 50%; overflow: hidden;
  mix-blend-mode: screen; pointer-events: none;
}
.enhanced #portal .mv-barrido::before {
  content: ""; position: absolute; top: -40%; bottom: -40%; left: -30%; width: 24%;
  background: linear-gradient(to right, rgba(232,227,221,0) 0%, rgba(232,227,221,0.34) 50%, rgba(232,227,221,0) 100%);
  animation: mv-barre 7.5s cubic-bezier(.45,0,.25,1) infinite;
}

/* El volcan respira. Nada de lava saliendo a chorro: eso en una marca
   de excursiones en barco cantaria a videojuego. Una brasa que late y
   tres pavesas subiendo. */
.enhanced #portal .mv-brasa {
  position: absolute; left: 70%; top: 42%;
  width: 26%; height: 26%; transform: translate(-50%, -50%);
  border-radius: 50%; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(closest-side, rgba(224,164,126,0.50) 0%, rgba(200,136,98,0.16) 44%, rgba(200,136,98,0) 72%);
  animation: mv-late 4.6s ease-in-out infinite;
}
.enhanced #portal .mv-chispa {
  position: absolute; left: 70%; top: 41%;
  width: 2px; height: 2px; border-radius: 50%;
  background: var(--mv-cobre-claro); box-shadow: 0 0 7px rgba(224,164,126,0.85);
  mix-blend-mode: screen; pointer-events: none; opacity: 0;
  animation: mv-sube 6.2s linear infinite;
  animation-delay: var(--t);
}

@keyframes mv-flota {
  0%, 100% { translate: 0 -6px; }
  50%      { translate: 0 6px; }
}
/* La moneda se gira sobre si misma, pero en profundidad y sin pasar
   nunca del perfil: asi el nombre se lee siempre del derecho. El
   scale(var(--portal-scale)) tiene que ir aqui dentro tambien, o al abrirse la
   puerta la moneda dejaria de crecer. */
@keyframes mv-cara {
  0%, 100% { transform: translateY(-50%) perspective(1500px) rotateY(-16deg) rotateX( 3.5deg) scale(var(--portal-scale)); }
  50%      { transform: translateY(-50%) perspective(1500px) rotateY( 16deg) rotateX(-3.5deg) scale(var(--portal-scale)); }
}
@keyframes mv-bisel {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes mv-barre {
  0%   { transform: rotate(16deg) translateX(0);    opacity: 0; }
  9%   { opacity: 1; }
  52%  { opacity: 0; }
  100% { transform: rotate(16deg) translateX(560%); opacity: 0; }
}
@keyframes mv-late {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.94); }
  50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.06); }
}
@keyframes mv-sube {
  0%   { transform: translate(0, 0) scale(0.6);                                  opacity: 0; }
  14%  { opacity: 1; }
  72%  { opacity: 0.45; }
  100% { transform: translate(var(--dx), calc(var(--lado) * -0.17)) scale(0.25); opacity: 0; }
}


.enhanced #portal .portal-seal img{filter:none}
.enhanced #portal .portal-left .portal-seal{left:auto}
.enhanced #portal .portal-right .portal-seal{right:auto}
body.enhanced .portal-scroll{height:340vh}
/* Scene switches explicitly restore the rail; browser anchoring must not undo it. */
body.enhanced{overflow-anchor:none}
body.enhanced:not(.portal-bypassed) header{position:absolute;top:0;left:0;right:0;z-index:5;background:transparent;border:0}
body.enhanced:not(.portal-bypassed) .prototype{position:absolute;top:84px;left:0;right:0;z-index:5}
body.enhanced.portal-bypassed .portal-scroll{height:auto;min-height:100svh}
body.enhanced.portal-bypassed .portal-sticky{position:relative;height:auto;min-height:100svh;overflow:visible}
body.enhanced.portal-bypassed #selector{position:relative;inset:auto}
.enhanced #portal .portal-copy{padding:0;display:block;inset:0}
.enhanced #portal .portal-copy h1{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.enhanced #portal .portal-copy .eyebrow{top:clamp(128px,16vh,165px);left:0;right:0;text-align:center;letter-spacing:.35em}
.enhanced #portal .portal-hint{position:absolute;bottom:clamp(30px,5vh,55px);left:0;right:0;text-align:center;max-width:none;letter-spacing:.2em;text-transform:uppercase;font-size:11px}
.enhanced #portal #enter{position:absolute;bottom:calc(clamp(30px,5vh,55px) + 42px);left:50%;transform:translateX(-50%);font-size:11px;padding:10px 20px;background:transparent;color:var(--cobre);border:1px solid #C8886266;border-radius:999px}
.portal-hint-quiet{display:none}
@media(max-width:700px){body.enhanced .portal-scroll{height:300vh;--lado:clamp(200px,54vw,320px);--marco:calc(var(--lado)*1.2)}}
@media(max-width:400px){.portal-scroll{--lado:clamp(172px,50vw,320px)}}
@media(prefers-reduced-motion:reduce){body.enhanced .portal-scroll{height:100svh}.portal-hint-scroll{display:none}.portal-hint-quiet{display:inline}}
/* Reduced motion uses normal document flow instead of overlapping pinned layers. */
@media(prefers-reduced-motion:reduce){
 body.enhanced:not(.portal-bypassed) header,body.enhanced:not(.portal-bypassed) .prototype{position:relative;inset:auto}
 body.enhanced[data-phase="SELECTOR"] .portal-scroll{height:auto;min-height:100svh}
 body.enhanced[data-phase="SELECTOR"] .portal-sticky{position:relative;height:auto;min-height:100svh;overflow:visible}
 body.enhanced[data-phase="SELECTOR"] #selector{position:relative;inset:auto}
}