/**
 * ============================================================
 * SUNOSUNAO — CINEMATIC COMPONENT SYSTEM
 * Design Version: V2.0
 * File: public_html/assets/css/components.css
 * ============================================================
 *
 * PURPOSE
 * -------
 * Premium reusable visual components for the new SunoSunao
 * cinematic experience.
 *
 * RULES
 * -----
 * - No story-specific names
 * - No hardcoded story content
 * - No business logic
 * - No backend assumptions
 * - No legacy SunoSunao UI
 * - Content must remain data-driven
 * - Motion must remain subtle and intentional
 *
 * VISUAL DIRECTION
 * ----------------
 * Cinema × Editorial × Audio × Immersive
 *
 * ============================================================
 */


/* ============================================================
   01. COMPONENT TOKENS
   ============================================================ */

:root {

    --c-surface-0:
        rgba(255, 255, 255, 0.018);

    --c-surface-1:
        rgba(255, 255, 255, 0.032);

    --c-surface-2:
        rgba(255, 255, 255, 0.055);

    --c-surface-3:
        rgba(255, 255, 255, 0.085);

    --c-border-subtle:
        rgba(255, 255, 255, 0.065);

    --c-border:
        rgba(255, 255, 255, 0.105);

    --c-border-strong:
        rgba(255, 255, 255, 0.17);

    --c-text-primary:
        rgba(255, 255, 255, 0.96);

    --c-text-secondary:
        rgba(255, 255, 255, 0.70);

    --c-text-muted:
        rgba(255, 255, 255, 0.46);

    --c-text-faint:
        rgba(255, 255, 255, 0.30);

    --c-accent:
        #ff202b;

    --c-accent-soft:
        rgba(255, 32, 43, 0.12);

    --c-accent-border:
        rgba(255, 32, 43, 0.32);

    --c-gold:
        #ffc857;

    --c-gold-soft:
        rgba(255, 200, 87, 0.10);

    --c-gold-border:
        rgba(255, 200, 87, 0.28);

    --c-shadow-soft:
        0 1rem 3rem rgba(0, 0, 0, 0.22);

    --c-shadow-deep:
        0 2rem 5rem rgba(0, 0, 0, 0.42);

    --c-shadow-accent:
        0 1rem 3rem rgba(255, 32, 43, 0.14);

    --c-radius-xs:
        0.4rem;

    --c-radius-sm:
        0.65rem;

    --c-radius-md:
        0.9rem;

    --c-radius-lg:
        1.2rem;

    --c-radius-xl:
        1.6rem;

    --c-radius-xxl:
        2rem;

    --c-transition-fast:
        180ms var(--ease-standard);

    --c-transition:
        320ms var(--ease-standard);

    --c-transition-slow:
        650ms var(--ease-standard);
}


/* ============================================================
   02. UNIVERSAL INTERACTION SURFACE
   ============================================================ */

.c-interactive {
    transition:
        transform var(--c-transition),
        background-color var(--c-transition),
        border-color var(--c-transition),
        box-shadow var(--c-transition),
        opacity var(--c-transition);
}

.c-interactive:hover {
    transform: translateY(-2px);
}


/* ============================================================
   03. PREMIUM BUTTON SYSTEM
   ============================================================ */

.button {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 3rem;

    padding:
        0.78rem
        1.2rem;

    gap: 0.6rem;

    color: var(--c-text-primary);

    background:
        rgba(255, 255, 255, 0.055);

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-sm);

    font: inherit;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform var(--c-transition-fast),
        background-color var(--c-transition-fast),
        border-color var(--c-transition-fast),
        box-shadow var(--c-transition-fast),
        color var(--c-transition-fast);
}

.button::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            transparent 25%,
            rgba(255, 255, 255, 0.08),
            transparent 75%
        );

    transform: translateX(-120%);

    transition:
        transform 650ms var(--ease-standard);

    pointer-events: none;
}

.button:hover::after {
    transform: translateX(120%);
}

.button:hover {
    transform: translateY(-1px);
    border-color: var(--c-border-strong);
}

.button:active {
    transform: translateY(0);
}

.button__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1.05rem;
    height: 1.05rem;

    flex: 0 0 auto;
}

