@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

@font-face {
    font-family: "Geist";
    src: url("assets/fonts/Geist-VariableFont_wght.woff2") format("woff2");

    font-style: normal;
    font-weight: 100 900;

    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("assets/fonts/Geist-Italic-VariableFont_wght.woff2") format("woff2");

    font-style: italic;
    font-weight: 100 900;

    font-display: swap;
}

:root {
    --yellow: #F5C036;
    --red: #DA1A33;
    --white: #FFFFFF;
    --blue: #0057A4;
    --blue-dark: #073C68;
    --blue-mid: #126BB9;
    --blue-soft: #0D4D82;
    --bg: #041D32;
    --muted: rgba(255, 255, 255, 0.72);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
    background: var(--bg);
    font-family: "Geist", system-ui, sans-serif;
    color: var(--white);
}

body {
    overflow-x: hidden;
    background:
        radial-gradient(
            circle at 50% 15%,
            rgba(18, 107, 185, 0.3),
            transparent 34rem
        ),
        linear-gradient(
            180deg,
            #062946 0%,
            #041D32 46%,
            #031522 100%
        );
}

button {
    font: inherit;
}

/* ======================================================
   APP
====================================================== */

.app-shell {
    min-height: 100svh;
    width: min(100%, 480px);
    margin: 0 auto;

    padding-top: max(24px, env(safe-area-inset-top));
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 0;

    display: flex;
    flex-direction: column;
    background: url('./ruleta-v2.webp') no-repeat center;
    background-size: cover;
}

/* ======================================================
   HERO
====================================================== */

.hero {
    text-align: center;
    max-width: 340px;
    margin: 70px auto 50px;
    position: relative;
    z-index: 1;
    
}

.brand-logo {
    width: min(136px, 36vw);
    height: 50px;
    object-fit: contain;
    margin-bottom: 45px;
}

.eyebrow {
    margin: 0 0 -2px;
    color: var(--yellow);
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.16em;
}

h1 {
    margin: 0 auto;
    max-width: 380px;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.3;
    letter-spacing: -0.045em;
    font-weight: 300;
}
h1 em {
    font-weight: 700;
}

.intro {
    margin: 14px auto 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.5;
    font-style: italic;
}

/* ======================================================
   CONTENEDOR DE LA RULETA
====================================================== */

.wheel-section {
    position: relative;
    flex: 1;

    display: flex;
    flex-direction: column;

    min-height: 390px;
    margin-top: 34px;
}

.wheel-stage {
    position: relative;
    flex: 1;

    width: calc(100% + 40px);
    min-height: 385px;

    margin-left: -20px;

    overflow: hidden;
}

.wheel::before{

content:"";

position:absolute;

inset:18%;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(18,107,185,.58),
transparent 70%
);

filter:blur(50px);

z-index:-1;

}

/*
El centro de la rueda queda alineado con la parte
inferior del contenedor. Así solo aparece la mitad superior.
*/

.wheel-viewport {
    position: absolute;
    left: 50%;
    bottom: -200px;

    width: min(122vw, 610px);
    aspect-ratio: 1 / 1;

    transform:translateX(-50%);
}

/*
La flecha se coloca sobre el borde superior visible
de la rueda.
*/

.pointer {
    position: absolute;
    z-index: 20;

    left: 50%;
    top: -20px !important;

    width: 38px !important;
    height: 30px !important;

    transform: translateX(-50%);

    background: linear-gradient(
        180deg,
        #FDB71A 0%,
        #C48E16 100%
    );

    clip-path: polygon(
        50% 100%,
        10% 8%,
        16% 0%,
        84% 0%,
        90% 8%
    );

    border-radius: 14px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.68);

    filter:
        drop-shadow(0 6px 10px rgba(0,0,0,.65));
}

/* ======================================================
   RUEDA
====================================================== */

.wheel {
    position: absolute;
    inset: 0;

    border: none;
    border-radius: 50%;

    background:
        conic-gradient(
            from -22.5deg,
            #073C68 0deg 45deg,
            #0057A4 45deg 90deg,
            #126BB9 90deg 135deg,
            #0D4D82 135deg 180deg,
            #073C68 180deg 225deg,
            #0057A4 225deg 270deg,
            #126BB9 270deg 315deg,
            #0D4D82 315deg 360deg
        );

    box-shadow: none;

    transition:
        transform 6.2s cubic-bezier(0.12, 0.72, 0.08, 1);

    will-change: transform;
}


