/*
==============================================================
CIDADE + WEB RÁDIO — V1.0
Base mínima.

Regra desta versão:
1. Trabalhar HERO.
2. Trabalhar PLAYER.
3. Não antecipar o restante do site.
==============================================================
*/

:root{
    --bg:#0a0b0d;
    --panel:#111316;
    --text:#f2dfbd;
    --muted:#b7aa96;
    --amber:#d99645;
    --red:#d3442f;
    --line:rgba(214,164,96,.30);
    --shell:1180px;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:Arial, Helvetica, sans-serif;
}

img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit}

.shell{
    width:min(calc(100% - 32px),var(--shell));
    margin-inline:auto;
}

.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;
}

/* ---------- TOPO / MENU-SINTONIA ---------- */

.site-header{
    position:relative;
    z-index:20;
    background:
        linear-gradient(180deg,#15100d 0,#0b0b0c 48%,#08090a 100%);
    border-bottom:1px solid rgba(197,125,59,.42);
    box-shadow:
        0 10px 30px rgba(0,0,0,.35),
        inset 0 -1px 0 rgba(255,210,145,.06);
}

.site-header::before{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    opacity:.22;
    background:
        repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px),
        radial-gradient(circle at 20% -40%,rgba(182,105,46,.25),transparent 28%);
}

.site-header__inner{
    min-height:94px;
    display:grid;
    grid-template-columns:170px minmax(0,1fr) 154px;
    gap:18px;
    align-items:center;
}

.brand{
    position:relative;
    z-index:3;
    align-self:stretch;
    display:flex;
    align-items:center;
}

.brand img{
    width:160px;
    height:76px;
    object-fit:contain;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.58));
}

/*
   A barra central imita o visor de sintonia AM/FM dos receivers antigos:
   vidro fumê, escala, ponteiro vermelho e uma pequena lâmpada âmbar.
*/
.tuner-nav{
    --needle-x: 7%;
    position:relative;
    min-width:0;
    height:66px;
    padding:0 17px;
    display:flex;
    align-items:center;
    overflow:hidden;
    border:1px solid #6d4a30;
    border-radius:4px;
    background:
        linear-gradient(180deg,rgba(20,22,22,.97),rgba(5,7,8,.99));
    box-shadow:
        inset 0 0 0 1px rgba(248,205,143,.08),
        inset 0 12px 22px rgba(255,255,255,.018),
        inset 0 -12px 24px rgba(0,0,0,.52),
        0 5px 15px rgba(0,0,0,.30);
}

