/* ==========================================================
   CARROSSEL DO TOPO DA HOME — slides lado a lado que deslizam
   (setas nos lados, bolinhas embaixo; a bolinha da vez vai
   enchendo e, cheia, passa pro próximo — ver pages/home.js).
   O slide 1 é o topo de boas-vindas (home.css); o slide 2 é o de
   Steel Ball Run, com clima de faroeste ao pôr do sol.
========================================================== */

.hero-carousel{

    position:relative;

    margin-bottom:26px;

    border-radius:18px;

    box-shadow:0 30px 70px rgba(0,0,0,.55);

}

/* a moldura fica no carrossel (e não em cada slide): os slides entram
   e saem por baixo dela */
.hero-viewport{

    overflow:hidden;

    border-radius:18px;

    border:1px solid rgba(201,168,79,.32);

    transition:height .45s ease;

}

.hero-track{

    display:flex;

    align-items:flex-start;

    transition:transform .75s cubic-bezier(.65,.05,.25,1);

}

.hero-carousel .hero-slide{

    flex:0 0 100%;

    min-width:0;

    margin:0;

    border:0;

    border-radius:0;

    box-shadow:none;

}

/* ===== setas ===== */

.hero-arrow{

    position:absolute;

    top:50%;

    z-index:6;

    display:flex;

    align-items:center;

    justify-content:center;

    width:38px;

    height:38px;

    margin-top:-19px;

    border-radius:50%;

    border:1px solid rgba(235,209,137,.5);

    background:rgba(10,9,14,.78);

    color:var(--gold-light);

    box-shadow:0 4px 12px rgba(0,0,0,.45);

    cursor:pointer;

    opacity:.8;

    transition:opacity .2s ease, transform .2s ease, background .2s ease;

}

.hero-arrow:hover,
.hero-arrow:focus-visible{

    opacity:1;

    background:rgba(24,20,32,.9);

    transform:scale(1.08);

}

.hero-arrow:focus-visible{

    outline:2px solid var(--gold-light);

    outline-offset:2px;

}

.hero-arrow svg{

    width:20px;

    height:20px;

    fill:none;

    stroke:currentColor;

    stroke-width:2.2;

    stroke-linecap:round;

    stroke-linejoin:round;

}

.hero-arrow-prev{ left:9px; }

.hero-arrow-next{ right:9px; }

/* ===== bolinhas (a da vez vira uma barrinha que enche = o tempo do slide) ===== */

.hero-dots{

    position:absolute;

    left:50%;

    bottom:14px;

    z-index:6;

    display:flex;

    gap:8px;

    translate:-50% 0;

}

.hero-dot{

    position:relative;

    width:10px;

    height:10px;

    padding:0;

    border:0;

    border-radius:999px;

    background:rgba(255,255,255,.28);

    overflow:hidden;

    cursor:pointer;

    transition:width .35s ease, background .2s ease;

}

.hero-dot:hover{

    background:rgba(255,255,255,.5);

}

.hero-dot.is-active{

    width:38px;

    background:rgba(235,209,137,.28);

}

.hero-dot i{

    position:absolute;

    inset:0;

    border-radius:inherit;

    background:var(--gold-gradient);

    transform:scaleX(0);

    transform-origin:left center;

}

.hero-dot.is-active i{

    animation:heroDotFill var(--dur, 8s) linear forwards;

}

@keyframes heroDotFill{

    to{ transform:scaleX(1); }

}

/* o tempo pausa: mouse em cima, foco de teclado dentro, som do mini
   player ligado, ou o topo fora da tela */
.hero-carousel:has(:focus-visible) .hero-dot.is-active i,
.hero-carousel.is-held .hero-dot.is-active i,
.hero-carousel.is-offscreen .hero-dot.is-active i{

    animation-play-state:paused;

}

@media (hover:hover){

    .hero-carousel:hover .hero-dot.is-active i{

        animation-play-state:paused;

    }

}

/* ==========================================================
   SLIDE: STEEL BALL RUN — "AS JOJO-FEIRAS VOLTARAM!!!"
========================================================== */

.hero-sbr{

    --dust:#F29A4A;

    --sand:#FFC98A;

    /* com quebra de linha: quando o texto ocupa a largura toda (tela
       estreita), a tela do vídeo desce pra linha de baixo sozinha — o
       slide é o próprio container, então não dá pra mudar a direção
       dele numa @container */
    flex-wrap:wrap;

    align-content:center;

    background:#140C12;

}