.button__label {
    position: relative;
    z-index: 1;
}


/* PRIMARY */

.button--primary {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff202b,
            #d91620
        );

    border-color:
        rgba(255, 32, 43, 0.65);

    box-shadow:
        var(--c-shadow-accent);
}

.button--primary:hover {
    border-color: #ff202b;

    box-shadow:
        0 1.2rem 3rem rgba(255, 32, 43, 0.20);
}


/* SECONDARY */

.button--secondary {
    background:
        rgba(255, 255, 255, 0.07);
}

.button--secondary:hover {
    background:
        rgba(255, 255, 255, 0.105);
}


/* OUTLINE */

.button--outline {
    background:
        transparent;

    border-color:
        rgba(255, 255, 255, 0.18);
}

.button--outline:hover {
    background:
        rgba(255, 255, 255, 0.045);
}


/* GHOST */

.button--ghost {
    background:
        transparent;

    border-color:
        transparent;
}

.button--ghost:hover {
    background:
        rgba(255, 255, 255, 0.055);
}


/* GOLD */

.button--gold {
    color: #111;

    background:
        linear-gradient(
            135deg,
            #ffc857,
            #eeb642
        );

    border-color:
        rgba(255, 200, 87, 0.55);

    box-shadow:
        0 1rem 2.5rem rgba(255, 200, 87, 0.10);
}


/* SIZES */

.button--small {
    min-height: 2.45rem;
    padding: 0.6rem 0.9rem;

    font-size: 0.78rem;
}

.button--large {
    min-height: 3.4rem;
    padding: 0.9rem 1.45rem;

    font-size: 0.92rem;
}

.button--icon {
    width: 3rem;
    height: 3rem;

    min-height: 3rem;

    padding: 0;

    border-radius: 50%;
}


/* ============================================================
   04. CINEMATIC ICON BUTTON
   ============================================================ */

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 2.8rem;
    height: 2.8rem;

    color: var(--c-text-secondary);

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid transparent;

    border-radius:
        50%;

    cursor: pointer;

    transition:
        color var(--c-transition-fast),
        background-color var(--c-transition-fast),
        border-color var(--c-transition-fast),
        transform var(--c-transition-fast);
}

.icon-button:hover {
    color: #fff;

    background:
        rgba(255, 255, 255, 0.075);

    border-color:
        var(--c-border);

    transform:
        translateY(-1px);
}

.icon-button--quiet {
    background:
        transparent;
}

.icon-button--accent:hover {
    background:
        var(--c-accent-soft);

    border-color:
        var(--c-accent-border);
}


/* ============================================================
   05. SEARCH — CINEMATIC SEARCH FIELD
   ============================================================ */

.search-box {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
}

.search-box__icon {
    position: absolute;
    left: 1rem;

    z-index: 2;

    width: 1.1rem;
    height: 1.1rem;

    color:
        var(--c-text-muted);

    pointer-events: none;

    transition:
        color var(--c-transition-fast);
}

.search-box__input {
    width: 100%;

    min-height: 3.2rem;

    padding:
        0.8rem
        3rem
        0.8rem
        2.85rem;

    color: #fff;

    background:
        rgba(255, 255, 255, 0.035);

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-md);

    outline: none;

    font: inherit;

    transition:
        background-color var(--c-transition),
        border-color var(--c-transition),
        box-shadow var(--c-transition);
}

.search-box__input::placeholder {
    color:
        var(--c-text-faint);
}

.search-box__input:hover {
    border-color:
        var(--c-border-strong);
}

.search-box__input:focus {
    background:
        rgba(255, 255, 255, 0.055);

    border-color:
        rgba(255, 255, 255, 0.24);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.025);
}

.search-box:focus-within .search-box__icon {
    color:
        rgba(255, 255, 255, 0.78);
}

.search-box__clear {
    position: absolute;
    right: 0.45rem;
}


/* ============================================================
   06. CINEMATIC STORY CARD
   ============================================================ */

.story-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    background:
        #0d0d0d;

    border:
        1px solid var(--c-border-subtle);

    border-radius:
        var(--c-radius-lg);

    transition:
        transform var(--c-transition),
        border-color var(--c-transition),
        box-shadow var(--c-transition);
}

