/* =========================================================
   SK ENTERTAINMENT
   PREMIUM INTERNAL PAGE EXPERIENCE

   Used by:
   - Homepage
   - SK Screen / Shows
   - SK Screen / Movies
   - SK Music

   Section 0 (ambient background layer) is unscoped, so it
   works on every page. Everything after that is scoped to
   body.sk-inner-page, which the homepage does not carry —
   its hero/header/section styling stays in index.html since
   that layout is unique to the homepage.

   Paired with /js/premium-effects.js, which generates the
   particles and floating art. See that file for usage.
========================================================= */

/* =========================================================
   0. AMBIENT BACKGROUND LAYER (glow orbs, particles,
      floating art) — shared across every page
========================================================= */

.background-glow {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.25;
}

.glow-one {
    width: 500px;
    height: 500px;
    background: #8d3dff;
    top: -180px;
    left: -160px;
}

.glow-two {
    width: 450px;
    height: 450px;
    background: #ff1744;
    right: -180px;
    bottom: -120px;
}

.glow-three {
    width: 350px;
    height: 350px;
    background: #315cff;
    left: 45%;
    top: 40%;
    opacity: 0.08;
}

.particles {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(221, 194, 255, 0.8);
    box-shadow: 0 0 10px rgba(185, 108, 255, 0.65);
    animation: floatParticle linear infinite;
}

.particle:nth-child(3n) {
    width: 3px;
    height: 3px;
    background: rgba(255, 255, 255, 0.55);
}

.particle:nth-child(4n) {
    background: rgba(255, 92, 112, 0.6);
    box-shadow: 0 0 12px rgba(255, 92, 112, 0.55);
}

@keyframes floatParticle {
    0% {
        transform: translate3d(0, 20px, 0);
        opacity: 0;
    }

    12% {
        opacity: 0.8;
    }

    80% {
        opacity: 0.45;
    }

    100% {
        transform: translate3d(20px, -110vh, 0);
        opacity: 0;
    }

}

.floating-art-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.floating-art {
    position: absolute;
    width: var(--size);
    height: var(--size);
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    opacity: var(--opacity);
    filter: saturate(0.9) brightness(0.72);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.35);
    transform: rotate(var(--rotation));
    animation: driftArt var(--duration) ease-in-out var(--delay) infinite alternate;
    will-change: transform;
}

.floating-art.poster {
    border-radius: 10px;
    aspect-ratio: 2 / 3;
    height: auto;
}

.floating-art.album {
    aspect-ratio: 1 / 1;
}

@keyframes driftArt {
    0% {
        transform: translate3d(0, 0, 0) rotate(var(--rotation));
    }

    50% {
        transform: translate3d(var(--move-x), var(--move-y), 0) rotate(calc(var(--rotation) + 3deg));
    }

    100% {
        transform: translate3d(calc(var(--move-x) * -0.7), calc(var(--move-y) * -0.65), 0) rotate(calc(var(--rotation) - 3deg));
    }

}

@media (prefers-reduced-motion: reduce) {
    .particle,
    .floating-art {
        animation: none !important;
    }

}

/* =========================================================
   1. GLOBAL ATMOSPHERE
========================================================= */

body.sk-inner-page {
    position: relative;
    background: radial-gradient( circle at 12% 8%, rgba(168, 92, 255, 0.13), transparent 28% ), radial-gradient( circle at 88% 72%, rgba(255, 45, 90, 0.08), transparent 30% ), radial-gradient( circle at 50% 45%, rgba(65, 90, 255, 0.045), transparent 38% ), #050509;
    isolation: isolate;
}

/* =========================================================
   2. AMBIENT LIGHT
========================================================= */

body.sk-inner-page::before {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    top: -220px;
    left: -180px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(168, 92, 255, 0.18), transparent 68% );
    filter: blur(45px);
    pointer-events: none;
    z-index: -2;
    animation: skAmbientOne 12s ease-in-out infinite alternate;
}

body.sk-inner-page::after {
    content: "";
    position: fixed;
    width: 480px;
    height: 480px;
    right: -190px;
    bottom: -180px;
    border-radius: 50%;
    background: radial-gradient( circle, rgba(255, 45, 90, 0.12), transparent 68% );
    filter: blur(55px);
    pointer-events: none;
    z-index: -2;
    animation: skAmbientTwo 15s ease-in-out infinite alternate;
}

/* =========================================================
   3. MAIN PAGE DEPTH
========================================================= */

body.sk-inner-page main {
    position: relative;
    z-index: 1;
    padding-bottom: 80px;
}

/* =========================================================
   4. PREMIUM HERO CARD
========================================================= */

body.sk-inner-page .hero {
    width: min( 1440px, calc(100% - 64px) );
    margin: 78px auto 0;
    min-height: min(820px, 88vh);
    border-radius: 36px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    overflow: hidden;
    box-shadow: 0 35px 120px rgba(0, 0, 0, 0.48), 0 10px 40px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 120px rgba(168, 85, 247, 0.055);
    isolation: isolate;
    animation: skHeroEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* =========================================================
   5. HERO BACKGROUND MOTION
========================================================= */

body.sk-inner-page .hero-background {
    transform: scale(1.045);
    animation: skHeroBackground 18s ease-in-out infinite alternate;
    will-change: transform;
}

/* =========================================================
   6. HERO OVERLAY
========================================================= */

body.sk-inner-page .hero-overlay {
    background: radial-gradient( circle at 45% 35%, rgba(180, 90, 255, 0.13), transparent 34% ), linear-gradient( 90deg, rgba(5, 5, 9, 0.94) 0%, rgba(5, 5, 9, 0.78) 28%, rgba(5, 5, 9, 0.38) 58%, rgba(5, 5, 9, 0.70) 100% ), linear-gradient( to bottom, rgba(5, 5, 9, 0.05), transparent 52%, rgba(5, 5, 9, 0.96) 100% );
}

/* =========================================================
   7. HERO INNER GLASS LAYER
========================================================= */

body.sk-inner-page .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.055), transparent 25%, transparent 70%, rgba(255, 255, 255, 0.025) );
    opacity: 0.8;
}