/* céu de pôr do sol, escurecendo à esquerda pro texto ler bem */
.sbr-sky{

    position:absolute;

    inset:0;

    background:
        linear-gradient(90deg, rgba(14,9,14,.9) 0%, rgba(14,9,14,.64) 30%, rgba(14,9,14,.08) 56%, transparent 100%),
        radial-gradient(ellipse 60% 34% at 58% 80%, rgba(255,178,90,.55), transparent 70%),
        linear-gradient(180deg, #1F0F26 0%, #4A1A33 26%, #8E3432 50%, #D4682F 70%, #F2A94E 86%, #F7C66A 100%);

    pointer-events:none;

}

/* raios saindo do sol */
.sbr-rays{

    position:absolute;

    inset:0;

    background:repeating-conic-gradient(from 0deg at 51% 80%, rgba(255,214,150,.1) 0deg 1.4deg, transparent 1.4deg 6deg);

    -webkit-mask-image:radial-gradient(circle at 51% 80%, transparent 0 7%, #000 20%, transparent 64%);

    mask-image:radial-gradient(circle at 51% 80%, transparent 0 7%, #000 20%, transparent 64%);

    pointer-events:none;

}

/* o sol baixo, meio escondido atrás das dunas */
.sbr-sun{

    position:absolute;

    left:51%;

    top:80%;

    width:190px;

    height:190px;

    margin:-95px 0 0 -95px;

    border-radius:50%;

    background:radial-gradient(circle, #FFF4CF 0%, #FFD98A 38%, #F7A24C 60%, rgba(242,126,58,.35) 64%, transparent 72%);

    box-shadow:0 0 90px 30px rgba(255,170,80,.35);

    pointer-events:none;

}

/* dunas e uma mesa de pedra na silhueta */
.sbr-dunes{

    position:absolute;

    left:0;

    right:0;

    bottom:0;

    height:34%;

    background:
        radial-gradient(ellipse 34% 60% at 88% 100%, #1B0D12 58%, transparent 59%),
        radial-gradient(ellipse 50% 46% at 56% 104%, #231017 58%, transparent 59%),
        radial-gradient(ellipse 60% 52% at 14% 106%, #170B10 58%, transparent 59%),
        linear-gradient(transparent 70%, rgba(20,10,14,.9));

    pointer-events:none;

}

.sbr-dunes::before{ /* mesa de pedra no horizonte, nascendo do chão */

    content:"";

    position:absolute;

    left:30%;

    bottom:0;

    width:150px;

    height:78%;

    background:#1E0E14;

    clip-path:polygon(0 100%, 10% 42%, 18% 30%, 32% 24%, 64% 22%, 78% 30%, 86% 46%, 100% 100%);

}

.sbr-halftone{

    background-image:radial-gradient(circle, rgba(242,154,74,.4) 1.2px, transparent 1.7px);

}

.sbr-menace{

    color:var(--dust);

    text-shadow:0 0 20px rgba(242,154,74,.6);

}

/* ===== texto ===== */

.sbr-copy{

    z-index:3;

}

.sbr-eyebrow{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:8px 12px;

    margin-bottom:16px;

}

.sbr-tag{

    display:inline-flex;

    align-items:center;

    gap:7px;

    padding:5px 12px 5px 9px;

    border-radius:999px;

    border:1px solid rgba(242,154,74,.55);

    background:rgba(242,154,74,.14);

    color:var(--sand);

    font-size:.72rem;

    font-weight:700;

    letter-spacing:.16em;

    text-transform:uppercase;

}

.sbr-tag svg{

    width:16px;

    height:16px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;

}

.sbr-friday{

    font-size:.74rem;

    font-weight:600;

    letter-spacing:.08em;

    color:#E9D6BE;

}

.sbr-friday::before{

    content:"★ ";

    color:var(--dust);

}

.sbr-title{

    font-family:var(--font-display);

    font-weight:900;

    font-size:52px;

    line-height:1.02;

    letter-spacing:.01em;

    text-transform:uppercase;

    color:#FFF6E8;

    filter:drop-shadow(0 4px 0 rgba(0,0,0,.55));

    margin-bottom:14px;

}

.sbr-title > span,
.sbr-title > em{

    display:block;

}

/* "JoJo-feiras" no dourado de pôr do sol */
.sbr-title em{

    font-style:italic;

    background:linear-gradient(180deg, #FFF1BE 0%, #FFC45C 42%, #F07A30 78%, #C24E22 100%);

    -webkit-background-clip:text;

    background-clip:text;

    color:transparent;

    padding-right:.1em;

}

.sbr-sub{

    color:#F1E1CC;

}

.sbr-cta{

    background:linear-gradient(135deg, #FFD98A 0%, #F29A4A 55%, #D0612A 100%);

    color:#2A1206;

}

/* ===== a tela com a abertura + as cartas espiando por trás ===== */

.sbr-stage{

    position:absolute;

    right:84px;

    top:0;

    bottom:0;

    z-index:2;

    width:430px;

}

.sbr-cards{

    position:absolute;

    inset:0;

}

.sbr-card{

    --r:0deg;

    --lift:0px;

    position:absolute;

    top:34px;

    width:116px;

    transform:translateY(var(--lift)) rotate(var(--r));

    transition:transform .35s cubic-bezier(.2,1.25,.4,1);

    --accent:var(--dust);

}

.sbr-card-0{ left:44px; top:62px; --r:-13deg; }  /* Johnny */
.sbr-card-1{ left:157px; --r:0deg; }            /* Gyro (no meio, mais alto) */
.sbr-card-2{ left:270px; top:62px; --r:13deg; }   /* Valentine */

/* passar o mouse: a carta sobe mais pra fora da tela */
.sbr-card:hover,
.sbr-card:focus-visible{

    --lift:-18px;

    z-index:1;

}

.sbr-screen{

    position:absolute;

    left:9px;

    right:9px;

    bottom:28px;

    z-index:2;

}

/* moldura de latão de salão do velho oeste */
.sbr-frame{

    position:relative;

    padding:8px;

    border-radius:12px;

    background:linear-gradient(145deg, #F2CD86 0%, #9A6526 38%, #E0AE62 62%, #6A3F17 100%);

    box-shadow:
        0 0 0 1px rgba(0,0,0,.7),
        inset 0 0 0 1px rgba(255,236,190,.35),
        0 18px 44px rgba(0,0,0,.65);

}

/* rebites nos cantos (em cima da moldura, nunca do vídeo) */
.sbr-frame::before,
.sbr-frame::after{

    content:"";

    position:absolute;

    top:2px;

    width:4px;

    height:4px;

    border-radius:50%;

    background:#FFE7B0;

    box-shadow:0 0 2px rgba(0,0,0,.8);

}

.sbr-frame::before{ left:2px; }

.sbr-frame::after{ right:2px; }

/* o player do YouTube: 16:9, nunca menor que 200px de altura
   (height:auto — o iframe chega com height="360" do próprio YouTube,
   que passaria por cima da proporção) */
.sbr-player{

    display:block;

    width:100%;

    height:auto;

    aspect-ratio:16 / 9;

    min-height:200px;

    border:0;

    border-radius:6px;

    background:#000;

}

.sbr-screen-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:10px;

    margin-top:9px;

}

/* legenda numa pílula escura: embaixo da tela o fundo é o horizonte claro */
.sbr-now{

    min-width:0;

    padding:5px 12px;

    border-radius:999px;

    background:rgba(16,10,12,.72);

    font-size:.72rem;

    color:#F1E1CC;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.sbr-now b{

    font-family:var(--font-display);

    font-weight:900;

    color:var(--sand);

    letter-spacing:.04em;

}

.sbr-sound{

    display:inline-flex;

    align-items:center;

    gap:6px;

    flex-shrink:0;

    padding:5px 12px 5px 9px;

    border-radius:999px;

    border:1px solid rgba(242,154,74,.6);

    background:rgba(16,10,12,.7);

    color:var(--sand);

    font:600 .72rem "Poppins", sans-serif;

    cursor:pointer;

    transition:background .2s ease, color .2s ease;

}

.sbr-sound:hover{

    background:rgba(242,154,74,.22);

}

.sbr-sound.is-on{

    background:linear-gradient(135deg, #FFD98A, #F29A4A);

    color:#2A1206;

}

.sbr-sound svg{

    width:15px;

    height:15px;

    fill:none;

    stroke:currentColor;

    stroke-width:1.9;

    stroke-linecap:round;

}

/* ===== o slide se ajusta à largura dele (container da .home-hero) ===== */

@container (max-width:1120px){

    .sbr-stage{ right:74px; width:392px; }

    .sbr-card{ width:104px; }

    .sbr-card-0{ left:44px; }
    .sbr-card-1{ left:144px; }
    .sbr-card-2{ left:244px; }

    .sbr-title{ font-size:46px; }

    .sbr-copy{ width:min(430px, 100%); }

}

/* não cabe lado a lado: texto em cima, tela embaixo */
@container (max-width:960px){

    .sbr-copy{

        flex:0 0 100%;

        width:100%;

        padding:40px 36px 0;

    }

    .sbr-stage{

        position:relative;

        right:auto;

        width:min(430px, calc(100% - 48px));

        height:410px;

        margin:0 auto 40px;

    }

    .sbr-menace{ display:none; }

}

@container (max-width:620px){

    .sbr-copy{ padding:30px 22px 0; }

    .sbr-title{ font-size:36px; }

    .sbr-stage{ width:calc(100% - 28px); height:360px; margin-bottom:38px; }

    .sbr-screen{ left:0; right:0; }

    .sbr-card{ width:84px; top:40px; }

    .sbr-card-0{ left:calc(50% - 132px); top:60px; }
    .sbr-card-1{ left:calc(50% - 42px); }
    .sbr-card-2{ left:calc(50% + 48px); top:60px; }

}

/* ===== celular: setas menores, mais pra borda ===== */

@media (max-width:700px){

    .hero-arrow{

        top:auto;

        bottom:4px;

        width:32px;

        height:32px;

        margin-top:0;

    }

    .hero-arrow-prev{ left:calc(50% - 82px); }

    .hero-arrow-next{ right:calc(50% - 82px); }

    .hero-dots{ bottom:15px; }

    /* sobra espaço embaixo de cada slide pra fileira setas + bolinhas */
    .hero-carousel .home-hero-copy{ padding-bottom:58px; }

    .hero-carousel .sbr-copy{ padding-bottom:0; }

    .sbr-stage{ margin-bottom:52px; }

}

@media (prefers-reduced-motion:reduce){

    .hero-track,
    .hero-viewport{

        transition:none;

    }

    /* sem troca automática: a bolinha da vez já aparece cheia */
    .hero-dot.is-active i{

        animation:none;

        transform:scaleX(1);

    }

}