/*
Theme Name: Folk Fantazija
Author: Folk Fantazija
Version: 1.0
*/

:root{
    --bg:#0d0d0e;
    --bg2:#151311;
    --panel:#181817;
    --gold:#f2bd4b;
    --gold2:#ffd875;
    --blue:#1674d1;
    --text:#f5f5f5;
    --muted:#aeb5bf;
    --line:rgba(255,255,255,.09);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
    margin:0;
    background:
        radial-gradient(circle at 80% 25%,rgba(18,91,180,.12),transparent 30%),
        radial-gradient(circle at 15% 80%,rgba(242,189,75,.05),transparent 28%),
        var(--bg);
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
}

a{
    color:inherit;
    text-decoration:none;
}

.site-header{
    position:sticky;
    top:0;
    z-index:100;
    height:88px;
    background:rgba(8,9,12,.94);
    border-top:1px solid rgba(255,255,255,.15);
    border-bottom:1px solid var(--line);
    backdrop-filter:blur(14px);
}

.header-inner{
    max-width:1200px;
    height:100%;
    margin:auto;
    padding:0 28px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.site-logo img{
    display:block;
    width:300px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}

.primary-menu{
    display:flex;
    align-items:center;
    gap:38px;
    margin:0;
    padding:0;
    list-style:none;
}

.primary-menu a{
    position:relative;
    color:#f0f0f0;
    font-size:14px;
    font-weight:800;
    letter-spacing:.4px;
    padding:34px 0;
    transition:.25s ease;
}

.primary-menu a:after{
    content:"";
    position:absolute;
    left:0;
    right:100%;
    bottom:23px;
    height:2px;
    background:var(--gold);
    transition:.25s ease;
}

.primary-menu a:hover{
    color:var(--gold2);
}

.primary-menu a:hover:after{
    right:0;
}

.hero{
    max-width:1200px;
    margin:0 auto;
    padding:80px 28px 55px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:65px;
    align-items:center;
}

.hero-kicker,
.section-kicker{
    color:var(--gold);
    font-size:13px;
    font-weight:900;
    letter-spacing:4px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.hero h1{
    margin:0;
    font-size:72px;
    line-height:.98;
    letter-spacing:-3px;
    font-weight:900;
}

.hero-description{
    max-width:650px;
    margin:28px 0 32px;
    color:#b9c1cc;
    font-size:18px;
    line-height:1.6;
}

.hero-buttons{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:57px;
    padding:0 24px;
    border-radius:13px;
    font-size:15px;
    font-weight:900;
    transition:.25s ease;
}

.btn-primary{
    color:#111;
    background:linear-gradient(135deg,var(--gold2),#e4aa37);
    box-shadow:0 12px 30px rgba(242,189,75,.16);
}

.btn-primary:hover{
    transform:translateY(-2px);
    box-shadow:0 16px 38px rgba(242,189,75,.24);
}

.btn-secondary{
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.035);
}

.btn-secondary:hover{
    background:rgba(255,255,255,.08);
    border-color:rgba(242,189,75,.35);
}

.hero-image{
    position:relative;
}

.hero-image:before{
    content:"";
    position:absolute;
    inset:-20px;
    background:radial-gradient(circle,rgba(17,91,190,.18),transparent 68%);
    z-index:-1;
}

.hero-image img{
    display:block;
    width:100%;
    height:355px;
    object-fit:cover;
    border-radius:28px;
    border:1px solid rgba(255,255,255,.09);
    box-shadow:0 30px 70px rgba(0,0,0,.48);
}

.radio-section{
    max-width:1200px;
    margin:0 auto;
    padding:35px 28px 85px;
}

.radio-card{
    position:relative;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.10);
    border-radius:25px;
    padding:32px;
    background:
        radial-gradient(circle at 90% 10%,rgba(20,100,210,.22),transparent 35%),
        linear-gradient(135deg,#181716,#111315);
    box-shadow:0 25px 70px rgba(0,0,0,.35);
}

.radio-card:after{
    content:"";
    position:absolute;
    right:-100px;
    bottom:-150px;
    width:330px;
    height:330px;
    border-radius:50%;
    background:rgba(19,91,180,.08);
}

.radio-top{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
}

.radio-status{
    display:inline-flex;
    align-items:center;
    gap:9px;
    color:#fff;
    font-size:12px;
    font-weight:900;
    letter-spacing:2px;
}

.radio-dot{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#e33;
    box-shadow:0 0 14px rgba(255,40,40,.8);
}

.radio-title{
    margin:18px 0 7px;
    font-size:32px;
    font-weight:900;
}

.radio-subtitle{
    color:var(--muted);
    font-size:15px;
}

.radio-player{
    position:relative;
    z-index:2;
    margin-top:27px;
    display:flex;
    align-items:center;
    gap:22px;
    padding:20px;
    border-radius:18px;
    background:rgba(0,0,0,.27);
    border:1px solid rgba(255,255,255,.07);
}

.radio-play{
    width:58px;
    height:58px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--gold);
    color:#111;
    font-size:22px;
    font-weight:900;
    flex:none;
}

.radio-wave{
    flex:1;
    height:45px;
    display:flex;
    align-items:center;
    gap:5px;
}

.radio-wave span{
    width:4px;
    border-radius:4px;
    background:var(--blue);
    opacity:.85;
}

.radio-wave span:nth-child(1){height:15px}
.radio-wave span:nth-child(2){height:27px}
.radio-wave span:nth-child(3){height:38px}
.radio-wave span:nth-child(4){height:22px}
.radio-wave span:nth-child(5){height:31px}
.radio-wave span:nth-child(6){height:42px}
.radio-wave span:nth-child(7){height:25px}
.radio-wave span:nth-child(8){height:35px}
.radio-wave span:nth-child(9){height:18px}
.radio-wave span:nth-child(10){height:30px}
.radio-wave span:nth-child(11){height:40px}
.radio-wave span:nth-child(12){height:23px}
.radio-wave span:nth-child(13){height:34px}
.radio-wave span:nth-child(14){height:17px}
.radio-wave span:nth-child(15){height:28px}

.content-section{
    max-width:1200px;
    margin:0 auto;
    padding:0 28px 90px;
}

.welcome-card{
    padding:40px;
    border-radius:24px;
    background:linear-gradient(135deg,#171614,#111213);
    border:1px solid var(--line);
}

.welcome-card h2{
    margin:0 0 18px;
    font-size:40px;
}

.welcome-card p{
    color:#b7bec7;
    line-height:1.75;
    font-size:17px;
}

.site-footer{
    border-top:1px solid var(--line);
    background:#090a0c;
    padding:32px 28px;
    color:#777e87;
    text-align:center;
    font-size:13px;
}

@media(max-width:800px){
    .site-header{height:76px}

    .header-inner{
        padding:0 18px;
    }

    .site-logo img{
        width:240px;
        height:auto;
    }

    .primary-menu{
        gap:15px;
    }

    .primary-menu a{
        font-size:11px;
        padding:29px 0;
    }

    .primary-menu a:after{
        bottom:18px;
    }

    .hero{
        grid-template-columns:1fr;
        gap:38px;
        padding-top:55px;
    }

    .hero h1{
        font-size:53px;
        letter-spacing:-2px;
    }

    .hero-image img{
        height:280px;
    }

    .radio-section{
        padding-bottom:55px;
    }
}

@media(max-width:560px){
    .primary-menu{
        gap:10px;
    }

    .primary-menu a{
        font-size:9px;
        letter-spacing:0;
    }

    .hero{
        padding-left:18px;
        padding-right:18px;
    }

    .hero h1{
        font-size:43px;
    }

    .hero-description{
        font-size:16px;
    }

    .radio-section,
    .content-section{
        padding-left:18px;
        padding-right:18px;
    }

    .radio-card{
        padding:23px;
    }

    .radio-title{
        font-size:25px;
    }

    .radio-player{
        padding:15px;
    }

    .welcome-card{
        padding:26px;
    }

    .welcome-card h2{
        font-size:31px;
    }
}

.site-logo img{
    width:145px;
    height:73px;
    object-fit:contain;
}

@media(max-width:800px){
    .site-logo img{
        width:120px;
        height:60px;
    }
}

.site-header{
    height:100px;
}

.header-inner{
    padding-left:22px;
    padding-right:22px;
}

.site-logo{
    width:105px;
    height:100px;
}

.site-logo img{
    width:105px !important;
    height:105px !important;
}

.primary-menu a{
    padding:40px 0;
}

.primary-menu a:after{
    bottom:28px;
}

@media(max-width:800px){
    .site-header{
        height:82px;
    }

    .site-logo{
        width:78px;
        height:82px;
    }

    .site-logo img{
        width:78px !important;
        height:78px !important;
    }

    .primary-menu a{
        padding:31px 0;
    }
}

.site-header{
    height:112px;
}

.site-logo{
    width:125px;
    height:112px;
}

.site-logo img{
    width:125px !important;
    height:125px !important;
}

.primary-menu a{
    padding:46px 0;
}

.primary-menu a:after{
    bottom:31px;
}

@media(max-width:800px){
    .site-header{
        height:90px;
    }

    .site-logo{
        width:90px;
        height:90px;
    }

    .site-logo img{
        width:90px !important;
        height:90px !important;
    }

    .primary-menu a{
        padding:35px 0;
    }
}

.header-inner{
    max-width:1400px;
    padding-left:18px;
    padding-right:18px;
}

@media(max-width:800px){
    .header-inner{
        padding-left:12px;
        padding-right:12px;
    }
}


/* =========================================================
   FOLK FANTAZIJA - MODERN RADIO PLAYER
   ========================================================= */

.ff-radio-player {
    width: 100%;
    max-width: 920px;
    margin: 55px auto;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(135deg, rgba(24,24,29,.98), rgba(10,10,13,.98));
    border: 1px solid rgba(212,175,55,.30);
    box-shadow:
        0 25px 70px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);
    color: #fff;
    position: relative;
}

.ff-radio-player:before {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: -100px;
    top: -140px;
    background: rgba(212,175,55,.12);
    border-radius: 50%;
    filter: blur(5px);
}

.ff-radio-top {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 26px;
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.ff-radio-status {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #d8b44a;
}

.ff-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #e53935;
    box-shadow: 0 0 0 5px rgba(229,57,53,.12);
    animation: ff-live-pulse 1.5s infinite;
}

@keyframes ff-live-pulse {
    0%,100% { box-shadow: 0 0 0 4px rgba(229,57,53,.12); }
    50% { box-shadow: 0 0 0 8px rgba(229,57,53,.03); }
}

.ff-radio-name {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: rgba(255,255,255,.72);
}

.ff-radio-main {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 30px;
}

.ff-radio-art {
    width: 145px;
    height: 145px;
    min-width: 145px;
    border-radius: 20px;
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(212,175,55,.28);
    box-shadow: 0 15px 35px rgba(0,0,0,.4);
}

.ff-radio-art img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.ff-radio-info {
    flex: 1;
    min-width: 0;
}

.ff-radio-label {
    color: #d8b44a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.5px;
    margin-bottom: 8px;
}

.ff-radio-now {
    font-size: 25px;
    font-weight: 800;
    line-height: 1.25;
    min-height: 32px;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ff-radio-wave {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 18px 0;
}

.ff-radio-wave span {
    width: 4px;
    height: 12px;
    border-radius: 5px;
    background: #c9a43d;
    opacity: .65;
}

.ff-radio-wave span:nth-child(2n) { height: 23px; }
.ff-radio-wave span:nth-child(3n) { height: 16px; }
.ff-radio-wave span:nth-child(4n) { height: 29px; }

.ff-radio-player:has(#ff-radio-audio:not([paused])) .ff-radio-wave span {
    animation: ff-wave .8s ease-in-out infinite alternate;
}

.ff-radio-wave span:nth-child(2n) { animation-delay: .12s; }
.ff-radio-wave span:nth-child(3n) { animation-delay: .24s; }

@keyframes ff-wave {
    from { transform: scaleY(.55); }
    to { transform: scaleY(1.25); }
}

.ff-radio-controls {
    display: flex;
    align-items: center;
    gap: 20px;
}

#ff-radio-play {
    width: 58px;
    height: 58px;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: linear-gradient(135deg,#d9b64e,#9f7920);
    color: #111;
    font-size: 19px;
    box-shadow: 0 8px 25px rgba(212,175,55,.25);
    transition: .2s ease;
}

#ff-radio-play:hover {
    transform: scale(1.06);
    box-shadow: 0 10px 30px rgba(212,175,55,.4);
}

#ff-radio-play.playing {
    background: #fff;
}