.story-card:hover {
    border-color:
        var(--c-border-strong);

    transform:
        translateY(-4px);

    box-shadow:
        var(--c-shadow-soft);
}

.story-card__media {
    position: relative;

    aspect-ratio: 16 / 10;

    overflow: hidden;

    background:
        #111;
}

.story-card__image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform 900ms var(--ease-standard),
        filter 900ms var(--ease-standard);
}

.story-card__media::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 45%,
            rgba(0, 0, 0, 0.52)
        );

    pointer-events: none;
}

.story-card:hover .story-card__image {
    transform:
        scale(1.045);
}

.story-card__body {
    padding:
        1rem 1rem 1.1rem;
}

.story-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.4rem;

    margin-bottom:
        0.55rem;

    color:
        var(--c-text-muted);

    font-size:
        0.7rem;
}

.story-card__title {
    margin: 0;

    color:
        var(--c-text-primary);

    font-size:
        1rem;

    font-weight:
        650;

    line-height:
        1.35;
}

.story-card__description {
    margin:
        0.55rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.8rem;

    line-height:
        1.6;
}

.story-card__footer {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        0.75rem;

    margin-top:
        1rem;
}


/* ============================================================
   07. CINEMATIC PORTRAIT CARD
   ============================================================ */

.story-card--portrait {
    border-color:
        transparent;
}

.story-card--portrait .story-card__media {
    aspect-ratio:
        4 / 5;
}

.story-card--portrait .story-card__body {
    position:
        absolute;

    left:
        0;

    right:
        0;

    bottom:
        0;

    z-index:
        2;

    padding:
        1.25rem;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.94),
            rgba(0, 0, 0, 0.42) 62%,
            transparent
        );
}

.story-card--portrait:hover {
    transform:
        translateY(-5px);
}


/* ============================================================
   08. STORY BADGES
   ============================================================ */

.story-badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        1.7rem;

    padding:
        0.35rem 0.6rem;

    color:
        var(--c-text-secondary);

    background:
        rgba(0, 0, 0, 0.42);

    border:
        1px solid rgba(255, 255, 255, 0.11);

    border-radius:
        999px;

    font-size:
        0.66rem;

    font-weight:
        650;

    line-height:
        1;

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);
}

.story-badge--accent {
    color:
        #fff;

    background:
        var(--c-accent-soft);

    border-color:
        var(--c-accent-border);
}

.story-badge--gold {
    color:
        var(--c-gold);

    background:
        var(--c-gold-soft);

    border-color:
        var(--c-gold-border);
}


/* ============================================================
   09. MOOD CARD
   ============================================================ */

.mood-card {
    position:
        relative;

    display:
        flex;

    align-items:
        flex-end;

    min-height:
        12rem;

    overflow:
        hidden;

    padding:
        1.25rem;

    background:
        #111;

    border:
        1px solid var(--c-border-subtle);

    border-radius:
        var(--c-radius-lg);

    text-decoration:
        none;

    transition:
        transform var(--c-transition),
        border-color var(--c-transition),
        box-shadow var(--c-transition);
}

.mood-card::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    z-index:
        1;

    background:
        linear-gradient(
            to top,
            rgba(0, 0, 0, 0.92),
            rgba(0, 0, 0, 0.10) 75%
        );
}

.mood-card__image {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 900ms var(--ease-standard),
        filter 900ms var(--ease-standard);
}

.mood-card__content {
    position:
        relative;

    z-index:
        2;
}

.mood-card__label {
    margin:
        0;

    color:
        #fff;

    font-size:
        1rem;

    font-weight:
        650;
}

.mood-card__meta {
    margin:
        0.35rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.72rem;
}

.mood-card:hover {
    border-color:
        var(--c-border-strong);

    transform:
        translateY(-4px);

    box-shadow:
        var(--c-shadow-soft);
}

.mood-card:hover .mood-card__image {
    transform:
        scale(1.055);
}


/* ============================================================
   10. CONTINUE / RESUME CARD
   ============================================================ */

