/* Intro cinematográfica — Kike Bañuls Elite */
#intro { display: none; }
html.intro body { overflow: hidden; }
html.intro #intro {
  display: block;
  position: fixed; inset: 0; z-index: 1000;
  background: #050506; color: #f4f1ea;
  overflow: hidden;
  font-family: Inter, system-ui, sans-serif;
  transition: opacity .8s ease;
}
#intro.out { opacity: 0; pointer-events: none; }
#intro canvas.i-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* Viñeta y grano */
#intro .i-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(0, 0, 0, .75) 100%);
}
#intro .i-grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: iGrain .5s steps(4) infinite;
}
@keyframes iGrain { 0% { transform: translate(0, 0); } 25% { transform: translate(-3%, 2%); } 50% { transform: translate(2%, -3%); } 75% { transform: translate(-2%, -1%); } }

/* Bandas de cine */
#intro .i-bars i {
  position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 4;
  transition: transform 1.2s cubic-bezier(.7, 0, .2, 1);
}
#intro .i-bars i:first-child { top: 0; }
#intro .i-bars i:last-child { bottom: 0; }
#intro.ending .i-bars i:first-child { transform: translateY(-100%); }
#intro.ending .i-bars i:last-child { transform: translateY(100%); }

/* Nombres volando en 3D */
#intro .i-names { position: absolute; inset: 0; perspective: 900px; pointer-events: none; overflow: hidden; }
#intro .i-name {
  position: absolute; left: 50%; top: 50%;
  font: italic 800 clamp(26px, 4.4vw, 56px)/1 "Barlow Condensed", Impact, sans-serif;
  text-transform: uppercase; white-space: nowrap; letter-spacing: .02em;
  color: rgba(244, 241, 234, .9);
  will-change: transform, opacity;
}
#intro .i-name.i-champ {
  font-size: clamp(34px, 6vw, 80px);
  background: linear-gradient(90deg, #f3d98f, #d4a94f, #f3d98f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Escenas de texto */
#intro .i-scene {
  position: absolute; left: 16px; right: 16px; top: 50%; z-index: 3;
  text-align: center; pointer-events: none;
  opacity: 0; filter: blur(14px);
  transform: translateY(-50%) scale(.9);
  transition: opacity .9s ease, filter .9s ease, transform 1.6s cubic-bezier(.16, 1, .3, 1);
}
#intro .i-scene.on { opacity: 1; filter: blur(0); transform: translateY(-50%) scale(1); }
#intro .i-scene.low { top: 76%; }
#intro .i-scene.title { top: 71%; }
#intro .i-big, #intro .i-year { text-shadow: 0 0 60px rgba(0, 0, 0, .9); }
#intro .i-big.gold, #intro .i-year.gold { text-shadow: none; filter: drop-shadow(0 0 40px rgba(0, 0, 0, .9)); }

#intro .i-year, #intro .i-big {
  font: italic 800 clamp(110px, 26vw, 300px)/.85 "Barlow Condensed", Impact, sans-serif;
  letter-spacing: -.01em;
}
#intro .i-big { font-size: clamp(120px, 30vw, 340px); }
#intro .gold {
  background: linear-gradient(90deg, #f3d98f, #d4a94f 45%, #9c7020);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#intro .i-cap {
  margin-top: 14px;
  font: 600 clamp(15px, 2vw, 22px)/1.3 Inter, sans-serif;
  letter-spacing: .38em; text-transform: uppercase; color: #d4a94f;
}
#intro .i-scene.on .i-cap { animation: iTrack 3s ease both; }
@keyframes iTrack { from { letter-spacing: .9em; opacity: 0; } to { letter-spacing: .38em; opacity: 1; } }

#intro .i-title h2 {
  font: italic 800 clamp(58px, 12vw, 150px)/.9 "Barlow Condensed", Impact, sans-serif;
  text-transform: uppercase; margin: 0;
}
#intro .i-title h2 span {
  display: inline-block; opacity: 0; transform: translateY(60%) rotateX(-80deg);
  transition: opacity .6s ease, transform .9s cubic-bezier(.16, 1, .3, 1);
}
#intro .i-title.on h2 span { opacity: 1; transform: none; }
#intro .i-elite {
  display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 8px;
  font: 600 clamp(24px, 4vw, 46px)/1 "Barlow Condensed", sans-serif;
  text-transform: uppercase; color: #d4a94f; letter-spacing: .6em;
}
#intro .i-elite::before, #intro .i-elite::after { content: ""; width: 60px; height: 3px; background: linear-gradient(90deg, transparent, #d4a94f); }
#intro .i-elite::after { transform: scaleX(-1); }

/* Barra de progreso y botón saltar */
#intro .i-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 6; background: rgba(255, 255, 255, .08); }
#intro .i-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #9c7020, #f3d98f); }
#intro .i-skip {
  position: absolute; z-index: 7; right: 16px; top: calc(9vh + 14px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  background: rgba(10, 10, 12, .55); backdrop-filter: blur(8px);
  border: 1px solid rgba(212, 169, 79, .5); color: #f4f1ea;
  font: 600 15px Inter, sans-serif; letter-spacing: .04em; cursor: pointer;
  transition: background .2s, transform .15s;
}
#intro .i-skip:hover { background: rgba(212, 169, 79, .22); transform: translateY(-1px); }
#intro .i-skip svg { width: 18px; height: 18px; color: #d4a94f; }

#intro .i-sound {
  position: absolute; z-index: 7; left: 16px; top: calc(9vh + 14px);
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: rgba(212, 169, 79, .9); color: #16130c; border: 1px solid transparent;
  font: 600 15px Inter, sans-serif; cursor: pointer;
  animation: iCall 1.8s ease-in-out infinite;
}
#intro .i-sound svg { width: 20px; height: 20px; }
#intro .i-sound .s-on { display: none; }
#intro .i-sound.on { background: rgba(10, 10, 12, .55); backdrop-filter: blur(8px); color: #f4f1ea; border-color: rgba(212, 169, 79, .5); animation: none; }
#intro .i-sound.on .s-on { display: block; color: #d4a94f; }
#intro .i-sound.on .s-off { display: none; }
@keyframes iCall { 50% { box-shadow: 0 0 0 8px rgba(212, 169, 79, .18); } }

/* Destello final */
#intro .i-flash { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(circle, #fff6dc, #d4a94f 40%, transparent 70%); opacity: 0; transition: opacity .5s ease; }
#intro.ending .i-flash { opacity: .85; }

@media (max-width: 640px) {
  #intro .i-bars i { height: 6vh; }
  #intro .i-skip { top: calc(6vh + 12px); padding: 0 16px; }
  #intro .i-sound { top: calc(6vh + 12px); padding: 0 14px; }
  #intro .i-scene.title { top: 68%; }
  #intro .i-elite::before, #intro .i-elite::after { width: 30px; }
}