/* Prodígio Academia: página de apresentação, sem rolagem */
:root {
    --preto: #0a0a0b;
    --amarelo: #ffd60a;
    --branco: #f5f4ef;
    --cinza: #8d8d96;
    --mx: 50vw;
    --my: 50vh;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--preto);
    color: var(--branco);
}

body {
    position: fixed;
    inset: 0;
    font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
    -webkit-font-smoothing: antialiased;
    touch-action: none;
}

#campo, .luz {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Luz que acompanha o ponteiro, atrás do campo de halteres */
.luz {
    pointer-events: none;
    background: radial-gradient(38vmax circle at var(--mx) var(--my), rgba(255, 214, 10, .13), transparent 70%);
}

.palco {
    position: relative;
    height: 100dvh;
    padding: max(16px, env(safe-area-inset-top)) 5vw max(16px, env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: center;
    justify-items: center;
    gap: clamp(10px, 3vh, 32px);
    pointer-events: none;
}

/* Anilha: logo no centro, texto girando em volta */
.anilha {
    --tam: min(46vh, 80vw);
    position: relative;
    width: var(--tam);
    height: var(--tam);
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle, #1b1b1f 0 56%, #111114 57% 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, .07),
        inset 0 0 0 calc(var(--tam) * .012) rgba(255, 214, 10, .55),
        0 30px 70px rgba(0, 0, 0, .7);
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
    transition: transform .25s ease-out;
    animation: chegada .9s cubic-bezier(.2, 1.3, .4, 1) both;
}

.anilha-texto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: giro 40s linear infinite;
}

.anilha-texto text {
    fill: var(--branco);
    font: 800 21px 'Barlow Condensed', 'Arial Narrow', sans-serif;
    letter-spacing: 1px;
}

.logo {
    width: 58%;
    height: auto;
    filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .6));
}

.chamada {
    text-align: center;
    animation: subida .8s .2s ease-out both;
}

h1 {
    margin: 0;
    font: 400 clamp(2.4rem, min(17vw, 11vh), 6.4rem)/1 'Anton', Impact, sans-serif;
    text-transform: uppercase;
    letter-spacing: .5px;
    transform: skewX(-6deg);
}

.linha { display: block; }

.destaque {
    color: var(--amarelo);
}

.breve {
    margin: clamp(6px, 1.4vh, 14px) 0 clamp(10px, 2vh, 20px);
    font-size: clamp(1.05rem, 2.8vh, 1.6rem);
    font-weight: 800;
    letter-spacing: .32em;
    text-indent: .32em;
    text-transform: uppercase;
    color: var(--branco);
}

/* Barra olímpica com as anilhas sendo carregadas */
.barra {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: clamp(28px, 5vh, 44px);
}

.barra b {
    width: min(46vw, 300px);
    height: 5px;
    border-radius: 3px;
    background: linear-gradient(90deg, #6d6d76, #d6d6da 50%, #6d6d76);
}

.peso {
    display: block;
    width: 8px;
    border-radius: 3px;
    background: var(--amarelo);
    animation: carga 3.6s ease-in-out infinite;
}

.p1 { height: 55%; animation-delay: .9s; }
.p2 { height: 78%; animation-delay: .45s; }
.p3 { height: 100%; animation-delay: 0s; }

@keyframes giro { to { transform: rotate(360deg); } }
@keyframes chegada { from { opacity: 0; scale: .7; } }
@keyframes subida { from { opacity: 0; translate: 0 24px; } }
@keyframes carga {
    0%, 8% { opacity: 0; translate: 0 -10px; }
    22%, 82% { opacity: 1; translate: 0 0; }
    100% { opacity: 0; translate: 0 0; }
}

/* Tela larga: anilha à esquerda, chamada à direita */
@media (min-aspect-ratio: 5/4) {
    .palco {
        grid-template-columns: auto minmax(0, auto);
        grid-template-rows: auto;
        align-items: center;
        justify-content: center;
        gap: clamp(32px, 7vw, 110px);
    }
    .anilha { --tam: min(72vh, 42vw); }
    .chamada { text-align: left; }
    h1 { font-size: clamp(3rem, min(9.5vw, 19vh), 10rem); transform-origin: left; }
    .breve { text-indent: 0; }
    .barra { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .peso { opacity: 1; }
}