@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329;
}
@font-face {
    font-family: 'Bebas Neue';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/bebas-neue-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('../fonts/poppins-300-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC;
}

#intro-overlay {
    position: fixed;
    inset: 0;
    background: #0d0d0d;
    z-index: 10000;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    /* Swallow touch/scroll gestures while the intro is visible. Scoped to the
       overlay (removed via display:none afterwards), so it can't leave the page
       scroll-locked on iOS the way a body overflow:hidden lock can. */
    touch-action: none;
}

#intro-overlay.fade-out {
    animation: overlayFadeOut 0.6s ease-out forwards;
}

@keyframes overlayFadeOut {
    to { opacity: 0; pointer-events: none; }
}

.intro-sweep-beam {
    position: absolute;
    top: 0;
    width: 560px;
    height: 92vh;
    transform-origin: 50% 0;
    background: radial-gradient(
        ellipse 70% 60% at 50% 0%,
        rgba(61, 189, 117, 0.72) 0%,
        rgba(61, 189, 117, 0.22) 50%,
        transparent 100%
    );
    filter: blur(14px);
    animation-fill-mode: forwards;
    animation-play-state: paused;
    z-index: 2;
    pointer-events: none;
}

#beam-1 {
    left: calc(28% - 280px);
    animation: beamSweep1 0.9s cubic-bezier(0.25,0.46,0.45,0.94) forwards paused;
}
#beam-2 {
    left: calc(72% - 280px);
    animation: beamSweep2 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.08s forwards paused;
}
#beam-3 {
    left: calc(42% - 280px);
    animation: beamSweep3 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.18s forwards paused;
}
#beam-4 {
    left: calc(58% - 280px);
    animation: beamSweep4 0.9s cubic-bezier(0.25,0.46,0.45,0.94) 0.28s forwards paused;
}

@keyframes beamSweep1 {
    0%   { opacity: 0; transform: rotate(-52deg); }
    20%  { opacity: 0.85; }
    100% { opacity: 0.65; transform: rotate(-28deg); }
}
@keyframes beamSweep2 {
    0%   { opacity: 0; transform: rotate(52deg); }
    20%  { opacity: 0.85; }
    100% { opacity: 0.65; transform: rotate(28deg); }
}
@keyframes beamSweep3 {
    0%   { opacity: 0; transform: rotate(-30deg); }
    20%  { opacity: 0.75; }
    100% { opacity: 0.5; transform: rotate(-10deg); }
}
@keyframes beamSweep4 {
    0%   { opacity: 0; transform: rotate(30deg); }
    20%  { opacity: 0.75; }
    100% { opacity: 0.5; transform: rotate(10deg); }
}

.intro-narrow-beam {
    position: absolute;
    top: 0;
    width: 220px;
    height: 88vh;
    transform-origin: 50% 0;
    background: radial-gradient(
        ellipse 55% 65% at 50% 0%,
        rgba(30, 100, 60, 0.9) 0%,
        rgba(20, 70, 42, 0.35) 50%,
        transparent 100%
    );
    filter: blur(7px);
    animation-fill-mode: forwards;
    animation-play-state: paused;
    z-index: 2;
    pointer-events: none;
}

#beam-5 {
    left: calc(18% - 110px);
    animation: narrowSweep1 0.7s cubic-bezier(0.25,0.46,0.45,0.94) forwards paused;
}
#beam-6 {
    left: calc(82% - 110px);
    animation: narrowSweep2 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.1s forwards paused;
}
#beam-7 {
    left: calc(35% - 110px);
    animation: narrowSweep3 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.2s forwards paused;
}
#beam-8 {
    left: calc(65% - 110px);
    animation: narrowSweep4 0.7s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s forwards paused;
}

@keyframes narrowSweep1 {
    0%   { opacity: 0; transform: rotate(-68deg); }
    20%  { opacity: 0.9; }
    100% { opacity: 0.7; transform: rotate(-42deg); }
}
@keyframes narrowSweep2 {
    0%   { opacity: 0; transform: rotate(68deg); }
    20%  { opacity: 0.9; }
    100% { opacity: 0.7; transform: rotate(42deg); }
}
@keyframes narrowSweep3 {
    0%   { opacity: 0; transform: rotate(-20deg); }
    20%  { opacity: 0.8; }
    100% { opacity: 0.6; transform: rotate(-5deg); }
}
@keyframes narrowSweep4 {
    0%   { opacity: 0; transform: rotate(20deg); }
    20%  { opacity: 0.8; }
    100% { opacity: 0.6; transform: rotate(5deg); }
}