.continue-card {
    display:
        grid;

    grid-template-columns:
        minmax(10rem, 15rem)
        minmax(0, 1fr);

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.032);

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-xl);

    transition:
        background-color var(--c-transition),
        border-color var(--c-transition),
        transform var(--c-transition);
}

.continue-card:hover {
    background:
        rgba(255, 255, 255, 0.048);

    border-color:
        var(--c-border-strong);

    transform:
        translateY(-2px);
}

.continue-card__media {
    min-height:
        13rem;

    overflow:
        hidden;
}

.continue-card__image {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 850ms var(--ease-standard);
}

.continue-card:hover .continue-card__image {
    transform:
        scale(1.04);
}

.continue-card__body {
    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    min-width:
        0;

    padding:
        1.6rem;
}

.continue-card__eyebrow {
    margin:
        0 0 0.55rem;

    color:
        var(--c-text-muted);

    font-size:
        0.66rem;

    font-weight:
        700;

    letter-spacing:
        0.11em;

    text-transform:
        uppercase;
}

.continue-card__title {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(1.2rem, 2vw, 1.55rem);

    line-height:
        1.25;
}

.continue-card__description {
    max-width:
        42rem;

    margin:
        0.65rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.82rem;

    line-height:
        1.7;
}

.continue-card__actions {
    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.6rem;

    margin-top:
        1.15rem;
}


/* ============================================================
   11. AUDIO CINEMA PANEL
   ============================================================ */

.audio-card {
    position:
        relative;

    overflow:
        hidden;

    padding:
        1.5rem;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.065),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-xl);

    transition:
        transform var(--c-transition),
        border-color var(--c-transition),
        box-shadow var(--c-transition);
}

.audio-card::before {
    content:
        "";

    position:
        absolute;

    width:
        16rem;

    height:
        16rem;

    right:
        -8rem;

    bottom:
        -9rem;

    background:
        rgba(255, 32, 43, 0.08);

    border-radius:
        50%;

    filter:
        blur(55px);

    pointer-events:
        none;
}

.audio-card:hover {
    transform:
        translateY(-4px);

    border-color:
        var(--c-border-strong);

    box-shadow:
        var(--c-shadow-soft);
}

.audio-card__visual {
    position:
        relative;

    z-index:
        1;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        3.7rem;

    height:
        3.7rem;

    margin-bottom:
        1.25rem;

    color:
        #fff;

    background:
        var(--c-accent-soft);

    border:
        1px solid var(--c-accent-border);

    border-radius:
        1rem;
}

.audio-card__title {
    position:
        relative;

    z-index:
        1;

    margin:
        0;

    color:
        #fff;

    font-size:
        1.05rem;

    font-weight:
        650;
}

.audio-card__description {
    position:
        relative;

    z-index:
        1;

    margin:
        0.55rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.82rem;

    line-height:
        1.7;
}


/* ============================================================
   12. AUDIO PLAYER
   ============================================================ */

.audio-player {
    display:
        flex;

    align-items:
        center;

    gap:
        0.9rem;

    padding:
        0.8rem 1rem;

    background:
        rgba(8, 8, 8, 0.90);

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-lg);

    box-shadow:
        var(--c-shadow-deep);

    backdrop-filter:
        blur(20px);

    -webkit-backdrop-filter:
        blur(20px);
}

.audio-player__play {
    flex:
        0 0 auto;
}

.audio-player__main {
    min-width:
        0;

    flex:
        1;
}

.audio-player__title {
    overflow:
        hidden;

    color:
        var(--c-text-primary);

    font-size:
        0.8rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.audio-player__timeline {
    position:
        relative;

    width:
        100%;

    height:
        0.24rem;

    margin-top:
        0.65rem;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.11);

    border-radius:
        999px;
}

.audio-player__progress {
    width:
        var(--audio-progress, 0%);

    height:
        100%;

    background:
        linear-gradient(
            90deg,
            #ff202b,
            #ff414a
        );

    border-radius:
        inherit;
}

.audio-player__controls {
    display:
        flex;

    align-items:
        center;

    gap:
        0.25rem;
}


/* ============================================================
   13. FEATURE PANEL
   ============================================================ */