.wheel.is-settling {
    transition:
        transform 0.42s cubic-bezier(0.18, 0.88, 0.32, 1);
}


/* ======================================================
   SLOTS
====================================================== */

/*
Cada label ocupa toda la rueda.

La variable --slot determina su posición:
0, 1, 2, 3, 4, 5, 6 y 7.
*/

.wheel-label {
    position: absolute;
    z-index: 2;
    inset: 0;

    transform:
        rotate(calc(var(--slot) * 45deg));

    pointer-events: none;
}

/*
El texto se coloca sobre el radio del segmento.

Aumentar top lo acerca al centro.
Disminuir top lo lleva hacia el borde exterior.
*/

.wheel-label span {
    position: absolute;
    top: 20%;
    left: 50%;

    display: block;

    width: 150px;

    transform:
        translate(-50%, -50%)
        rotate(-90deg);

    transform-origin: center;

    color: var(--white);

    font-size: clamp(14px, 2.9vw, 14px);
    font-family: "Geist", sans-serif !important;

    font-weight: 300 !important;
    letter-spacing: -0.2px !important;

    text-align: center;
    white-space: nowrap;

    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.18);
}
/* ======================================================
   FLECHA
====================================================== */

.pointer {
    position: absolute;
    z-index: 20;

    left: 50%;
    top: -22px;

    width: 26px;
    height: 20px;

    transform: translateX(-50%);

    background: linear-gradient(
        180deg,
        #C48E16FDB71A 0%,
        # 100%
    );

    clip-path: polygon(
        50% 100%,
        12% 10%,
        18% 0%,
        82% 0%,
        88% 10%
    );

    border-radius: 5px;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.20),
        0 5px 10px rgba(0,0,0,.22);
}

.pointer.is-ticking {

    animation: pointerTick .09s ease;
}

@keyframes pointerTick {

    0%{
        transform:translateX(-50%) rotate(0deg);
    }

    45%{
        transform:translateX(-50%) rotate(8deg);
    }

    100%{
        transform:translateX(-50%) rotate(0deg);
    }

}

/* ======================================================
   BOTÓN GIRAR
====================================================== */

.spin-button {
    position: absolute;
    z-index: 5;
    left: 50%;
    top: 50%;

    width: clamp(118px, 30vw, 150px);
    aspect-ratio: 1;

    transform: translate(-50%, -50%);

    border: 7px solid rgba(255, 255, 255, 0.26);
    border-radius: 50%;

    background:
        #DA1A32 url('/iso-banco.svg') center no-repeat;
        background-size: 50px;

    color: #062946;
    font-weight: 900;
    font-size: clamp(18px, 5vw, 24px);
    letter-spacing: 0.03em;

    box-shadow:
0 0 18px rgba(245,192,54,.20),
0 16px 30px rgba(0,0,0,.30);

    cursor: pointer;

    transition:
        transform 0.18s ease,
        opacity 0.2s ease;
}

.spin-button:active {
    transform:
        translate(-50%, -50%)
        scale(0.96);
}

.spin-button:disabled {
    opacity: 0.75;
}

.spin-button.is-spinning {
    animation: spinButtonGlow 1.2s ease-in-out infinite;
}

@keyframes spinButtonGlow {
    0%,
    100% {
        box-shadow:
            0 16px 30px rgba(0, 0, 0, 0.34),
            0 0 0 rgba(245, 192, 54, 0),
            inset 0 3px 0 rgba(255, 255, 255, 0.5);
    }

    50% {
        box-shadow:
            0 16px 30px rgba(0, 0, 0, 0.34),
            0 0 28px rgba(245, 192, 54, 0.55),
            inset 0 3px 0 rgba(255, 255, 255, 0.5);
    }
}
/* ======================================================
   TEXTO AUXILIAR
====================================================== */

.helper {
    display: none;
    position: absolute;
    z-index: 9;
    left: 50%;
    bottom: 14px;

    width: 100%;
    margin: 0;

    transform: translateX(-50%);

    color: var(--muted);
    font-size: 13px;
    text-align: center;
}

/* ======================================================
   BACKDROP DEL RESULTADO
====================================================== */

.result-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20;

    background:
        rgba(1, 12, 22, 0.58);

    backdrop-filter: blur(8px);

    opacity: 0;

    transition:
        opacity 0.28s ease;
}

.result-backdrop.is-visible {
    opacity: 1;
}

