/* ─────────────────────────────────────────────────────────────────────────
 * intro-ruleta.css — La ruleta cruza la pantalla POR ENCIMA del contenido
 *
 * A los 5 segundos de abrir, la ruleta entra por la izquierda, cruza girando
 * y sale por la derecha. No tapa la app: pasa por arriba, sin fondo, y no
 * bloquea ningún toque. La app se usa normalmente mientras cruza.
 *
 * La ruleta NO es una imagen: se dibuja igual que la de verdad
 * (sorteov3/ruleta/index.php) — aro rojo con bombitas en CSS y los gajos en
 * un <canvas>.
 *
 * Espera, velocidad y tamaño: las variables de abajo.
 * ───────────────────────────────────────────────────────────────────────── */

.intro-ruleta{
    --intro-espera: 5s;     /* cuánto tarda en aparecer desde que abre */
    --intro-dur: 2.4s;      /* cuánto tarda en cruzar */
    --intro-size: 52vw;     /* tamaño de la ruleta (máx. 280px) */
    --intro-vueltas: 2;     /* vueltas mientras cruza */

    /* Por encima de todo: el modal del regalo y los banners también usan 9999
       y, al venir después en el DOM, tapaban la ruleta. */
    position:fixed; inset:0; z-index:2147483000;
    display:grid; place-items:center;
    background:transparent;              /* pasa por encima, no tapa la app */
    pointer-events:none;                 /* nunca bloquea un toque */
}

/* La caja entera cruza la pantalla; adentro, el disco gira */
.intro-wheel{
    position:relative; width:var(--intro-size); max-width:280px; aspect-ratio:1/1;
    opacity:0;
    animation:introCruza var(--intro-dur) cubic-bezier(.32,.03,.3,1) var(--intro-espera) forwards;
}
@keyframes introCruza{
    0%   { transform:translateX(-90vw); opacity:0; }
    14%  { opacity:1; }
    86%  { opacity:1; }
    100% { transform:translateX(90vw);  opacity:0; }
}

/* ── La camioneta: cruza derecho, con un balanceo mínimo ────────────────── */
.intro-premio{
    position:relative; width:auto; height:var(--premio-alto,38vw);
    max-height:var(--premio-max,300px);
    opacity:0;
    animation:introCruza var(--intro-dur) cubic-bezier(.32,.03,.3,1) var(--intro-espera) forwards;
}
.intro-premio img{
    height:100%; width:auto; display:block;
    filter:drop-shadow(0 16px 26px rgba(0,0,0,.55));
    animation:introBalanceo calc(var(--intro-dur) / 3) ease-in-out var(--intro-espera) 3;
}
@keyframes introBalanceo{
    0%,100%{ transform:rotate(-1.2deg) translateY(0); }
    50%    { transform:rotate(1.2deg)  translateY(-2%); }
}

/* ── Aro, bombitas, disco y centro: los mismos de la ruleta ─────────────── */
.intro-rim{
    position:absolute; inset:0; border-radius:50%;
    background:
        radial-gradient(closest-side,transparent 90.5%,rgba(0,0,0,.55) 91.5%,transparent 93%),
        conic-gradient(from 20deg,#6b0d12,#b31a21,#5a0a0e,#a3161c,#6b0d12,#b31a21,#5a0a0e,#a3161c,#6b0d12);
    box-shadow:0 0 0 2px rgba(242,193,78,.55),0 0 0 5px #1a0c0e,
               0 0 0 7px rgba(242,193,78,.35),0 26px 60px -18px rgba(0,0,0,.95),
               0 0 60px rgba(210,35,42,.35);
}
.intro-glow{
    position:absolute; inset:-6%; border-radius:50%; pointer-events:none;
    background:radial-gradient(closest-side,rgba(242,193,78,.22),rgba(210,35,42,.14) 70%,transparent);
}
.intro-bulb{
    position:absolute; width:4.1%; aspect-ratio:1/1; border-radius:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle at 35% 32%,#fffbe9 0,#ffe39a 28%,#f2b62e 62%,#9b6a10 100%);
    box-shadow:0 0 6px 1px rgba(255,208,96,.85),0 0 14px 3px rgba(255,180,60,.35);
    animation:introChase .5s linear infinite;
    animation-delay:calc(var(--i) * .0208s - .5s);
}
@keyframes introChase{
    0%{opacity:1;filter:brightness(1.25)}
    25%{opacity:.35;filter:brightness(.55)}
    100%{opacity:.35;filter:brightness(.55)}
}
.intro-canvas{
    position:absolute; inset:7.4%; width:85.2%; height:85.2%; border-radius:50%;
    box-shadow:0 0 0 2px rgba(0,0,0,.6),0 0 24px rgba(0,0,0,.6) inset;
    animation:introGira var(--intro-dur) cubic-bezier(.32,.03,.3,1) var(--intro-espera) forwards;
}
@keyframes introGira{
    from{ transform:rotate(0deg); }
    to  { transform:rotate(calc(var(--intro-vueltas) * 360deg)); }
}
.intro-hub{
    position:absolute; left:50%; top:50%; width:17%; aspect-ratio:1/1;
    transform:translate(-50%,-50%); border-radius:50%;
    display:grid; place-items:center;
    background:radial-gradient(circle at 35% 30%,#fff3c9,#f2c14e 38%,#b47a12 75%,#6e4507);
    box-shadow:0 0 0 3px #2a1406,0 0 0 5px rgba(242,193,78,.6),0 6px 16px rgba(0,0,0,.6);
}
.intro-hub span{
    width:62%; aspect-ratio:1/1; border-radius:50%; display:grid; place-items:center;
    background:radial-gradient(circle at 40% 35%,#ef4a50,#a3161c 70%,#5a0a0e);
    font-family:var(--display,"Bebas Neue",Impact,sans-serif); font-size:13px;
    color:#fff3c9; letter-spacing:.04em; box-shadow:inset 0 2px 4px rgba(255,255,255,.25);
}

/* Quien pidió menos movimiento ve la ruleta quieta y un fundido */
/* Quien pidió menos movimiento no la ve cruzar */
@media (prefers-reduced-motion:reduce){
    .intro-ruleta{ display:none; }
}

/* La camioneta es ancha: a lo largo tiene que cruzar entera */
.intro-ruleta:has(.intro-premio){ --intro-size:auto; }