/* Intro: la consola (copiada de la Switch 2) en 3D, en una habitación gamer.
   Las medidas las pone intro.js en píxeles: --bt marco de arriba/abajo, --bs marco de los lados,
   --ht alto total de la consola, --j ancho de cada mando, --g rendija entre consola y mando. */

/* Mientras dura: la portada hecha pantalla de la consola */
.is-intro body { background: #160D2B; }
.is-intro .hm { z-index: 2; background: var(--bg); pointer-events: none; opacity: 0; will-change: transform; backface-visibility: hidden; }
.is-intro-hold .tile { animation: none; }

.intro { position: fixed; inset: 0; z-index: 1; overflow: hidden; background: #160D2B; }
.intro__rig { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; pointer-events: none; }

/* La habitación, con un viñeteado suave para que la consola destaque */
.intro__room { position: absolute; inset: 0; background: url('/img/fondo-intro.webp') center 62% / cover no-repeat; transform-origin: 50% 58%; will-change: transform, filter; }
.intro__room::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 95% at 50% 45%, transparent 45%, rgba(12, 4, 28, 0.55) 100%); }

/* Sombra sobre el escritorio */
.intro__shadow {
  position: absolute; left: 50%; top: 76%; width: 74vw; height: 11vh; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(14, 4, 24, 0.62), rgba(14, 4, 24, 0.3) 55%, transparent);
  filter: blur(1vh);
}