/* ======================================================
   CARD SLIDE UP
====================================================== */

.result-sheet {
    position: fixed;
    z-index: 21;
    left: 50%;
    bottom: 0;

    width: min(100%, 480px);

    transform:
        translate(-50%, 110%);

    padding:
        12px
        24px
        calc(24px + env(safe-area-inset-bottom));

    border-radius: 28px 28px 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.08),
            transparent 28%
        ),
        #062946;

    border:
        1px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 -22px 60px rgba(0, 0, 0, 0.48);

    text-align: center;

    transition:
        transform 0.52s
        cubic-bezier(0.2, 0.9, 0.2, 1.12);
}

.result-sheet.is-visible {
    transform:
        translate(-50%, 0);
}

.sheet-handle {
    width: 46px;
    height: 5px;

    margin:
        0 auto 22px;

    border-radius: 99px;

    background:
        rgba(255, 255, 255, 0.22);
}

.result-visual {
    position: relative;
    width: 130px;
    height: 130px;

    margin: 0 auto 18px;

    border-radius: 26px;

    display: grid;
    place-items: center;

    overflow: hidden;
    isolation: isolate;

    background:
        linear-gradient(
            145deg,
            rgba(245, 192, 54, 0.22),
            rgba(245, 192, 54, 0.07)
        );

    border:
        1px solid rgba(245, 192, 54, 0.32);

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.result-visual::before {
    content: "";
    position: absolute;
    z-index: 1;

    top: -30%;
    left: -75%;

    width: 48%;
    height: 160%;

    transform:
        rotate(18deg)
        translateX(0);

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.05) 24%,
            rgba(255, 255, 255, 0.42) 50%,
            rgba(255, 255, 255, 0.08) 76%,
            transparent 100%
        );

    filter: blur(1px);

    animation:
        result-visual-shine 3.8s ease-in-out infinite;

    pointer-events: none;
}

.result-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;

    border-radius: inherit;

    background:
        radial-gradient(
            circle at 50% 45%,
            rgba(245, 192, 54, 0.16),
            transparent 68%
        );

    animation:
        result-visual-glow 3.8s ease-in-out infinite;

    pointer-events: none;
}

.result-visual img {
    position: relative;
    z-index: 2;

    width: 90px;
    height: 90px;
    object-fit: contain;

    filter:
        drop-shadow(0 7px 10px rgba(0, 0, 0, 0.24));
}

@keyframes result-visual-shine {
    0%,
    28% {
        left: -75%;
        opacity: 0;
    }

    35% {
        opacity: 1;
    }

    58% {
        left: 130%;
        opacity: 1;
    }

    66%,
    100% {
        left: 130%;
        opacity: 0;
    }
}

@keyframes result-visual-glow {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.96);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

.result-visual img {
    width: 80px;

}

.result-kicker {
    margin: 0 0 8px;
    color: var(--yellow);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.result-sheet h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.05;
}

.result-sheet p {
    margin:
        12px auto 22px;

    max-width: 340px;

    color: var(--muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.5;
}

.again-button{

    width:100%;
    min-height:58px;

    border:0;
    border-radius:999px;

    color:#062946;

    font-family:"Geist",sans-serif;
    font-size:18px;
    font-weight:500;

    cursor:pointer;

    background:
        linear-gradient(
            180deg,
            #FFD96A 0%,
            #F7C846 45%,
            #F5C036 100%
        );

    box-shadow:
        0 12px 28px rgba(245,192,54,.28),
        inset 0 2px 0 rgba(255,255,255,.45),
        inset 0 -2px 0 rgba(0,0,0,.08);

    transition:
        transform .18s ease,
        box-shadow .25s ease;
}

.again-button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 34px rgba(245,192,54,.36),
        inset 0 2px 0 rgba(255,255,255,.55);

}

.again-button:active{

    transform:scale(.98);

    box-shadow:
        0 8px 18px rgba(245,192,54,.24);

}

/* ======================================================
   ACCESIBILIDAD
====================================================== */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip:
        rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;
}

/* ======================================================
   SOLO MÓVIL
====================================================== */

@media (min-width: 600px) {
    body::before {
        content:
            "Esta experiencia está diseñada exclusivamente para móvil.";

        position: fixed;
        inset: 0;
        z-index: 999;

        display: grid;
        place-items: center;

        padding: 24px;

        background:
            #041D32;

        color:
            var(--white);

        text-align: center;
        font-weight: 700;
    }
}