.feature-panel {
    position:
        relative;

    overflow:
        hidden;

    padding:
        clamp(1.5rem, 4vw, 3.5rem);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.06),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-xxl);

    box-shadow:
        var(--c-shadow-soft);
}

.feature-panel::after {
    content:
        "";

    position:
        absolute;

    width:
        24rem;

    height:
        24rem;

    right:
        -10rem;

    top:
        -12rem;

    background:
        rgba(255, 32, 43, 0.065);

    border-radius:
        50%;

    filter:
        blur(80px);

    pointer-events:
        none;
}

.feature-panel__content {
    position:
        relative;

    z-index:
        1;
}


/* ============================================================
   14. CTA PANEL
   ============================================================ */

.cta {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        2.5rem;

    padding:
        clamp(1.5rem, 4vw, 3rem);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.055),
            rgba(255, 255, 255, 0.018)
        );

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-xxl);
}

.cta__content {
    min-width:
        0;
}

.cta__title {
    margin:
        0;

    color:
        #fff;

    font-size:
        clamp(1.4rem, 3vw, 2.15rem);

    line-height:
        1.2;
}

.cta__description {
    max-width:
        44rem;

    margin:
        0.7rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.86rem;

    line-height:
        1.75;
}

.cta__actions {
    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    flex:
        0 0 auto;
}


/* ============================================================
   15. CHIPS / FILTERS
   ============================================================ */

.chip-list {
    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        0.45rem;
}

.chip {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        2.15rem;

    padding:
        0.5rem 0.8rem;

    color:
        var(--c-text-secondary);

    background:
        rgba(255, 255, 255, 0.028);

    border:
        1px solid var(--c-border-subtle);

    border-radius:
        999px;

    font-size:
        0.74rem;

    font-weight:
        600;

    cursor:
        pointer;

    transition:
        background-color var(--c-transition-fast),
        color var(--c-transition-fast),
        border-color var(--c-transition-fast),
        transform var(--c-transition-fast);
}

.chip:hover {
    color:
        #fff;

    background:
        rgba(255, 255, 255, 0.065);

    border-color:
        var(--c-border);

    transform:
        translateY(-1px);
}

.chip.is-active {
    color:
        #fff;

    background:
        var(--c-accent-soft);

    border-color:
        var(--c-accent-border);
}


/* ============================================================
   16. AVATAR
   ============================================================ */

.avatar {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        2.55rem;

    height:
        2.55rem;

    overflow:
        hidden;

    color:
        #fff;

    background:
        rgba(255, 255, 255, 0.07);

    border:
        1px solid var(--c-border);

    border-radius:
        50%;
}

.avatar img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;
}

.avatar--small {
    width:
        2rem;

    height:
        2rem;
}

.avatar--large {
    width:
        4rem;

    height:
        4rem;
}


/* ============================================================
   17. DIVIDER
   ============================================================ */

.divider {
    width:
        100%;

    height:
        1px;

    background:
        rgba(255, 255, 255, 0.075);
}

.divider--soft {
    background:
        rgba(255, 255, 255, 0.04);
}


/* ============================================================
   18. MODAL
   ============================================================ */

.modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        var(--z-modal, 900);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        1.25rem;

    background:
        rgba(0, 0, 0, 0.76);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}

.modal__dialog {
    width:
        min(100%, 44rem);

    max-height:
        min(90vh, 54rem);

    overflow:
        auto;

    background:
        #0f0f0f;

    border:
        1px solid var(--c-border);

    border-radius:
        var(--c-radius-xl);

    box-shadow:
        0 2.5rem 7rem rgba(0, 0, 0, 0.55);
}

.modal__header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        1rem;

    padding:
        1.15rem 1.3rem;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.065);
}

.modal__title {
    margin:
        0;

    color:
        #fff;

    font-size:
        1rem;

    font-weight:
        650;
}

.modal__body {
    padding:
        1.3rem;
}

.modal__footer {
    display:
        flex;

    justify-content:
        flex-end;

    gap:
        0.6rem;

    padding:
        1rem 1.3rem;

    border-top:
        1px solid rgba(255, 255, 255, 0.065);
}


/* ============================================================
   19. EMPTY STATE
   ============================================================ */