.ff-radio-volume {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.8);
}

#ff-radio-volume {
    width: 125px;
    accent-color: #c9a43d;
    cursor: pointer;
}

@media(max-width:650px) {

    .ff-radio-main {
        flex-direction: column;
        text-align: center;
        padding: 25px 20px 30px;
    }

    .ff-radio-art {
        width: 125px;
        height: 125px;
        min-width: 125px;
    }

    .ff-radio-now {
        font-size: 20px;
    }

    .ff-radio-controls {
        justify-content: center;
    }

    .ff-radio-top {
        padding: 17px 20px;
    }

    .ff-radio-name {
        display: none;
    }
}


/* =========================================================
   MODERN RADIO PLAYER
   ========================================================= */

.radio-card{
    background:
        radial-gradient(circle at 8% 50%,rgba(212,170,70,.12),transparent 30%),
        radial-gradient(circle at 92% 15%,rgba(20,100,210,.20),transparent 34%),
        linear-gradient(135deg,#171719 0%,#0c0e11 100%);
    border:1px solid rgba(212,170,70,.20);
    box-shadow:
        0 25px 80px rgba(0,0,0,.45),
        inset 0 1px 0 rgba(255,255,255,.04);
}

.radio-status{
    color:#e8c76b;
}

.radio-dot{
    width:11px;
    height:11px;
    background:#ff3030;
    box-shadow:0 0 10px rgba(255,40,40,.9);
    animation:radioLivePulse 1.5s infinite;
}

@keyframes radioLivePulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
        box-shadow:0 0 8px rgba(255,40,40,.7);
    }
    50%{
        opacity:.45;
        transform:scale(.78);
        box-shadow:0 0 20px rgba(255,40,40,1);
    }
}