#beams-radial {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    z-index: 2;
    pointer-events: none;
}
.beam-r {
    position: absolute;
    top: 0;
    left: -80px;
    width: 160px;
    height: 50vh;
    transform-origin: 50% 0;
    background: radial-gradient(
        ellipse 80% 65% at 50% 0%,
        rgba(61, 189, 117, 0.65) 0%,
        rgba(61, 189, 117, 0.15) 55%,
        transparent 100%
    );
    filter: blur(10px);
    animation: beamOn 0.6s ease-out forwards paused;
}
.beam-r.r0 { transform: rotate(-65deg); animation-delay: 0s; }
.beam-r.r1 { transform: rotate(-22deg); animation-delay: 0.08s; }
.beam-r.r2 { transform: rotate( 22deg); animation-delay: 0.16s; }
.beam-r.r3 { transform: rotate( 65deg); animation-delay: 0.24s; }

@keyframes beamOn {
    from { opacity: 0; }
    35%  { opacity: 0.8; }
    to   { opacity: 0.55; }
}

#intro-logo-wrap {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    background: #ffffff;
    border-radius: 1.25rem;
    padding: 1.1rem 1.8rem;
    box-shadow: 0 0 55px rgba(61, 189, 117, 0.28), 0 4px 30px rgba(0,0,0,0.5);
    z-index: 10;
    animation: blurReveal 0.4s ease-out forwards paused;
}
#intro-logo-wrap img {
    display: block;
    width: min(240px, 50vw);
    height: auto;
}

@keyframes blurReveal {
    from { filter: blur(18px); opacity: 0; transform: translateX(-50%) scale(0.95); }
    to   { filter: blur(0);    opacity: 1; transform: translateX(-50%) scale(1);   }
}

.kw {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
    white-space: nowrap;
    animation-fill-mode: forwards;
    animation-play-state: paused;
}

.kw.fade-out {
    animation: kwFadeOut 0.35s ease-in forwards !important;
    animation-play-state: running !important;
}

@keyframes kwFadeOut {
    to { opacity: 0; }
}


#kw-genres {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(1.1rem, 3.5vw, 2.2rem);
    color: #e2e2e2;
    letter-spacing: 0.22em;
    top: 71%;
    z-index: 6;
    animation: slideInLeft 0.38s cubic-bezier(0.23,1,0.32,1) forwards paused;
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(calc(-50% - 50px)); }
    to   { opacity: 1; transform: translateX(-50%); }
}

#kw-region {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.75rem, 2vw, 1.05rem);
    font-weight: 300;
    color: var(--accent, #3dbd75);
    letter-spacing: 0.28em;
    top: 79%;
    z-index: 6;
    animation: charSpread 0.45s ease-out forwards paused;
}

@keyframes charSpread {
    from { opacity: 0; letter-spacing: 0.6em; }
    to   { opacity: 1; letter-spacing: 0.28em; }
}

#kw-songs {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(3rem, 10vw, 7rem);
    color: #3dbd75;
    letter-spacing: 0.04em;
    top: 60%;
    z-index: 9;
    text-shadow: 0 0 30px rgba(61, 189, 117, 0.6), 0 0 60px rgba(61, 189, 117, 0.25);
    animation: punchIn 0.28s cubic-bezier(0.36,0.07,0.19,0.97) forwards paused;
}

@keyframes punchIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(2.2); }
    60%  { opacity: 1; }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

#kw-live100 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.2rem, 6vw, 4.5rem);
    letter-spacing: 0.14em;
    top: 60%;
    z-index: 9;
    background: linear-gradient(
        90deg,
        #e2e2e2 30%,
        #3dbd75 50%,
        #e2e2e2 70%
    );
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmerReveal 1.1s ease-out forwards paused;
}

@keyframes shimmerReveal {
    0%   { opacity: 0; background-position: -100% center; }
    20%  { opacity: 1; }
    100% { opacity: 1; background-position: 200% center; }
}

#kw-cta {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(0.7rem, 1.8vw, 0.95rem);
    font-weight: 300;
    color: #777;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    top: 87%;
    z-index: 6;
    animation: fadeSlow 0.6s ease-out forwards paused;
}

@keyframes fadeSlow {
    from { opacity: 0; transform: translateX(-50%) translateY(10px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.intro-skip-hint {
    position: absolute;
    bottom: 1.5rem;
    right: 1.8rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.7rem;
    font-weight: 300;
    color: #333;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    pointer-events: none;
    animation: fadeSlow 1s 0.5s ease-out forwards paused;
}