/* Cuerpo: panel negro con la pantalla; el marco es más fino arriba y abajo que a los lados */
.intro__body {
  position: absolute; top: calc(var(--bt) * -1); bottom: calc(var(--bt) * -1); left: calc(var(--bs) * -1); right: calc(var(--bs) * -1);
  border-radius: calc(var(--ht) * 0.022);
}
.intro__face {
  transform: translateZ(-1px);
  background: linear-gradient(180deg, #17181B 0%, #0C0D0F 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 calc(var(--ht) * 0.004) 0 rgba(255, 255, 255, 0.07);
}
/* Grosor (copias de la silueta cada vez más atrás): gris grafito como los cantos de la consola */
.intro__slice { background: rgb(calc(52 - 30 * var(--shade)) calc(53 - 30 * var(--shade)) calc(58 - 33 * var(--shade))); box-shadow: none; }

/* Botones de encendido y volumen, asomando por el borde de arriba */
.intro__topbtn {
  position: absolute; left: 6%; width: 13%; top: calc(var(--bt) * -1 - var(--ht) * 0.011); height: calc(var(--ht) * 0.016);
  display: flex; gap: 12%; transform: translateZ(calc(var(--ht) * -0.045));
}
.intro__topbtn i { flex: 1; border-radius: calc(var(--ht) * 0.006) calc(var(--ht) * 0.006) 0 0; background: #2C2D31; }

/* Mandos (Joy-Con 2): gris grafito mate, esquinas de fuera muy redondeadas */
.intro__jc { position: absolute; top: calc(var(--bt) * -1); bottom: calc(var(--bt) * -1); width: var(--j); --jc: #A35BFF; }
.intro__jc--l { right: calc(100% + var(--bs) + var(--g)); border-radius: 72% 7% 7% 72% / 23% 3% 3% 23%; }
.intro__jc--r { left: calc(100% + var(--bs) + var(--g)); border-radius: 7% 72% 72% 7% / 3% 23% 23% 3%; --jc: #4CD964; }
.intro__jc:not(.intro__slice) {
  background: linear-gradient(180deg, #484A50 0%, #3A3C41 30%, #2E3034 100%);
  box-shadow: inset 0 0 calc(var(--j) * 0.09) rgba(0, 0, 0, 0.35), inset 0 calc(var(--ht) * 0.004) 0 rgba(255, 255, 255, 0.08);
}
/* Raya de color fina donde el mando se engancha a la consola */
.intro__jc:not(.intro__slice)::after { content: ''; position: absolute; top: 5%; bottom: 5%; width: calc(var(--j) * 0.016); border-radius: 1vh; background: var(--jc); opacity: 0.7; }
.intro__jc--l::after { right: calc(var(--j) * 0.012); }
.intro__jc--r::after { left: calc(var(--j) * 0.012); }

/* Botones: cada uno centrado en su punto */
.intro__jc > i, .intro__pad { position: absolute; display: block; translate: -50% -50%; }
.intro__stick {
  width: calc(var(--j) * 0.44); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #232427 0 40%, #2F3135 52%, #44464C 63%, #1B1C1F 71%);
  box-shadow: 0 0 0 calc(var(--j) * 0.032) var(--jc), 0 0 0 calc(var(--j) * 0.05) #1C1D20, 0 calc(var(--j) * 0.03) calc(var(--j) * 0.06) rgba(0, 0, 0, 0.55);
}
.intro__pad { width: calc(var(--j) * 0.66); aspect-ratio: 1; }
.intro__pad > i, .intro__ripple { position: absolute; display: block; width: 27.5%; aspect-ratio: 1; border-radius: 50%; }
.intro__pad > i {
  background: radial-gradient(circle at 45% 35%, #3B3D42, #1E1F22 75%);
  box-shadow: 0 calc(var(--j) * 0.012) calc(var(--j) * 0.022) rgba(0, 0, 0, 0.6), inset 0 0 0 calc(var(--j) * 0.006) rgba(255, 255, 255, 0.06);
}
.intro__pad > i:nth-child(1) { left: 36.25%; top: 0; }
.intro__pad > i:nth-child(2) { right: 0; top: 36.25%; }
.intro__pad > i:nth-child(3) { left: 36.25%; bottom: 0; }
.intro__pad > i:nth-child(4) { left: 0; top: 36.25%; }
.intro__pad--abxy > i::after {
  content: attr(data-k); position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 calc(var(--j) * 0.085) / 1 'Nunito', system-ui, sans-serif; color: #C9CACE;
}
.intro__a { z-index: 1; }
.intro__ripple { right: 0; top: 36.25%; border: calc(var(--j) * 0.02) solid #fff; box-shadow: 0 0 calc(var(--j) * 0.1) var(--jc), 0 0 calc(var(--j) * 0.05) #fff; opacity: 0; }
.intro__minus { width: calc(var(--j) * 0.14); height: calc(var(--j) * 0.04); border-radius: 1vh; background: #1A1B1E; }
.intro__plus {
  width: calc(var(--j) * 0.14); aspect-ratio: 1;
  background: linear-gradient(#1A1B1E, #1A1B1E) center / 100% 30% no-repeat, linear-gradient(#1A1B1E, #1A1B1E) center / 30% 100% no-repeat;
}
.intro__capture { width: calc(var(--j) * 0.13); aspect-ratio: 1; border-radius: 18%; background: #1A1B1E; box-shadow: inset 0 0 0 calc(var(--j) * 0.025) #2A2B2F; }
.intro__home { width: calc(var(--j) * 0.15); aspect-ratio: 1; border-radius: 50%; background: #1A1B1E; box-shadow: inset 0 0 0 calc(var(--j) * 0.012) rgba(255, 255, 255, 0.1); }
.intro__cbtn {
  width: calc(var(--j) * 0.13); aspect-ratio: 1; border-radius: 22%; background: #1A1B1E;
  display: grid !important; place-items: center; font: 700 calc(var(--j) * 0.08) / 1 'Nunito', system-ui, sans-serif; font-style: normal; color: #8E8F94;
}

/* Pantalla de arranque (va encima de la portada, dentro de la pantalla) */
/* Como el arranque de la consola: fondo oscuro con luces de colores desenfocadas y el logo en blanco */
.intro-boot { position: absolute; inset: 0; z-index: 100; display: grid; place-items: center; overflow: hidden; color: #fff; background: #050713; }
.intro-boot__bg { position: absolute; inset: 0; background: url('/img/fondo-arranque.webp') center / cover no-repeat; will-change: transform; }
/* Velo oscuro en el centro para que el logo resalte sobre las luces */
.intro-boot::before { content: ''; position: absolute; inset: 0; z-index: 1; background: radial-gradient(48% 50% at 50% 47%, rgba(5, 7, 19, 0.6), transparent 80%); }
.intro-boot__logo {
  position: relative; z-index: 2; width: min(58vw, 88vh); height: auto; margin-top: -5vh;
  filter: drop-shadow(0 0 1.6vh rgba(255, 255, 255, 0.35)) drop-shadow(0 1vh 2.4vh rgba(0, 0, 0, 0.5));
}
.intro-boot__hint {
  position: absolute; z-index: 2; left: 0; right: 0; bottom: 7vh; display: flex; align-items: center; justify-content: center; gap: 1.2vh;
  margin: 0; font-size: 4.2vh; font-weight: 700; color: rgba(255, 255, 255, 0.82);
}
.intro-boot__hint b { display: grid; place-items: center; width: 1.45em; height: 1.45em; border-radius: 50%; background: #fff; color: #0D0B16; font-size: 0.8em; }
.intro-boot__off { position: absolute; inset: 0; background: #050506; }
.intro-glare {
  position: absolute; inset: 0; z-index: 101; pointer-events: none;
  background: linear-gradient(118deg, transparent 0%, transparent 38%, rgba(255, 255, 255, 0.13) 46%, rgba(255, 255, 255, 0.04) 54%, transparent 62%);
}