.empty-state {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-direction:
        column;

    min-height:
        17rem;

    padding:
        2rem;

    text-align:
        center;

    background:
        rgba(255, 255, 255, 0.018);

    border:
        1px dashed rgba(255, 255, 255, 0.11);

    border-radius:
        var(--c-radius-xl);
}

.empty-state__icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        3.2rem;

    height:
        3.2rem;

    margin-bottom:
        1rem;

    color:
        var(--c-text-muted);

    background:
        rgba(255, 255, 255, 0.045);

    border-radius:
        50%;
}

.empty-state__title {
    margin:
        0;

    color:
        #fff;

    font-size:
        1rem;

    font-weight:
        650;
}

.empty-state__description {
    max-width:
        32rem;

    margin:
        0.5rem 0 0;

    color:
        var(--c-text-muted);

    font-size:
        0.8rem;

    line-height:
        1.65;
}


/* ============================================================
   20. LOADING SKELETON
   ============================================================ */

.skeleton {
    position:
        relative;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.055);

    border-radius:
        var(--c-radius-sm);
}

.skeleton::after {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.065),
            transparent
        );

    transform:
        translateX(-120%);

    animation:
        skeleton-shimmer 1.7s infinite;
}

.skeleton--media {
    aspect-ratio:
        16 / 10;
}

.skeleton--text {
    width:
        70%;

    height:
        0.8rem;
}

.skeleton--text-short {
    width:
        42%;

    height:
        0.7rem;
}

@keyframes skeleton-shimmer {

    to {
        transform:
            translateX(120%);
    }
}


/* ============================================================
   21. HORIZONTAL CINEMATIC RAIL
   ============================================================ */

.horizontal-scroll {
    display:
        flex;

    gap:
        1rem;

    overflow-x:
        auto;

    overflow-y:
        hidden;

    padding-bottom:
        0.55rem;

    scroll-snap-type:
        x proximity;

    scrollbar-width:
        none;
}

.horizontal-scroll::-webkit-scrollbar {
    display:
        none;
}

.horizontal-scroll > * {
    flex:
        0 0 auto;

    scroll-snap-align:
        start;
}


/* ============================================================
   22. RESPONSIVE COMPONENTS
   ============================================================ */

@media (max-width: 900px) {

    .cta {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            1.5rem;
    }

    .cta__actions {
        width:
            100%;
    }

    .continue-card {
        grid-template-columns:
            minmax(8rem, 12rem)
            minmax(0, 1fr);
    }
}


@media (max-width: 680px) {

    .button--large {
        min-height:
            3.05rem;
    }

    .story-card__body {
        padding:
            0.9rem;
    }

    .continue-card {
        grid-template-columns:
            1fr;
    }

    .continue-card__media {
        min-height:
            12rem;

        aspect-ratio:
            16 / 9;
    }

    .continue-card__body {
        padding:
            1.2rem;
    }

    .audio-player {
        gap:
            0.6rem;

        padding:
            0.7rem;
    }

    .cta__actions {
        align-items:
            stretch;

        flex-direction:
            column;
    }

    .cta__actions .button {
        width:
            100%;
    }

    .modal {
        align-items:
            flex-end;

        padding:
            0;
    }

    .modal__dialog {
        width:
            100%;

        max-height:
            92vh;

        border-radius:
            1.3rem 1.3rem 0 0;
    }
}


@media (max-width: 420px) {

    .button {
        min-height:
            2.75rem;

        padding-inline:
            0.9rem;
    }

    .story-card--portrait .story-card__media {
        aspect-ratio:
            3 / 4;
    }

    .mood-card {
        min-height:
            9.5rem;
    }

    .audio-card {
        padding:
            1.15rem;
    }
}


/* ============================================================
   23. REDUCED MOTION
   ============================================================ */

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

    .button,
    .icon-button,
    .story-card,
    .story-card__image,
    .mood-card,
    .mood-card__image,
    .continue-card,
    .continue-card__image,
    .audio-card,
    .chip {

        transition:
            none;
    }

    .button::after {
        display:
            none;
    }

    .skeleton::after {
        animation:
            none;
    }
}


/* ============================================================
   END — SUNOSUNAO COMPONENT SYSTEM V2.0
   ============================================================ */