.tuner-nav::before,
.tuner-nav::after{
    content:"";
    position:absolute;
    left:8px;
    right:8px;
    height:1px;
    pointer-events:none;
    background:linear-gradient(90deg,transparent,#a7784a 7%,#503622 50%,#a7784a 93%,transparent);
    opacity:.75;
}

.tuner-nav::before{top:7px}
.tuner-nav::after{bottom:7px}

.tuner-nav__glass{
    position:absolute;
    inset:3px;
    border-radius:3px;
    pointer-events:none;
    background:
        linear-gradient(105deg,transparent 0 20%,rgba(255,255,255,.035) 27%,transparent 35% 68%,rgba(255,255,255,.02) 75%,transparent 82%);
    mix-blend-mode:screen;
}

.tuner-nav__scale{
    position:absolute;
    left:20px;
    right:20px;
    bottom:12px;
    height:7px;
    pointer-events:none;
    opacity:.40;
    background:
        repeating-linear-gradient(90deg,
            rgba(219,183,127,.72) 0 1px,
            transparent 1px 20px);
}

.tuner-nav__scale::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:1px;
    background:linear-gradient(90deg,transparent,#b98a51 7%,#b98a51 93%,transparent);
}

.main-nav{
    position:relative;
    z-index:4;
    width:100%;
    height:100%;
    display:grid;
    grid-template-columns:repeat(6,minmax(max-content,1fr));
    align-items:center;
    gap:0;
    font-family:"Arial Narrow", "Roboto Condensed", Arial, sans-serif;
    font-size:clamp(.66rem,.95vw,.88rem);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.055em;
}

.main-nav a{
    position:relative;
    min-width:0;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 8px 3px;
    color:#e6d3af;
    text-shadow:0 1px 0 #000;
    transition:color .22s ease,text-shadow .22s ease;
}

.main-nav a::after{
    content:"";
    position:absolute;
    right:0;
    top:21px;
    bottom:21px;
    width:1px;
    background:linear-gradient(transparent,rgba(199,149,91,.24),transparent);
}

.main-nav a:last-child::after{display:none}

.main-nav a:hover,
.main-nav a.is-active{
    color:#ff624d;
    text-shadow:
        0 0 7px rgba(212,68,47,.32),
        0 1px 0 #000;
}

/* ponteiro/slider móvel: posição calculada pelo JS */
.tuner-nav__needle{
    position:absolute;
    z-index:5;
    left:var(--needle-x);
    bottom:8px;
    width:58px;
    height:2px;
    transform:translateX(-50%);
    pointer-events:none;
    border-radius:99px;
    background:#ed4c38;
    box-shadow:
        0 0 5px rgba(237,76,56,.68),
        0 0 12px rgba(237,76,56,.22);
    transition:var(--needle-transition, left .42s cubic-bezier(.2,.75,.2,1), width .25s ease);
}

.tuner-nav__needle::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:0;
    width:1px;
    height:16px;
    transform:translateX(-50%);
    background:linear-gradient(transparent,#ed4c38);
    opacity:.72;
}

.tuner-nav__lamp{
    position:absolute;
    z-index:3;
    right:12px;
    top:11px;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#d9a35a;
    box-shadow:0 0 8px rgba(217,163,90,.7);
    opacity:.55;
}

.on-air{
    position:relative;
    z-index:3;
    justify-self:end;
    min-width:140px;
    height:62px;
    display:inline-flex;
    gap:9px;
    align-items:center;
    justify-content:center;
    border:1px solid #88503c;
    border-radius:4px;
    background:
        radial-gradient(circle at 50% 50%,rgba(197,61,43,.20),transparent 65%),
        linear-gradient(#24120e,#130b09);
    box-shadow:
        inset 0 0 0 3px #0a0908,
        inset 0 0 0 4px rgba(174,111,70,.32),
        0 5px 14px rgba(0,0,0,.35);
    color:#ffb798;
    font-size:1.14rem;
    font-weight:900;
    letter-spacing:.08em;
    text-shadow:
        0 0 6px #d54e37,
        0 0 16px rgba(213,78,55,.32);
}

.on-air__dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#e1573e;
    box-shadow:0 0 10px #d84a35;
    animation:onAirPulse 1.65s ease-in-out infinite;
}

@keyframes onAirPulse{
    50%{opacity:.48;box-shadow:0 0 4px #d84a35}
}

.menu-toggle{
    display:none;
}

/* ---------- HERO / ETAPA 01 ---------- */

.hero{
    min-height:610px;
    position:relative;
    overflow:hidden;
    border-bottom:1px solid var(--line);
    background:
        radial-gradient(circle at 75% 35%,rgba(178,105,44,.15),transparent 28rem),
        linear-gradient(180deg,#111418,#090a0b);
}

/*
A imagem definitiva do cenário virá aqui:
.hero__scene { background-image:url('../img/hero-base.jpg'); }

Ela será criada SEM menu/títulos/textos queimados na arte.
*/
.hero__scene{
    position:absolute;
    inset:0;
    opacity:.18;
    background:
        linear-gradient(90deg,transparent 0 50%,rgba(214,149,73,.07) 70%,transparent),
        repeating-linear-gradient(90deg,transparent 0 64px,rgba(255,255,255,.018) 65px);
}

.hero__content{
    position:relative;
    z-index:2;
    min-height:610px;
    display:flex;
    align-items:center;
}

.hero__copy{
    width:min(590px,100%);
}

.eyebrow{
    color:var(--amber);
    font-size:.8rem;
    letter-spacing:.18em;
    text-transform:uppercase;
    font-weight:800;
}

.hero h1{
    margin:14px 0 26px;
    font-size:clamp(3rem,6vw,5.7rem);
    line-height:.9;
    letter-spacing:-.055em;
}

.hero h1 em{
    display:block;
    margin-top:18px;
    color:#f1c681;
    font-family:Georgia,serif;
    font-size:.43em;
    line-height:1.1;
    font-weight:400;
    letter-spacing:0;
}

.hero__manifesto{
    max-width:450px;
    margin:0;
    color:#d9cbb5;
    font-size:1.05rem;
    line-height:1.55;
}

.hero__manifesto strong{color:#f0b967}

/* ---------- PLAYER / ETAPA 02 ---------- */

.player-section{
    padding:22px 0 50px;
    background:#090a0c;
}

.player{
    min-height:190px;
    position:relative;
    overflow:hidden;
    border:1px solid var(--line);
    border-radius:12px;
    background:#0c0f12;
}

/*
A imagem definitiva da "casca" virá aqui:
.player__shell-image {
    background-image:url('../img/player-shell.png');
}

Esta imagem NÃO terá ponteiros, números, equalizador, texto,
tempo, botões ativos nem conteúdo dinâmico.
*/
.player__shell-image{
    position:absolute;
    inset:0;
    pointer-events:none;
    border:8px solid rgba(129,80,39,.40);
    box-shadow:inset 0 0 0 1px rgba(240,185,106,.24);
}

.player__live-layer{
    position:relative;
    z-index:2;
    min-height:190px;
    padding:22px 30px;
    display:grid;
    grid-template-columns:1fr 1.2fr 1fr;
    gap:28px;
    align-items:center;
}

.player__left,
.player__right{
    min-width:0;
    display:grid;
    gap:7px;
}

.player__kicker{
    color:var(--red);
    font-size:.72rem;
    font-weight:900;
    letter-spacing:.12em;
    text-transform:uppercase;
}

.player__station,
.track-title{
    font-size:1.18rem;
}

.player__status,
.track-artist{
    color:var(--muted);
    font-size:.85rem;
}

.equalizer{
    margin-top:9px;
    height:36px;
    display:flex;
    align-items:end;
    gap:4px;
}

.equalizer i{
    width:4px;
    height:12px;
    background:var(--red);
    animation:eq .7s ease-in-out infinite alternate;
}

.equalizer i:nth-child(3n){height:30px;animation-delay:.2s}
.equalizer i:nth-child(4n){height:22px;animation-delay:.35s}
.equalizer i:nth-child(5n){height:17px;animation-delay:.12s}

@keyframes eq{to{height:7px;opacity:.45}}

.player__center{
    display:grid;
    gap:12px;
}

.vu-stage{
    height:96px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.vu{
    position:relative;
    overflow:hidden;
    border:2px solid rgba(143,91,44,.65);
    border-radius:5px;
    background:linear-gradient(#e2c68b,#bfa167);
    box-shadow:inset 0 0 20px rgba(79,45,18,.24);
}

.vu__scale::before{
    content:"-20   -10   -5   0   +3";
    position:absolute;
    left:0;right:0;top:14px;
    text-align:center;
    color:#362511;
    font:700 .69rem monospace;
    word-spacing:2px;
}

.vu__needle{
    position:absolute;
    left:50%;
    bottom:-9px;
    width:2px;
    height:74px;
    background:#9f2721;
    transform-origin:bottom;
    transform:rotate(-23deg);
    transition:transform .1s linear;
}

.vu--right .vu__needle{
    transform:rotate(18deg);
}

.player__controls{
    display:flex;
    justify-content:center;
    gap:12px;
}

.player__controls button{
    width:42px;height:34px;
    border:1px solid rgba(210,165,98,.32);
    background:#111519;
    color:#e7c594;
    cursor:pointer;
}

.player__controls .player__play{
    width:50px;
    border-color:#bd8150;
    border-radius:50%;
}

.track-progress{
    margin-top:10px;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:9px;
    align-items:center;
    color:#ae9d86;
    font-size:.72rem;
}

#seek{
    width:100%;
    accent-color:var(--red);
}

/* Rodapé temporário de desenvolvimento */
.dev-footer{
    padding:28px 0;
    border-top:1px solid rgba(255,255,255,.06);
    color:#6f6a62;
    font-size:.75rem;
}

.dev-footer .shell{
    display:flex;
    justify-content:space-between;
    gap:20px;
}

/* ---------- RESPONSIVO ---------- */

@media(max-width:1040px){
    .site-header__inner{
        grid-template-columns:150px minmax(0,1fr) 126px;
        gap:12px;
    }

    .brand img{
        width:142px;
    }

    .main-nav{
        font-size:.68rem;
        letter-spacing:.02em;
    }

    .main-nav a{
        padding-inline:4px;
    }

    .on-air{
        min-width:116px;
        font-size:.96rem;
    }
}

@media(max-width:860px){
    .site-header__inner{
        grid-template-columns:145px 1fr auto;
        min-height:82px;
    }

    .brand img{
        width:136px;
        height:66px;
    }

    .menu-toggle{
        display:block;
        justify-self:end;
        width:44px;
        height:44px;
        border:1px solid rgba(174,122,69,.32);
        background:#0e1011;
        border-radius:3px;
        cursor:pointer;
    }

    .menu-toggle span{
        display:block;
        width:23px;
        height:2px;
        background:#e1c89f;
        margin:5px auto;
    }

    .tuner-nav{
        display:none;
        position:absolute;
        top:80px;
        left:16px;
        right:16px;
        height:auto;
        min-height:72px;
        padding:16px 14px 22px;
    }

    .tuner-nav.is-open{
        display:block;
    }

    .main-nav{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        height:auto;
        font-size:.78rem;
    }

    .main-nav a{
        min-height:44px;
        border-bottom:1px solid rgba(181,132,78,.12);
    }

    .main-nav a::after{display:none}

    .tuner-nav__needle,
    .tuner-nav__scale,
    .tuner-nav__lamp{
        display:none;
    }

    .on-air{
        min-width:108px;
        height:54px;
        font-size:.88rem;
    }

    .player__live-layer{
        grid-template-columns:1fr;
    }
}

@media(max-width:600px){
    .site-header__inner{
        grid-template-columns:130px 1fr auto;
    }

    .brand img{
        width:126px;
        height:62px;
    }

    .on-air{
        min-width:auto;
        width:46px;
        padding:0;
        font-size:0;
    }

    .on-air__dot{
        width:11px;
        height:11px;
    }

    .hero,
    .hero__content{
        min-height:520px;
    }

    .hero h1{
        font-size:clamp(3rem,14vw,4.4rem);
    }

    .player__live-layer{
        padding:20px 18px;
    }

    .dev-footer .shell{
        flex-direction:column;
    }
}