.radio-title{
    color:#fff;
    letter-spacing:-.5px;
}

.radio-subtitle{
    color:#9da3ad;
}

.radio-player{
    margin-top:30px;
    min-height:94px;
    padding:17px 22px;
    gap:22px;
    border-radius:20px;
    background:
        linear-gradient(90deg,
            rgba(255,255,255,.055),
            rgba(255,255,255,.018));
    border:1px solid rgba(255,255,255,.09);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.035),
        0 15px 35px rgba(0,0,0,.22);
}

.radio-play{
    position:relative;
    width:64px;
    height:64px;
    padding:0;
    border:0;
    border-radius:50%;
    background:linear-gradient(145deg,#f2d47b,#c89a38);
    color:#151515;
    font-size:23px;
    line-height:1;
    cursor:pointer;
    box-shadow:
        0 8px 25px rgba(205,157,50,.28),
        inset 0 1px 1px rgba(255,255,255,.45);
    transition:
        transform .2s ease,
        box-shadow .2s ease,
        filter .2s ease;
}

.radio-play:hover{
    transform:scale(1.07);
    filter:brightness(1.08);
    box-shadow:
        0 10px 32px rgba(205,157,50,.40),
        inset 0 1px 1px rgba(255,255,255,.5);
}

.radio-play:active{
    transform:scale(.96);
}

.radio-play.playing{
    background:linear-gradient(145deg,#e8c76b,#b8892d);
}

.radio-play.playing:after{
    content:"";
    position:absolute;
    inset:-7px;
    border:1px solid rgba(232,199,107,.35);
    border-radius:50%;
    animation:radioRing 1.8s infinite;
}

@keyframes radioRing{
    0%{
        opacity:.8;
        transform:scale(.92);
    }
    100%{
        opacity:0;
        transform:scale(1.22);
    }
}

.radio-wave{
    position:relative;
    flex:1;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    overflow:hidden;
}

.radio-wave span{
    width:4px;
    min-height:7px;
    height:24px;
    border-radius:5px;
    background:linear-gradient(to top,#b98a30,#f0d276);
    opacity:.45;
    transform-origin:center;
    transition:opacity .3s ease;
}

.radio-player:has(.radio-play.playing) .radio-wave span{
    opacity:1;
    animation:radioBars .9s ease-in-out infinite alternate;
}

.radio-player:has(.radio-play.playing) .radio-wave span:nth-child(2n){
    animation-duration:.65s;
}

.radio-player:has(.radio-play.playing) .radio-wave span:nth-child(3n){
    animation-duration:1.05s;
}

.radio-player:has(.radio-play.playing) .radio-wave span:nth-child(4n){
    animation-duration:.78s;
}

@keyframes radioBars{
    0%{
        transform:scaleY(.35);
    }
    100%{
        transform:scaleY(1.5);
    }
}

.radio-player strong{
    min-width:180px;
    color:#f1d477;
    font-size:13px;
    letter-spacing:1.5px;
    text-align:right;
    white-space:nowrap;
}

@media(max-width:700px){

    .radio-top{
        align-items:flex-start;
        flex-direction:column;
    }

    .radio-top .btn{
        align-self:flex-start;
    }

    .radio-player{
        min-height:auto;
        padding:18px;
        gap:15px;
    }

    .radio-play{
        width:58px;
        height:58px;
        font-size:20px;
    }

    .radio-wave{
        height:45px;
    }

    .radio-player strong{
        min-width:auto;
        font-size:10px;
        letter-spacing:1px;
    }

}

@media(max-width:480px){

    .radio-card{
        padding:20px;
    }

    .radio-player{
        display:grid;
        grid-template-columns:58px 1fr;
        gap:14px;
    }

    .radio-play{
        grid-row:span 2;
    }

    .radio-wave{
        width:100%;
    }

    .radio-player strong{
        text-align:left;
    }

}


/* =========================================================
   RADIO TRACK INFO + REAL AUDIO VISUALIZER
   ========================================================= */

.radio-player{
    display:flex;
    align-items:center;
    gap:24px;
}

.radio-track{
    width:230px;
    min-width:230px;
}

.radio-track-label{
    color:#8f949c;
    font-size:9px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:5px;
}

.radio-track-artist{
    color:#f0cf70;
    font-size:15px;
    font-weight:800;
    line-height:1.25;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.radio-track-title{
    color:#fff;
    font-size:13px;
    margin-top:3px;
    line-height:1.3;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.radio-wave{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    height:60px;
}

.radio-wave span{
    height:32px;
    transform:scaleY(.25);
    transform-origin:center;
    transition:transform .06s linear;
    animation:none !important;
    background:linear-gradient(
        to top,
        #b98a30,
        #f0d276
    );
    box-shadow:0 0 7px rgba(225,185,80,.15);
}

.radio-player strong{
    display:none;
}

@media(max-width:900px){

    .radio-track{
        width:190px;
        min-width:190px;
    }

}

@media(max-width:700px){

    .radio-player{
        display:grid;
        grid-template-columns:58px 1fr;
        gap:14px;
    }

    .radio-track{
        width:auto;
        min-width:0;
    }

    .radio-wave{
        grid-column:1 / -1;
        width:100%;
        height:48px;
    }

}