/* =========================================================
   8. HERO CONTENT ABOVE EFFECTS
========================================================= */

body.sk-inner-page .hero-content {
    position: relative;
    z-index: 3;
}

/* =========================================================
   9. PROFILE GLOW
========================================================= */

body.sk-inner-page .hero-profile-ring {
    box-shadow: 0 0 25px rgba(168, 85, 247, 0.40), 0 0 70px rgba(168, 85, 247, 0.18);
    animation: skProfilePulse 5s ease-in-out infinite;
}

/* =========================================================
   10. HERO BRAND
========================================================= */

body.sk-inner-page .hero-brand {
    text-shadow: 0 3px 20px rgba(0, 0, 0, 0.75), 0 0 30px rgba(168, 85, 247, 0.12);
}

/* =========================================================
   11. HERO TITLE
========================================================= */

body.sk-inner-page .hero h1 {
    text-shadow: 0 8px 40px rgba(0, 0, 0, 0.65), 0 0 80px rgba(168, 85, 247, 0.08);
}

/* =========================================================
   12. BUTTONS
========================================================= */

body.sk-inner-page .button {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.18);
}

body.sk-inner-page .button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 80%;
    height: 100%;
    background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.16), transparent );
    transform: skewX(-20deg);
    transition: left 0.7s ease;
    pointer-events: none;
}

body.sk-inner-page .button:hover::after {
    left: 140%;
}

body.sk-inner-page .button:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.30);
}

/* =========================================================
   13. HERO STATS PANEL
========================================================= */

body.sk-inner-page .hero-stats-panel {
    background: linear-gradient( 145deg, rgba(25, 18, 35, 0.72), rgba(8, 8, 13, 0.60) );
    border-color: rgba(255, 255, 255, 0.11);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 80px rgba(168, 85, 247, 0.07);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
}

/* =========================================================
   14. SEARCH GLASS
========================================================= */

body.sk-inner-page .library-search-box {
    background: rgba(5, 5, 9, 0.46);
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

body.sk-inner-page .library-search-box:focus-within {
    background: rgba(12, 10, 18, 0.58);
    border-color: rgba(192, 132, 252, 0.34);
    box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.06), 0 15px 50px rgba(0, 0, 0, 0.30), 0 0 40px rgba(168, 85, 247, 0.08);
}

/* =========================================================
   15. CONTENT SECTIONS
========================================================= */

body.sk-inner-page .content-section {
    position: relative;
    z-index: 2;
}

/* =========================================================
   16. PREMIUM CARD LANGUAGE
========================================================= */

body.sk-inner-page .show-card,
body.sk-inner-page .movie-card,
body.sk-inner-page .playlist-card,
body.sk-inner-page .stat-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.4s ease, box-shadow 0.4s ease;
}

/* =========================================================
   17. REDUCE THE "FLAT PAGE" FEEL
========================================================= */

body.sk-inner-page .section-header,
body.sk-inner-page .section-title {
    position: relative;
}

body.sk-inner-page .section-header::after,
body.sk-inner-page .section-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin-top: 12px;
    border-radius: 999px;
    background: linear-gradient( 90deg, #a855f7, #ec4899 );
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
}

/* =========================================================
   18. SUBTLE SCROLL REVEAL
========================================================= */

body.sk-inner-page .content-section {
    animation: skSectionEnter 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* =========================================================
   19. HERO EDGE HIGHLIGHT
========================================================= */

body.sk-inner-page .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    border: 1px solid rgba(255, 255, 255, 0.035);
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.04), transparent 18%, transparent 82%, rgba(255, 255, 255, 0.025) );
    mix-blend-mode: screen;
}

/* =========================================================
   20. ANIMATIONS
========================================================= */

@keyframes skHeroEnter {
    from {
        opacity: 0;
        transform: translateY(22px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

}

@keyframes skHeroBackground {
    from {
        transform: scale(1.045) translate3d(0, 0, 0);
    }

    to {
        transform: scale(1.085) translate3d(-8px, -5px, 0);
    }

}

@keyframes skAmbientOne {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.65;
    }

    to {
        transform: translate3d(80px, 45px, 0) scale(1.12);
        opacity: 1;
    }

}

@keyframes skAmbientTwo {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.55;
    }

    to {
        transform: translate3d(-60px, -40px, 0) scale(1.15);
        opacity: 0.9;
    }

}

@keyframes skProfilePulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }

}

@keyframes skSectionEnter {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================================
   21. ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    body.sk-inner-page::before,
    body.sk-inner-page::after,
    body.sk-inner-page .hero,
    body.sk-inner-page .hero-background,
    body.sk-inner-page .hero-profile-ring,
    body.sk-inner-page .content-section {
        animation: none !important;
    }

}

/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 900px) {
    body.sk-inner-page .hero {
        width: calc(100% - 28px);
        margin-top: 82px;
        border-radius: 26px;
        min-height: 760px;
    }

}

@media (max-width: 600px) {
    body.sk-inner-page .hero {
        width: calc(100% - 20px);
        margin-top: 76px;
        border-radius: 22px;
    }

    body.sk-inner-page .hero-content {
        width: calc(100% - 36px);
    }

    body.sk-inner-page .hero h1 {
        font-size: clamp(44px, 13vw, 68px);
    }

    body.sk-inner-page .hero-stats-panel {
        border-radius: 18px;
    }

}