/* ==========================================================
   FONTS
========================================================== */

@font-face {
    font-family: 'welcomefont';
    src: url('Fonts/Chopin-Light/Chopin-Light.ttf');
}

@font-face {
    font-family: 'desfont';
    src: url('Fonts/Chopin-Light/Chopin-Light.ttf');
}

@font-face {
    font-family: 'handwrite';
    src: url(Fonts/original_salmon/Original\ Salmon.otf);
}

/* ==========================================================
   COLOR SYSTEM — Design Tokens
   Three-tone hierarchy for refined visual balance:
     --gold   : Primary accent (buttons, active, key highlights)
     --cream  : Warm white (headings, main text, cards)
     --frost  : Cold white (borders, labels, secondary, icons)
   ========================================================== */

:root {
    /* Primary Gold — accent, CTAs, active states */
    --gold:       #c9a96e;
    --gold-hover: #d4b87a;
    --gold-dim:   rgba(201,169,110,.5);
    --gold-subtle: rgba(201,169,110,.12);
    --gold-faint: rgba(201,169,110,.06);

    /* Warm White — headings, important text, soft highlights */
    --cream:       #f0e6d0;
    --cream-90:    rgba(240,230,208,.9);
    --cream-70:    rgba(240,230,208,.7);
    --cream-50:    rgba(240,230,208,.5);
    --cream-35:    rgba(240,230,208,.35);
    --cream-20:    rgba(240,230,208,.2);
    --cream-14:    rgba(240,230,208,.14);
    --cream-12:    rgba(240,230,208,.12);
    --cream-10:    rgba(240,230,208,.1);
    --cream-08:    rgba(240,230,208,.08);
    --cream-06:    rgba(240,230,208,.06);
    --cream-05:    rgba(240,230,208,.05);
    --cream-04:    rgba(240,230,208,.04);
    --cream-03:    rgba(240,230,208,.03);
    --cream-02:    rgba(240,230,208,.02);

    /* Cold White — borders, labels, secondary text, icons */
    --frost:       #d8d0c4;
    --frost-80:    rgba(216,208,196,.8);
    --frost-70:    rgba(216,208,196,.7);
    --frost-65:    rgba(216,208,196,.65);
    --frost-60:    rgba(216,208,196,.6);
    --frost-50:    rgba(216,208,196,.5);
    --frost-45:    rgba(216,208,196,.45);
    --frost-40:    rgba(216,208,196,.4);
    --frost-35:    rgba(216,208,196,.35);
    --frost-30:    rgba(216,208,196,.3);
    --frost-25:    rgba(216,208,196,.25);
    --frost-20:    rgba(216,208,196,.2);
    --frost-15:    rgba(216,208,196,.15);
    --frost-12:    rgba(216,208,196,.12);
    --frost-08:    rgba(216,208,196,.08);
    --frost-06:    rgba(216,208,196,.06);
    --frost-04:    rgba(216,208,196,.04);

    /* Semantic aliases */
    --text-primary:   var(--frost);
    --text-secondary: var(--frost-65);
    --text-muted:     var(--frost-50);
    --text-faint:     var(--frost-35);
    --border-primary: var(--frost-15);
    --border-subtle:  var(--frost-08);
    --border-accent:  var(--gold-dim);
    --bg-card:        var(--cream-03);
    --bg-card-hover:  var(--cream-06);
    --bg-input:       var(--cream-04);
}

/* ==========================================================
   GLOBAL RESET & BASE
========================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--frost-50) #252422;
}

body {
    margin: 0;
    padding: 0;
}

img {
    max-width: 100%;
    display: block;
}

/* ==========================================================
   SCROLLBAR  (Chrome / Edge / Opera)
========================================================== */

::-webkit-scrollbar { width: 12px; }

::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #1b1a18, #252422);
    border-left: 1px solid var(--frost-04);
}

::-webkit-scrollbar-thumb {
    border-radius: 999px;
    border: 2px solid transparent;
    background: linear-gradient(180deg,
        var(--cream-12),
        var(--cream-70),
        var(--cream-12)
    );
    background-size: 100% 300%;
    background-clip: padding-box;
    box-shadow: 0 0 10px var(--gold-subtle);
    animation: scrollbarGlow 5s linear infinite;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg,
        var(--cream-90),
        var(--cream-35)
    );
    box-shadow: 0 0 18px var(--gold-dim), 0 0 30px var(--gold-subtle);
}

@keyframes scrollbarGlow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 300%; }
}

/* ==========================================================
   ──────────────── WELCOME PAGE ────────────────
========================================================== */

#welcome_page_body {
    margin: 0;
    display: flex;
    overflow: hidden;
    min-height: 100vh;
}

/* ——— Loading Screen ——— */

#loading_screen {
    position: fixed;
    inset: 0;
    background: #0f0f0f;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999;
    overflow: hidden;
    animation: screenFade 2.4s forwards;
}

.cinematic_bar {
    position: absolute;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(0,0,0,.85);
    backdrop-filter: blur(6px);
    z-index: 5;
    pointer-events: none;
}

.cinematic_bar.top    { top: 0;    animation: barTop    2.6s ease forwards; }
.cinematic_bar.bottom { bottom: 0; animation: barBottom 2.6s ease forwards; }

@keyframes barTop {
    0%   { transform: translateY(-100%); }
    20%  { transform: translateY(0); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

@keyframes barBottom {
    0%   { transform: translateY(100%); }
    20%  { transform: translateY(0); }
    80%  { transform: translateY(0); }
    100% { transform: translateY(100%); }
}

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

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(236,226,206,.8);
    box-shadow: 0 0 10px rgba(236,226,206,.5);
    animation: floatDust linear infinite;
}

.particle:nth-child(odd)  { width: 2px; height: 2px; }
.particle:nth-child(even) { width: 5px; height: 5px; }

.particle:nth-child(1) { left: 10%; top: 90%; animation-duration: 12s; }
.particle:nth-child(2) { left: 25%; top: 95%; animation-duration: 15s; }
.particle:nth-child(3) { left: 40%; top: 92%; animation-duration: 10s; }
.particle:nth-child(4) { left: 55%; top: 98%; animation-duration: 14s; }
.particle:nth-child(5) { left: 70%; top: 94%; animation-duration: 13s; }
.particle:nth-child(6) { left: 80%; top: 90%; animation-duration: 11s; }
.particle:nth-child(7) { left: 90%; top: 96%; animation-duration: 16s; }
.particle:nth-child(8) { left: 50%; top:100%; animation-duration: 18s; }

#noise {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.015;
    z-index: 1;
    background-image: repeating-radial-gradient(circle at 0 0, transparent 0, #ffffff 1px, transparent 2px);
    background-size: 6px 6px;
    animation: noiseMove .25s steps(4) infinite;
}

#loading_logo {
    position: relative;
    z-index: 2;
    font-family: 'welcomefont';
    font-size: clamp(60px, 12vw, 120px);
    letter-spacing: 12px;
    color: rgb(238,225,198);
    text-shadow: 0 0 42px rgb(238,225,198);
    transform-origin: center;
    animation: logoZoom 5.5s cubic-bezier(.16,.84,.24,1) forwards;
}

#loading_logo span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px);
    animation: revealLetter .35s forwards;
}

#loading_logo span:nth-child(1) { animation-delay: 0s; }
#loading_logo span:nth-child(2) { animation-delay: .08s; }
#loading_logo span:nth-child(3) { animation-delay: .16s; }
#loading_logo span:nth-child(4) { animation-delay: .24s; }
#loading_logo span:nth-child(5) { animation-delay: .32s; }
#loading_logo span:nth-child(6) { animation-delay: .40s; }

@keyframes floatDust {
    0%   { transform: translateY(0) translateX(0);        opacity: 0; }
    10%  { opacity: .8; }
    90%  { opacity: .8; }
    100% { transform: translateY(-110vh) translateX(40px); opacity: 0; }
}

@keyframes noiseMove {
    0%   { transform: translate(0,0); }
    25%  { transform: translate(-2px,1px); }
    50%  { transform: translate(2px,-1px); }
    75%  { transform: translate(-1px,-2px); }
    100% { transform: translate(1px,2px); }
}

@keyframes revealLetter {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes logoZoom {
    0%   { transform: scale(.8); }
    35%  { transform: scale(1); }
    100% { opacity: 0; transform: scale(35); }
}

@keyframes screenFade {
    0%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ——— Welcome Header Background ——— */

#welcome_header {
    width: 100%;
    height: 97%;
    position: absolute;
    background-image: url('pictures/headerpic.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
    filter: blur(6px);
    outline: 40px solid black;
}

#welcome_header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(0,0,0,.8));
}

/* ——— MORENA Title ——— */

#morena_div {
    color: rgb(238,225,198);
    font-size: clamp(60px, 12vw, 180px);
    letter-spacing: 8px;
    font-family: 'welcomefont';
    font-weight: 1000;
    z-index: 10000;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    transform: translate(-50%, -50%);
    top: 25%;
    left: 50%;
    animation: fadeUp 1.2s ease;
    cursor: default;
    text-align: center;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translate(-50%, -30%); }
    to   { opacity: 1; transform: translate(-50%, -50%); }
}

/* ——— Description Banner ——— */

#welcome_description {
    color: ghostwhite;
    font-size: clamp(14px, 2vw, 20px);
    opacity: 82%;
    font-family: 'desfont';
    font-weight: bolder;
    align-items: center;
    text-align: center;
    padding: 20px;
    z-index: 10000;
    position: absolute;
    display: flex;
    justify-content: center;
    align-content: center;
    align-self: center;
    transform: translate(-50%, -50%);
    top: 78%;
    left: 50%;
    border-radius: 23px;
    width: 90%;
    max-width: 700px;
}

#welcome_description::selection {
    color: black;
    background-color: rgb(236,225,208);
}

.reveal_line {
    flex: 1;
    height: 1px;
    background: rgba(255,255,255,.25);
    margin: 0 12px;
    min-width: 20px;
}

/* ——— CTA Button ——— */

#welcome_btn_link {
    color: rgb(85,85,85);
    text-decoration: none;
    font-family: 'welcomefont';
}

#welcome_button {
    position: absolute;
    width: clamp(140px, 20vw, 200px);
    height: 55px;
    z-index: 100;
    overflow: hidden;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(236,226,206,.18);
    color: rgb(236,226,206);
    font-size: 22px;
    font-family: 'welcomefont';
    font-weight: 600;
    border-radius: 18px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    cursor: pointer;
    transition: transform .3s ease, box-shadow .3s ease, letter-spacing .3s ease;
}

#welcome_button:hover {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(236,226,206,.08);
    border: 1px solid rgba(236,226,206,.35);
    box-shadow: 0 0 30px rgba(236,226,206,.15), 0 0 80px rgba(236,226,206,.08);
    letter-spacing: 2px;
}

#welcome_button::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(236,226,206,.25), transparent 60%);
    top:  var(--glow-y, 50%);
    left: var(--glow-x, 50%);
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .3s ease;
    pointer-events: none;
}

#welcome_button:hover::after { opacity: 1; }
#welcome_button:active { transform: translate(-50%, -50%) scale(0.96); }

/* ——— Dropdown Nav ——— */

/* Wrapper is now the single positioning anchor for BOTH the button and
   the menu beneath it, so they always share the same left edge no
   matter the viewport size. */
.wel_dropdown {
    position: fixed;
    top: 20px;
    left: 20px;
    display: inline-block;
    z-index: 10000;
    padding: 16px;
}

/* Inner anchor: padding lives here instead of on .wel_dropdown so that
   "top:100%/left:0" on the menu lines it up exactly under the button,
   regardless of the wrapper's own padding box. */
.wel_dropdown_inner {
    position: relative;
    display: inline-block;
}

.wel_dropbtn {
    width: 60px;
    height: 60px;
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    position: relative;
    transition: all .4s ease;
}

.line {
    position: absolute;
    left: 50%;
    width: 28px;
    height: 4px;
    background: white;
    border-radius: 4px;
    transition: all .4s ease-in-out;
}

.line1 { top: 22px; transform: translateX(-50%); }
.line2 { top: 34px; transform: translateX(-50%); }

.wel_dropbtn.active .line1 { top: 29px; transform: translateX(-50%) rotate(45deg); }
.wel_dropbtn.active .line2 { top: 29px; transform: translateX(-50%) rotate(-45deg); }

.wel_dropdown-content {
    font-family: 'welcomefont';
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 10px;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    min-width: 160px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .3s ease, transform .3s ease, visibility .3s ease;
    border-radius: 10px;
    overflow: hidden;
}

.wel_dropdown-content a {
    color: rgb(236,226,206);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    opacity: 0;
    transform: translateY(-15px);
    transition: opacity .4s ease, transform .4s ease, background .15s ease;
}

.wel_dropdown-content a:hover {
    background: rgba(255,255,255,.13);
    color: #fff;
}

.wel_dropdown-content.wel_show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.wel_dropdown-content.wel_show a                 { opacity: 1; transform: translateY(0); }
.wel_dropdown-content.wel_show a:nth-child(1)    { transition-delay: .05s; }
.wel_dropdown-content.wel_show a:nth-child(2)    { transition-delay: .15s; }
.wel_dropdown-content.wel_show a:nth-child(3)    { transition-delay: .25s; }

/* ——— Welcome Footer ——— */

#welcome_footer {
    position: fixed;
    bottom: 15px;
    width: 100%;
    text-align: center;
    color: rgba(236,226,206,.55);
    font-family: 'desfont';
    font-size: 12px;
    letter-spacing: 2px;
    z-index: 10000;
}

/* ——— Mouse Glow ——— */

#mouse_glow {
    position: fixed;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(236,226,206,.12) 0%, rgba(236,226,206,.05) 40%, transparent 75%);
    filter: blur(40px);
    transform: translate(-50%, -50%);
    z-index: 5;
}

/* ——— Welcome Responsive ——— */

@media (max-width: 600px) {
    #morena_div           { letter-spacing: 4px; }
    #welcome_description  { font-size: 13px; padding: 12px; }
    .reveal_line          { display: none; }
    .wel_dropbtn          { width: 48px; height: 48px; }
    .line                 { width: 22px; }

    /* Shrink the open menu so it feels proportional to the smaller
       button instead of towering over it. */
    .wel_dropdown-content {
        min-width: 130px;
        margin-top: 8px;
        border-radius: 8px;
    }

    .wel_dropdown-content a {
        padding: 9px 12px;
        font-size: 13px;
    }

    /* ——— Loading logo mobile fix ———
       Reduce font-size and letter-spacing so "NARGES" never
       overflows the viewport on narrow phones. */
    #loading_logo {
        font-size: clamp(36px, 11vw, 72px);
        letter-spacing: clamp(4px, 2vw, 10px);
    }
}

/* ==========================================================
   ──────────────── MAIN PAGE ────────────────
========================================================== */

#mainpage_body {
    background: #0d0d0e url(/pictures/mainpage-back.jpg) center/cover no-repeat;
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

/* ——— Canvas ——— */

#bg-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Ensure content sits above canvas */
#mainpage_header,
.mainpage_form,
#mainpage_footer {
    position: relative;
    z-index: 2;
}

/* ——— Header ——— */

#mainpage_header {
    display: block;
    position: relative;
    height: 100vh;
    overflow: hidden;
    background: #000;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
}

.mainapage_head_pic {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url(/pictures/mainhead.png);
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    filter: contrast(1.05) saturate(1.1);
    transform: scale(1.02);
    will-change: transform;
}

.mainpage_head_title {
    position: absolute;
    z-index: 1000;
    width: 14%;
    min-width: 200px;
    font-size: clamp(32px, 5.5vw, 82px);
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    color: #000;
    font-family: 'Tanker', sans-serif;
    border-left: 4px solid var(--border-primary);
    padding-left: 1%;
    text-rendering: optimizeLegibility;
    margin: 0;
}

#mainpage-title-mark {
    background: var(--cream-35);
    background-color: var(--text-primary);
    padding: 2px 6px;
    backdrop-filter: blur(2px);
}

#mainpage-title-mark::selection {
    color: var(--text-primary);
    background-color: #1f1e1e;
}

#mainpage_scroll_txt {
    position: absolute;
    z-index: 1000;
    left: 50%;
    top: 1%;
    transform: translate(-50%, 0);
    color: #7f7979;
    font-size: clamp(13px, 1.5vw, 18px);
    font-weight: 700;
    font-family: 'Chillax', sans-serif;
    text-align: center;
    animation: scrollHint 2.2s ease-in-out infinite;
}

.scroll_arrow {
    text-align: center;
    font-size: 26px;
    animation: arrowBounce 1.4s ease-in-out infinite;
}

@keyframes scrollHint {
    0%, 100% { opacity: .55; }
    50%       { opacity: 1; transform: translate(-50%, 10px); }
}

@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(10px); }
}

/* ——— Side Nav Menu ——— */

.mainpage_side_menu {
    position: absolute;
    right: 6%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.mainpage_menu_item {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    cursor: pointer;
    position: relative;
}

.mainpage_icon {
    color: #888;
    display: flex;
    align-items: center;
    transition: transform .35s ease, color .35s ease;
}

.mainpage_icon svg {
    width: clamp(28px, 3vw, 40px);
    height: clamp(28px, 3vw, 40px);
}

.mainpage_text {
    font-family: 'Chillax', sans-serif;
    font-size: clamp(14px, 1.5vw, 20px);
    color: var(--text-primary);
    opacity: 0;
    transform: translateX(10px);
    margin-right: 10px;
    transition: all .35s ease;
    white-space: nowrap;
}

.mainpage_menu_item:hover .mainpage_icon { transform: translateX(10px); color: var(--text-primary); }
.mainpage_menu_item:hover .mainpage_text { opacity: 1; transform: translateX(0); }

.mainpage_menu_item::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 2px;
    height: 70%;
    background: var(--cream);
    transition: transform .25s ease, opacity .25s ease;
    opacity: 0;
}

.mainpage_menu_item:hover::after,
.mainpage_menu_item.active::after {
    transform: translateY(-50%) scaleY(1);
    opacity: 1;
}

/* ——— Memory Panel ——— */

.memory_panel {
    position: relative;
    width: 90%;
    max-width: 1100px;
    margin: 5px auto 60px;
    font-family: "welcomefont";
    padding: 25px 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--frost-12);
    backdrop-filter: blur(16px);
    border-radius: 24px;
    box-shadow: 0 15px 50px rgba(0,0,0,.35);
}

.user_section {
    display: flex;
    align-items: center;
    gap: 18px;
}

.user_avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-primary);
    flex-shrink: 0;
}

/* ——— Avatar Wrapper & Upload UI ——— */

.user_avatar_wrap {
    position: relative;
    width: 70px;
    height: 70px;
    flex-shrink: 0;
    cursor: pointer;
}

/* The avatar itself (img or SVG fallback) */
.user_avatar_wrap .user_avatar,
.user_avatar_wrap .user_avatar_svg {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--frost-65);
    flex-shrink: 0;
    display: block;
    transition: border-color .3s ease, filter .3s ease;
}

.user_avatar_wrap .user_avatar_svg {
    background: var(--cream-06);
}

/* Hover overlay */
.user_avatar_edit_overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(15,14,12,.62);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}

.user_avatar_edit_overlay svg {
    display: block;
}

.user_avatar_edit_label {
    font-family: 'welcomefont', Georgia, serif;
    font-size: 8px;
    letter-spacing: .08em;
    color: var(--frost-80);
    text-transform: uppercase;
}

.user_avatar_wrap:hover .user_avatar_edit_overlay {
    opacity: 1;
}

.user_avatar_wrap:hover .user_avatar,
.user_avatar_wrap:hover .user_avatar_svg {
    border-color: var(--text-primary);
    filter: brightness(.75);
}

/* Hidden file input sitting behind the wrapper */
#avatar_file_input {
    display: none;
}

/* Avatar context menu (remove option) */
.avatar_ctx_menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    background: rgba(20,19,17,.92);
    border: 1px solid var(--frost-15);
    border-radius: 10px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    padding: 4px 0;
    min-width: 128px;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

.avatar_ctx_menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.avatar_ctx_item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 14px;
    background: none;
    border: none;
    color: var(--frost-80);
    font-family: 'welcomefont', Georgia, serif;
    font-size: 12px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    text-align: left;
}

.avatar_ctx_item:hover {
    background: var(--cream-08);
    color: var(--text-primary);
}

.avatar_ctx_item.danger {
    color: rgba(232,93,122,.65);
}

.avatar_ctx_item.danger:hover {
    background: rgba(232,93,122,.08);
    color: rgba(232,93,122,.9);
}

.avatar_ctx_item svg {
    flex-shrink: 0;
    opacity: .75;
}

/* Upload progress ring on the avatar */
.avatar_progress_ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
}

.avatar_progress_ring.uploading {
    opacity: 1;
    animation: avatarRingSpin 1s linear infinite;
    background: conic-gradient(var(--cream) 0%, transparent 40%);
    border-radius: 50%;
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

@keyframes avatarRingSpin {
    to { transform: rotate(360deg); }
}

/* Avatar load-in pop */
@keyframes avatarPop {
    0%   { transform: scale(.7); opacity: 0; }
    65%  { transform: scale(1.08); }
    100% { transform: scale(1); opacity: 1; }
}

.user_avatar_wrap .user_avatar.avatar--loaded,
.user_avatar_wrap .user_avatar_svg.avatar--loaded {
    animation: avatarPop .4s cubic-bezier(.34,1.56,.64,1) forwards;
}

.user_label {
    color: #cec9c9;
    font-size: 13px;
    display: block;
}

.user_info h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 24px;
}

.memory_counter { text-align: right; }

.counter_label {
    display: block;
    color: #cccaca;
    margin-bottom: 8px;
}

#daysCounter {
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    color: var(--text-primary);
}

/* ——— Main Intro Section ——— */

.main_intro {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.intro_wrapper {
    width: 90%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
}

.intro_left {
    flex: 1;
    color: var(--text-primary);
    font-family: 'Chillax', sans-serif;
}

.intro_left h2 {
    font-size: clamp(32px, 5vw, 60px);
    margin-bottom: 20px;
}

.intro_left p {
    font-size: clamp(30px, 1.7vw, 25px);
    line-height: 1.8;
    color: #cfc7b3;
    margin-bottom: 15px;
    font-family: 'handwrite';
}

.intro_badges {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.intro_badges span {
    padding: 6px 12px;
    border: 1px solid var(--border-primary);
    border-radius: 20px;
    font-size: 12px;
    color: var(--text-primary);
    opacity: 0.8;
}

.intro_right {
    flex: 1;
    display: flex;
    justify-content: center;
}

.parallax_card {
    width: min(420px, 90vw);
    height: min(520px, 60vw);
    border-radius: 25px;
    background-image: url(/pictures/parallax-card.jpg);
    background-size: cover;
    background-position: bottom;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease;
    box-shadow: 0 40px 100px rgba(0,0,0,.6);
}

.parallax_layer {
    position: absolute;
    inset: -20%;
    background-image: url(/pictures/intro.jpg);
    background-size: cover;
    background-position: center;
    transform: translateY(0px) scale(1.1);
    will-change: transform;
}

.parallax_card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, rgba(255,255,255,.25), transparent 35%, transparent 65%, rgba(255,255,255,.12));
    z-index: 2;
    opacity: 0;
    transition: opacity .3s ease;
}

.parallax_card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(0,0,0,.55));
}

/* ——— Scroll Reveal — defined at bottom of file with flicker fix ——— */

/* ——— Shooting Stars ——— */

#shooting-stars {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.shooting-star {
    position: absolute;
    height: 2px;
    border-radius: 999px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, var(--cream-90));
    filter: drop-shadow(0 0 8px var(--gold-dim)) drop-shadow(0 0 20px var(--gold-subtle));
    will-change: transform, opacity;
}

.star-particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--cream);
    pointer-events: none;
    animation: particleFade .8s linear forwards;
}

@keyframes particleFade {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: translateY(20px) scale(0); }
}

.sky-flash {
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(circle, var(--cream-04), transparent 60%);
    z-index: 1;
}

.flash-active { animation: flashSky 1.2s ease; }

@keyframes flashSky {
    0%   { opacity: 0; }
    30%  { opacity: 1; }
    100% { opacity: 0; }
}

/* ==========================================================
   MUSIC PANEL — PREMIUM GLASSMORPHISM REDESIGN
========================================================== */

.music_panel {
    position: fixed;
    top: 0;
    right: -420px;
    width: 360px;
    max-width: 100vw;
    height: 100dvh;
    background: rgba(18,16,14,.95);
    -webkit-backdrop-filter: blur(40px) saturate(1.4);
    backdrop-filter: blur(40px) saturate(1.4);
    border-left: 1px solid rgba(255,255,255,.06);
    box-shadow: -8px 0 40px rgba(0,0,0,.4);
    overflow: hidden;
    z-index: 99999;
    font-family: "welcomefont";
    transition: right .7s cubic-bezier(.22,1,.36,1);
    display: flex;
    flex-direction: column;
    padding: 28px 24px 24px;
    gap: 0;
}

.music_panel.active { right: 0; }

/* ——— Dynamic Background ——— */

.music_dynamic_bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, var(--dyn-color, transparent) 0%, transparent 70%);
    -webkit-filter: blur(80px);
    filter: blur(80px);
    opacity: 0.3;
    transition: opacity 1s ease;
    z-index: 0;
    pointer-events: none;
}

.music_dynamic_bg.active { opacity: 0.5; }

/* ——— Lily Layer ——— */

.lily_layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

/* All panel content above lily layer */
.music_panel > *:not(.music_dynamic_bg):not(.lily_layer) {
    position: relative;
    z-index: 10;
}

/* ——— Panel Header ——— */

.music_header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.music_header_left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.music_vinyl_icon svg { opacity: .6; }

.music_header h2 {
    color: var(--text-primary);
    font-size: 22px;
    margin: 0;
    letter-spacing: 1px;
    font-weight: 600;
}

#close_music {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
    flex-shrink: 0;
}

#close_music:hover {
    background: var(--cream-12);
    transform: rotate(90deg);
    box-shadow: 0 0 12px var(--gold-dim);
}

/* ——— Track List ——— */

.music_list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: rgba(201,169,110,.3) transparent;
    scroll-behavior: smooth;
}

.music_list::-webkit-scrollbar { width: 4px; }
.music_list::-webkit-scrollbar-track { background: transparent; }
.music_list::-webkit-scrollbar-thumb {
    background: rgba(201,169,110,.25);
    border-radius: 99px;
}
.music_list::-webkit-scrollbar-thumb:hover { background: rgba(201,169,110,.4); }

.music_card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 16px;
    cursor: pointer;
    background: rgba(255,255,255,.03);
    border: 1px solid transparent;
    transition: all .35s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
}

.music_card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, var(--cream-04));
    opacity: 0;
    transition: opacity .3s ease;
}

.music_card:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.1);
    transform: translateX(-4px);
    box-shadow: 0 4px 20px rgba(0,0,0,.2);
}

.music_card:hover::before { opacity: 1; }

.music_card.active {
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    background: rgba(201,169,110,.08);
    border-color: rgba(201,169,110,.25);
    box-shadow: 0 0 20px rgba(201,169,110,.06);
}

.music_card_cover {
    position: relative;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}

.music_card_cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: filter .3s ease;
}

.music_card:hover .music_card_cover img { filter: brightness(.7); }

.music_card_play_overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    opacity: 0;
    transition: opacity .3s ease;
}

.music_card:hover .music_card_play_overlay { opacity: 1; }

.music_card_info { flex: 1; min-width: 0; }

.music_card_info h4 {
    color: var(--text-primary);
    margin: 0 0 4px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.music_card_info p {
    margin: 0;
    color: #b7af99;
    font-size: 13px;
}

/* Now-playing bars */
.music_card_now_playing {
    display: none;
    align-items: flex-end;
    gap: 2px;
    height: 18px;
    flex-shrink: 0;
}

.music_card_now_playing span {
    display: block;
    width: 3px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gold), var(--cream));
    animation: nowPlayingBar 0.8s ease infinite alternate;
}

.music_card_now_playing span:nth-child(1) { height: 10px; animation-delay: 0s; }
.music_card_now_playing span:nth-child(2) { height: 16px; animation-delay: .15s; }
.music_card_now_playing span:nth-child(3) { height: 12px; animation-delay: .30s; }
.music_card_now_playing span:nth-child(4) { height: 8px;  animation-delay: .45s; }

@keyframes nowPlayingBar {
    from { transform: scaleY(.4); }
    to   { transform: scaleY(1); }
}

/* ——— Custom Player ——— */

.custom_player {
    background: rgba(255,255,255,.04);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    padding: 18px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    flex-shrink: 0;
    position: relative;
}

.player_track_info {
    display: flex;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 2;
}

/* ——— Player Cover Wrap ——— */

.player_cover_wrap {
    position: relative;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
}

.player_cover_wrap::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: var(--cover-glow, transparent);
    -webkit-filter: blur(16px);
    filter: blur(16px);
    opacity: 0.35;
    z-index: -1;
    transition: opacity .5s ease;
}

.player_cover_wrap:hover::after { opacity: 0.55; }

.player_cover {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,.1);
    position: relative;
    z-index: 2;
}

/* ——— Vinyl Disc ——— */

.music_vinyl_disc {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transform: translateX(-20px) rotate(0deg);
    transition: transform .6s cubic-bezier(.22,1,.36,1),
                opacity .4s ease,
                margin .5s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
    margin-left: -40px;
}

/* Vinyl body — dark disc with groove rings */
.music_vinyl_disc::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-radial-gradient(
            circle at center,
            #1c1a18 0px, #1c1a18 1px,
            #232120 1px, #232120 2px,
            #1a1816 2px, #1a1816 3px
        );
    border: 2px solid rgba(255,255,255,.07);
    box-shadow:
        0 0 0 1px rgba(0,0,0,.6),
        inset 0 0 20px rgba(0,0,0,.5),
        0 4px 20px rgba(0,0,0,.4);
}

/* Specular highlight — sweeping light reflection */
.music_vinyl_disc::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        conic-gradient(
            from 160deg,
            transparent 0deg,
            rgba(255,255,255,.06) 30deg,
            transparent 60deg,
            transparent 140deg,
            rgba(255,255,255,.04) 170deg,
            transparent 200deg,
            transparent 300deg,
            rgba(255,255,255,.03) 330deg,
            transparent 360deg
        );
    pointer-events: none;
}

/* Center label */
.music_vinyl_disc .vinyl_center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, #2a2520 0%, #1a1816 60%, #12110f 100%);
    border: 1.5px solid rgba(255,255,255,.08);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 8px rgba(0,0,0,.6);
}

/* Center spindle hole */
.music_vinyl_disc .vinyl_center::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 4px var(--gold-dim), 0 0 8px rgba(201,169,110,.3);
}

/* Groove rings */
.music_vinyl_disc .vinyl_groove {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.04);
    pointer-events: none;
}

.music_vinyl_disc .vinyl_groove_2 {
    inset: 18px;
    border-color: rgba(255,255,255,.03);
}

/* ——— Playing state: vinyl slides out from under cover ——— */
.music_vinyl_disc.spinning {
    opacity: 1;
    margin-left: 2px;
    transform: translateX(0) rotate(0deg);
    -webkit-animation: vinylSpin 3s linear infinite;
    animation: vinylSpin 3s linear infinite;
}

.music_vinyl_disc.paused {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

@keyframes vinylSpin {
    from { transform: translateX(0) rotate(0deg); }
    to   { transform: translateX(0) rotate(360deg); }
}

/* ——— Visualizer Canvas ——— */

.music_visualizer {
    height: 48px;
    width: 100%;
    opacity: 0.6;
    position: relative;
    z-index: 2;
}

.music_visualizer canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.player_track_text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.player_title {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.player_artist {
    color: #b7af99;
    font-size: 13px;
    margin-top: 2px;
}

/* Progress */

.player_progress_area {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.player_time_current,
.player_time_total {
    color: #7a7365;
    font-size: 11px;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: monospace;
}

.player_progress_bar {
    flex: 1;
    height: 4px;
    background: var(--cream-20);
    border-radius: 99px;
    cursor: pointer;
    position: relative;
    padding: 8px 0;
    margin: -8px 0;
    transition: height .2s ease;
}

.player_progress_bar:hover { height: 6px; }

.player_progress_fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--cream), var(--gold));
    background-size: 200% 100%;
    -webkit-animation: progressShimmer 3s linear infinite;
    animation: progressShimmer 3s linear infinite;
    border-radius: 99px;
    transition: width .3s linear;
}

@keyframes progressShimmer {
    0%   { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.player_progress_bar:hover .player_progress_fill {
    box-shadow: 0 0 8px var(--gold-dim);
}

.player_progress_thumb {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: var(--cream);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold-dim);
    opacity: 0;
    transition: left .3s linear, opacity .2s ease, box-shadow .2s ease;
}

.player_progress_bar:hover .player_progress_thumb {
    opacity: 1;
    box-shadow: 0 0 14px var(--gold), 0 0 24px var(--gold-subtle);
}

/* Controls */

.player_controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    z-index: 2;
}

.player_btn {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b7af99;
    cursor: pointer;
    transition: all .25s cubic-bezier(.22,1,.36,1);
    flex-shrink: 0;
    position: relative;
}

.player_btn:hover {
    background: rgba(255,255,255,.1);
    color: var(--text-primary);
    border-color: rgba(255,255,255,.15);
    box-shadow: 0 0 12px rgba(201,169,110,.1);
}

.player_btn:active {
    transform: scale(0.92);
}

.player_btn_main {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, rgba(201,169,110,.15), rgba(201,169,110,.06));
    border: 2px solid rgba(201,169,110,.4);
    color: var(--text-primary);
}

.player_btn_main:hover {
    background: linear-gradient(135deg, rgba(201,169,110,.25), rgba(201,169,110,.12));
    border-color: rgba(201,169,110,.6);
    box-shadow: 0 0 24px rgba(201,169,110,.15), 0 0 48px rgba(201,169,110,.06);
    transform: scale(1.06);
}

.player_btn_main:active {
    transform: scale(0.92);
}

/* Repeat-on indicator */
.player_btn.active {
    background: rgba(201,169,110,.12);
    border-color: rgba(201,169,110,.35);
    color: var(--gold);
}

.player_btn.active:hover {
    background: rgba(201,169,110,.18);
    color: var(--gold-hover);
    box-shadow: 0 0 12px rgba(201,169,110,.15);
}

.player_btn.active::after {
    content: "";
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.player_volume_area {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    max-width: 90px;
}

.player_volume_slider {
    -webkit-appearance: none;
    appearance: none;
    width: 60px;
    height: 3px;
    background: var(--cream-20);
    border-radius: 99px;
    outline: none;
    cursor: pointer;
    transition: height .2s ease;
}

.player_volume_slider:hover { height: 4px; }

.player_volume_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 6px var(--gold-dim);
    cursor: pointer;
    transition: box-shadow .2s ease;
}

.player_volume_slider::-webkit-slider-thumb:hover {
    box-shadow: 0 0 10px var(--gold);
}

.player_volume_slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--cream);
    box-shadow: 0 0 6px var(--gold-dim);
    border: none;
    cursor: pointer;
}

/* ==========================================================
   MINI MUSIC BAR — GLASSMORPHISM
========================================================== */

.mini_music_bar {
    position: fixed;
    bottom: -90px;
    left: 50%;
    transform: translateX(-50%);
    width: min(520px, calc(100vw - 32px));
    height: 72px;
    background: rgba(18,16,14,.78);
    -webkit-backdrop-filter: blur(30px) saturate(1.3);
    backdrop-filter: blur(30px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 20px;
    box-shadow: 0 8px 40px rgba(0,0,0,.5), 0 0 0 1px rgba(201,169,110,.04);
    z-index: 99998;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    cursor: pointer;
    transition: bottom .5s cubic-bezier(.22,1,.36,1);
    overflow: hidden;
}

.mini_music_bar::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(201,169,110,.03), transparent);
    pointer-events: none;
}

.mini_music_bar.visible { bottom: 20px; }

.mini_bar_cover {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}

.mini_bar_info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.mini_bar_title {
    color: var(--text-primary);
    font-family: "welcomefont";
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mini_bar_artist {
    color: #7a7365;
    font-family: "welcomefont";
    font-size: 12px;
    margin-top: 2px;
}

.mini_bar_progress_wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
}

.mini_bar_progress_track {
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.06);
}

.mini_bar_progress_fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold), var(--cream));
    transition: width .3s linear;
}

.mini_bar_controls {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.mini_bar_btn {
    background: none;
    border: none;
    color: #b7af99;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: color .2s ease, background .2s ease;
}

.mini_bar_btn:hover { color: var(--text-primary); background: rgba(255,255,255,.06); }

.mini_bar_btn.active {
    color: var(--gold);
    background: rgba(201,169,110,.1);
    position: relative;
}

.mini_bar_btn.active:hover { background: rgba(201,169,110,.16); }

.mini_bar_btn.active::after {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gold);
}

.mini_bar_play {
    color: var(--text-primary);
    background: rgba(255,255,255,.08);
    width: 40px;
    height: 40px;
}

.mini_bar_play:hover { background: rgba(255,255,255,.14); }

.mini_bar_open_panel {
    background: rgba(201,169,110,.08);
    border: 1px solid rgba(201,169,110,.2);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    cursor: pointer;
    transition: all .25s ease;
    flex-shrink: 0;
}

.mini_bar_open_panel:hover {
    background: rgba(201,169,110,.16);
    box-shadow: 0 0 12px rgba(201,169,110,.15);
}

.mini_bar_close {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8c8576;
    cursor: pointer;
    transition: all .25s ease;
    flex-shrink: 0;
    margin-left: 2px;
}

.mini_bar_close:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}

/* ==========================================================
   REDUCED MOTION — Accessibility
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .music_vinyl_disc.spinning {
        -webkit-animation: none;
        animation: none;
        transform: translateX(0) rotate(0deg) !important;
        opacity: 1 !important;
        margin-left: 2px !important;
    }
    .music_vinyl_disc {
        -webkit-transition: none;
        transition: none;
    }
    .music_visualizer { display: none; }
    .music_dynamic_bg { -webkit-transition: none; transition: none; }
    .music_card { -webkit-transition: none; transition: none; }
    .player_progress_fill { -webkit-animation: none; animation: none; }
    .player_progress_bar { -webkit-transition: none; transition: none; }
    .player_progress_thumb { -webkit-transition: none; transition: none; }
    .player_btn { -webkit-transition: none; transition: none; }
    .mini_music_bar { -webkit-transition: none; transition: none; }
}

/* ==========================================================
   LILY PETALS
========================================================== */

.floating_lily {
    position: absolute;
    top: -60px;
    opacity: 0;
    will-change: transform, opacity;
    animation: lilyFall linear forwards;
}

.floating_lily svg { width: 100%; height: 100%; }

@keyframes lilyFall {
    0%   { opacity: 0;   transform: translateY(0)     translateX(0)    rotate(0deg)   scale(.8); }
    10%  { opacity: 1; }
    40%  { transform: translateY(35vh)  translateX(35px)  rotate(120deg)  scale(1); }
    70%  { transform: translateY(70vh)  translateX(-30px) rotate(240deg)  scale(1.1); }
    100% { opacity: 0;   transform: translateY(120vh) translateX(20px)  rotate(360deg) scale(.7); }
}

/* ==========================================================
   MAIN PAGE — FOOTER
========================================================== */

#mainpage_footer {
    position: relative;
    z-index: 2;
    background: transparent;
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
}

/* ── Wave layers ── */

.footer_wave_wrap {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    margin-bottom: -4px;
}

.footer_wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
}

.footer_wave--back {
    fill: rgba(20, 18, 15, 0.45);
    animation: waveSlide 18s linear infinite;
}

.footer_wave--mid {
    fill: rgba(15, 13, 12, 0.65);
    animation: waveSlide 12s linear infinite reverse;
}

.footer_wave--front {
    fill: #0e0c0b;
    animation: waveSlide 9s linear infinite;
}

@keyframes waveSlide {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Main footer body ── */

#mainpage_footer .footer_inner {
    background: linear-gradient(170deg, #0e0c0b 0%, #131210 40%, #0d0c0a 100%);
    padding: 70px 8% 50px;
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.3fr;
    gap: 60px;
    position: relative;
}

/* ── Floating orbs (depth / parallax atmosphere) ── */

.footer_orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(70px);
    will-change: transform;
}

.footer_orb--1 {
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, var(--cream-06) 0%, transparent 70%);
    top: -80px;
    left: -60px;
    animation: orbFloat1 14s ease-in-out infinite;
}

.footer_orb--2 {
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, var(--gold-faint) 0%, transparent 70%);
    top: 40px;
    right: 10%;
    animation: orbFloat2 18s ease-in-out infinite;
}

.footer_orb--3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, var(--cream-04) 0%, transparent 70%);
    bottom: 80px;
    left: 38%;
    animation: orbFloat1 22s ease-in-out infinite reverse;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translateY(0) translateX(0); }
    33%       { transform: translateY(-28px) translateX(14px); }
    66%       { transform: translateY(14px) translateX(-18px); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translateY(0) translateX(0); }
    40%       { transform: translateY(22px) translateX(-20px); }
    70%       { transform: translateY(-16px) translateX(12px); }
}

/* ── Brand column ── */

.footer_col {
    position: relative;
    z-index: 2;
}

.footer_logo_wrap {
    position: relative;
    display: inline-block;
    margin-bottom: 22px;
}

.footer_logo_text {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: 10px;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
    display: block;
    line-height: 1;
}

.footer_logo_glow {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: 10px;
    color: transparent;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, var(--gold), var(--cream), var(--gold));
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    filter: blur(14px);
    opacity: 0.5;
    animation: logoGlowSweep 5s ease-in-out infinite;
    line-height: 1;
    z-index: 0;
}

@keyframes logoGlowSweep {
    0%, 100% { background-position: 0% center; }
    50%       { background-position: 100% center; }
}

.footer_tagline {
    font-family: 'desfont', sans-serif;
    font-size: clamp(13px, 1.3vw, 15px);
    color: var(--frost-50);
    line-height: 1.75;
    margin: 0 0 28px;
    letter-spacing: 0.5px;
}

.footer_divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
    margin-bottom: 24px;
}

.footer_social_row {
    display: flex;
    gap: 10px;
}

.footer_social_btn {
    width: 40px;
    height: 40px;
    background: var(--cream-04);
    border: 1px solid var(--frost-15);
    border-radius: 12px;
    color: var(--frost-50);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .35s cubic-bezier(.22,1,.36,1);
    position: relative;
    overflow: hidden;
}

.footer_social_btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cream-12), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}

.footer_social_btn:hover {
    color: var(--text-primary);
    border-color: var(--frost-35);
    background: var(--cream-12);
    transform: translateY(-4px);
    box-shadow:
        0 8px 25px rgba(0,0,0,.4),
        0 0 18px var(--frost-15);
}

.footer_social_btn:hover::before { opacity: 1; }

/* ── Links column ── */

.footer_col_title {
    font-family: 'welcomefont', sans-serif;
    font-size: 11px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--frost-35);
    margin: 0 0 24px;
    position: relative;
    padding-bottom: 14px;
}

.footer_col_title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1px;
    background: linear-gradient(90deg, var(--cream-35), transparent);
}

.footer_link_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer_link {
    font-family: 'desfont', sans-serif;
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--frost-50);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    transition: color .3s ease, gap .3s ease;
    letter-spacing: 0.4px;
}

.footer_link_dot {
    width: 4px;
    height: 4px;
    background: var(--gold);
    border-radius: 50%;
    flex-shrink: 0;
    opacity: 0.4;
    transition: opacity .3s ease, transform .3s ease;
}

.footer_link:hover {
    color: var(--text-primary);
    gap: 18px;
}

.footer_link:hover .footer_link_dot {
    opacity: 1;
    transform: scale(1.5);
}

/* ── Stats column ── */

.footer_stat_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.footer_stat_card {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--frost-08);
    border-radius: 16px;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    position: relative;
    overflow: hidden;
    transition: border-color .35s ease, transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s ease;
    transform-style: preserve-3d;
    cursor: default;
}

.footer_stat_card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cream-20), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}

.footer_stat_card:hover {
    border-color: var(--frost-25);
    transform: translateY(-5px) perspective(600px) rotateX(4deg);
    box-shadow:
        0 20px 50px rgba(0,0,0,.45),
        0 0 0 1px var(--frost-08),
        inset 0 1px 0 var(--frost-08);
}

.footer_stat_card:hover::before { opacity: 1; }

.footer_stat_num {
    font-family: 'Tanker', 'welcomefont', sans-serif;
    font-size: clamp(22px, 3vw, 30px);
    color: var(--text-primary);
    line-height: 1;
    background: linear-gradient(135deg, var(--cream), var(--gold));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footer_stat_label {
    font-family: 'desfont', sans-serif;
    font-size: 11px;
    color: var(--frost-35);
    letter-spacing: 0.3px;
    line-height: 1.4;
}

/* ── Bottom bar ── */

.footer_bottom {
    background: linear-gradient(170deg, #0d0c0a, #0a0908);
    padding: 0 8% 28px;
    position: relative;
    z-index: 2;
}

.footer_bottom_line {
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--frost-08) 20%,
        var(--frost-15) 50%,
        var(--frost-08) 80%,
        transparent 100%
    );
    margin-bottom: 22px;
}

.footer_bottom_content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer_copyright {
    font-family: 'desfont', sans-serif;
    font-size: 12px;
    color: var(--frost-35);
    letter-spacing: 1.5px;
}

.footer_heart_inline {
    color: var(--gold);
    display: inline-block;
    animation: heartPulse 2.4s ease-in-out infinite;
}

@keyframes heartPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%       { transform: scale(1.25); opacity: 1; }
}

.footer_year {
    font-family: 'welcomefont', sans-serif;
    font-size: 12px;
    color: var(--frost-25);
    letter-spacing: 2px;
}

/* ==========================================================
   MAIN PAGE — RESPONSIVE
========================================================== */

@media (max-width: 900px) {
    .intro_wrapper {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .parallax_card {
        width: min(380px, 90vw);
        height: min(460px, 55vw);
    }

    .intro_badges { justify-content: center; }

    /* Footer grid collapses to single column on tablet */
    #mainpage_footer .footer_inner {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 6% 40px;
    }

    .footer_col--brand { text-align: center; }
    .footer_divider    { margin: 0 auto 24px; }
    .footer_social_row { justify-content: center; }
    .footer_col_title::after { left: 50%; transform: translateX(-50%); }
    .footer_link_list { align-items: center; }
}

@media (max-width: 768px) {
    .memory_panel {
        flex-direction: column;
        gap: 20px;
        text-align: center;
        padding: 20px;
    }

    .memory_counter { text-align: center; }

    .mainpage_side_menu {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 90px;
        transform: translateX(-50%);
        flex-direction: row;
        gap: 16px;
        background: rgba(20,18,16,.7);
        backdrop-filter: blur(12px);
        padding: 10px 18px;
        border-radius: 60px;
        border: 1px solid var(--frost-08);
    }

    .mainpage_text { display: none; }

    .mainpage_menu_item::after { display: none; }

    .mainpage_menu_item:hover .mainpage_icon { transform: none; }

    .music_panel {
        width: 100vw;
        right: -100vw;
        padding: 20px 18px 18px;
    }

    .music_panel.active { right: 0; }

    .music_vinyl_disc { display: none; }
    .player_cover_wrap { display: block; }

    .mini_music_bar {
        width: calc(100vw - 24px);
        bottom: -90px;
        gap: 8px;
        padding: 0 12px;
    }

    .mini_music_bar.visible { bottom: 12px; }

    .mini_bar_controls { gap: 2px; }
    .mini_bar_btn      { width: 32px; height: 32px; }
    .mini_bar_play     { width: 36px; height: 36px; }
    .mini_bar_open_panel,
    .mini_bar_close    { width: 26px; height: 26px; }

    .mainpage_head_title {
        width: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        border-left: none;
        border-bottom: 4px solid var(--border-primary);
        padding-left: 0;
        padding-bottom: 6px;
    }

    /* Footer bottom bar stacks on mobile */
    .footer_bottom_content {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    .footer_stat_grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .parallax_card {
        width: 90vw;
        height: 55vw;
        min-height: 260px;
    }

    #daysCounter { font-size: 32px; }

    .custom_player { padding: 14px; }

    .player_volume_area { display: none; }
}

/* ==========================================================
   MORE DROPDOWN MENU
========================================================== */

.more_menu_item {
    position: relative;
}

.more_dropdown {
    position: absolute;
    right: calc(100% + 18px);
    top: 50%;
    transform: translateY(-50%) scaleX(0.85) scaleY(0.8);
    transform-origin: right center;
    background: rgba(18, 16, 14, 0.92);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--frost-15);
    border-radius: 18px;
    padding: 10px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity .35s cubic-bezier(.22,1,.36,1),
        transform .35s cubic-bezier(.22,1,.36,1),
        visibility .35s ease;
    box-shadow:
        0 20px 60px rgba(0,0,0,.6),
        0 0 0 1px var(--frost-08),
        inset 0 1px 0 var(--frost-08);
    z-index: 2000;
}

.more_dropdown--open {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    transform: translateY(-50%) scaleX(1) scaleY(1);
}

/* Tiny arrow pointing right toward the menu item */
.more_dropdown::after {
    content: "";
    position: absolute;
    right: -7px;
    top: 50%;
    transform: translateY(-50%);
    border: 7px solid transparent;
    border-left-color: var(--frost-15);
    border-right: none;
}

.more_dropdown_item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    background: transparent;
    border: none;
    border-radius: 12px;
    color: var(--frost-65);
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(14px, 1.5vw, 16px);
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition:
        background .25s ease,
        color .25s ease,
        transform .25s cubic-bezier(.22,1,.36,1);
    letter-spacing: 0.5px;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(10px);
}

.more_dropdown--open .more_dropdown_item {
    opacity: 1;
    transform: translateX(0);
}

.more_dropdown--open .more_dropdown_item:nth-child(1) { transition: all .3s ease .06s; }
.more_dropdown--open .more_dropdown_item:nth-child(2) { transition: all .3s ease .12s; }
.more_dropdown--open .more_dropdown_item:nth-child(3) { transition: all .3s ease .18s; }
.more_dropdown--open .more_dropdown_item:nth-child(4) { transition: all .3s ease .24s; }
.more_dropdown--open .more_dropdown_item:nth-child(5) { transition: all .3s ease .30s; }

.more_dropdown_item:hover {
    background: var(--cream-06);
    color: var(--text-primary);
    transform: translateX(-3px);
}

.more_dropdown_icon {
    font-size: 13px;
    opacity: 0.6;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Mobile: dropdown goes above, fixed to escape header overflow */
@media (max-width: 768px) {
    .more_dropdown {
        position: fixed;
        left: 50%;
        bottom: 140px;
        top: auto;
        right: auto;
        transform: translateX(-50%) scaleY(0.85);
        transform-origin: bottom center;
        min-width: 140px;
        padding: 6px;
        border-radius: 14px;
        z-index: 99999;
    }
    .more_dropdown--open {
        transform: translateX(-50%) scaleY(1);
    }
    .more_dropdown::after {
        right: auto;
        left: 50%;
        bottom: -7px;
        top: auto;
        transform: translateX(-50%);
        border: 7px solid transparent;
        border-top-color: var(--frost-15);
        border-left: none;
        border-right: none;
        border-bottom: none;
    }
    .more_dropdown_item {
        padding: 9px 14px;
        font-size: 13px;
        gap: 10px;
    }
    .more_dropdown_icon { font-size: 12px; width: 14px; }
}

/* ==========================================================
   OVERLAY PAGES (Poems & Dates)
   ─────────────────────────────────────────────────────────
   KEY FIX: The outer .overlay_page container must NEVER have
   an active CSS transform while it has overflow-y:auto.
   A transform creates a new containing block, which causes
   position:fixed children (bg, canvas) to be positioned
   relative to the transformed ancestor instead of the viewport —
   so they scroll with the content and reveal the main page bg.

   Solution: the outer shell handles only opacity/visibility.
   The slide-in transform is applied to .overlay_page_inner
   (the content wrapper), which has NO overflow and NO fixed
   descendants, so transforms on it are completely safe.
========================================================== */

.overlay_page {
    position: fixed;
    inset: 0;
    z-index: 100000;
    /* overflow lives here — NO transform ever on this element */
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .55s cubic-bezier(.22,1,.36,1),
        visibility .55s ease;
    /* isolate stacking so bg/canvas z-index works correctly */
    isolation: isolate;
}

.overlay_page--open {
    opacity: 1;
    visibility: visible;
}

/* Inner wrapper carries the slide-in transform safely —
   it contains only scrollable content, no fixed descendants */
.overlay_page_inner {
    position: relative;
    z-index: 2;
    min-height: 100%;
    transform: translateY(30px);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

.overlay_page--open .overlay_page_inner {
    transform: translateY(0);
}

/* Background layer: truly fixed to the viewport at all times.
   Lives inside .overlay_page (for z-index grouping) but is
   never affected by scroll because position:fixed escapes any
   overflow container — as long as no ancestor has a transform.
   We guarantee that by keeping .overlay_page transform-free. */
.overlay_page_bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, var(--gold-faint) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, var(--frost-04) 0%, transparent 50%),
        linear-gradient(160deg, #0d0b09 0%, #131110 40%, #0e0c0b 100%);
    z-index: 0;
}

.dates_bg {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(180,120,80,.05) 0%, transparent 50%),
        radial-gradient(ellipse at 70% 80%, rgba(100,60,40,.06) 0%, transparent 50%),
        linear-gradient(160deg, #0a0806 0%, #110e0b 40%, #0c0a08 100%);
}

.overlay_canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.overlay_header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px 40px;
    background: rgba(13,11,9,.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--frost-08);
    /* ensure header sits above the fixed bg/canvas layers */
    isolation: isolate;
}

.overlay_back_btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--cream-06);
    border: 1px solid var(--frost-15);
    border-radius: 12px;
    color: var(--frost-65);
    font-family: 'welcomefont', sans-serif;
    font-size: 14px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.22,1,.36,1);
    flex-shrink: 0;
}

.overlay_back_btn:hover {
    background: var(--cream-12);
    color: var(--text-primary);
    transform: translateX(-3px);
}

.overlay_title {
    flex: 1;
    text-align: center;
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(20px, 3vw, 32px);
    color: var(--text-primary);
    letter-spacing: 4px;
    margin: 0;
    text-transform: uppercase;
}

.overlay_title_ornament {
    font-size: 18px;
    color: var(--frost-35);
    flex-shrink: 0;
}

/* ==========================================================
   POEMS PAGE LAYOUT
========================================================== */

.poems_container {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 30px 100px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.poem_card {
    position: relative;
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
}

.poem_card.reveal_in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.poem_card_inner {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--frost-08);
    border-radius: 24px;
    padding: 48px 52px;
    position: relative;
    overflow: hidden;
    transition: border-color .35s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22,1,.36,1);
    transform-style: preserve-3d;
}

.poem_card_inner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cream-20), transparent);
}

.poem_card_inner::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at top left, var(--frost-04) 0%, transparent 60%);
    pointer-events: none;
}

.poem_card_inner:hover {
    border-color: var(--frost-25);
    box-shadow:
        0 30px 80px rgba(0,0,0,.5),
        0 0 0 1px var(--frost-08),
        inset 0 1px 0 var(--frost-08);
    transform: translateY(-6px) perspective(800px) rotateX(1.5deg);
}

.poem_number {
    font-family: 'Tanker', 'welcomefont', sans-serif;
    font-size: 13px;
    letter-spacing: 5px;
    color: var(--frost-35);
    text-transform: uppercase;
    margin-bottom: 14px;
}

.poem_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(22px, 3vw, 34px);
    color: var(--text-primary);
    margin: 0 0 20px;
    letter-spacing: 1.5px;
    font-weight: normal;
}

.poem_divider {
    width: 50px;
    height: 1px;
    background: linear-gradient(90deg, var(--gold-dim), transparent);
    margin-bottom: 28px;
}

.poem_body p {
    font-family: 'desfont', serif;
    font-size: clamp(15px, 1.6vw, 18px);
    color: var(--frost-65);
    line-height: 2.1;
    margin: 0 0 24px;
    letter-spacing: 0.3px;
}

.poem_body p:last-child { margin-bottom: 0; }

.poem_footer_line {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cream-06), transparent);
}

@media (max-width: 600px) {
    .poem_card_inner { padding: 30px 24px; }
    .poems_container { padding: 40px 16px 80px; gap: 36px; }
    .overlay_header  { padding: 16px 20px; }
}

/* ==========================================================
   MODAL OVERLAYS (Favourites & Warning)
========================================================== */

.modal_overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0,0,0,.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
}

.modal_overlay--open {
    opacity: 1;
    visibility: visible;
}

.modal_overlay--open .modal_box {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.modal_box {
    position: relative;
    background: linear-gradient(160deg, #181614 0%, #1f1d1a 60%, #221f1c 100%);
    border: 1px solid var(--frost-15);
    border-radius: 28px;
    width: 100%;
    max-width: 700px;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.94) translateY(20px);
    opacity: 0;
    transition:
        transform .5s cubic-bezier(.22,1,.36,1),
        opacity .5s cubic-bezier(.22,1,.36,1);
    box-shadow:
        0 40px 120px rgba(0,0,0,.7),
        0 0 0 1px var(--frost-08),
        inset 0 1px 0 var(--frost-08);
}

.modal_box::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cream-20), transparent);
    pointer-events: none;
}

.modal_canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.modal_header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px 20px;
    border-bottom: 1px solid var(--frost-08);
    flex-shrink: 0;
}

.modal_title_wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: center;
}

.modal_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(20px, 3vw, 28px);
    color: var(--text-primary);
    letter-spacing: 4px;
    margin: 0;
    font-weight: normal;
    text-transform: uppercase;
}

.modal_ornament {
    font-size: 16px;
    color: var(--frost-35);
}

.modal_close_btn {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--frost-65);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease, color .25s ease;
    flex-shrink: 0;
}

.modal_close_btn:hover {
    background: var(--cream-12);
    color: var(--text-primary);
    transform: rotate(90deg);
}

.modal_body {
    position: relative;
    z-index: 2;
    overflow-y: auto;
    padding: 28px 32px 36px;
    scrollbar-width: thin;
    scrollbar-color: var(--frost-25) transparent;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* ==========================================================
   FAVOURITES SECTIONS
========================================================== */

.fav_section {
    background: rgba(255,255,255,.02);
    border: 1px solid var(--frost-08);
    border-radius: 18px;
    padding: 24px 22px;
    transition: border-color .3s ease;
}

.fav_section:hover { border-color: var(--frost-15); }

.fav_section_title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'welcomefont', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--frost-35);
    margin: 0 0 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--frost-08);
}

.fav_icon { font-size: 14px; flex-shrink: 0; }
.fav_icon--like    { color: var(--frost-65); }
.fav_icon--dislike { color: rgba(200,120,100,.5); }

.fav_section.fav_liked   { border-color: var(--frost-08); }
.fav_section.fav_disliked { border-color: rgba(180,90,80,.12); }

.fav_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.fav_item {
    font-family: 'desfont', sans-serif;
    font-size: clamp(13px, 1.3vw, 15px);
    color: var(--frost-50);
    line-height: 1.55;
    padding: 8px 0 8px 16px;
    border-left: 2px solid var(--frost-15);
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity .4s ease, transform .4s ease, border-color .3s ease, color .3s ease;
}

.fav_section.fav_disliked .fav_item {
    border-left-color: rgba(180,90,80,.15);
}

.fav_section.fav_disliked .fav_item:hover {
    border-left-color: rgba(167, 53, 40, 0.747);
}

.fav_item--visible {
    opacity: 1;
    transform: translateX(0);
}

.fav_item:hover {
    color: var(--frost-65);
    border-left-color: var(--frost-35);
}

@media (max-width: 600px) {
    .modal_body {
        grid-template-columns: 1fr;
        padding: 20px 20px 28px;
    }
    .modal_header { padding: 20px 20px 16px; }
}

/* ==========================================================
   WARNING POPUP
========================================================== */

.modal_box--warning {
    max-width: 480px;
    padding: 48px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    background: linear-gradient(160deg, #1a1208 0%, #221a0e 60%, #1e160b 100%);
    border-color: var(--gold-subtle);
}

.warning_icon_wrap {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gold-faint);
    border: 1px solid var(--gold-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: warnPulse 2.5s ease-in-out infinite;
}

@keyframes warnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,169,110,.2); }
    50%       { box-shadow: 0 0 0 14px rgba(201,169,110,0); }
}

.warning_icon {
    font-size: 30px;
    color: var(--gold);
    line-height: 1;
}

.warning_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(20px, 3vw, 26px);
    color: var(--text-primary);
    letter-spacing: 2px;
    margin: 0;
    font-weight: normal;
}

.warning_text {
    font-family: 'desfont', sans-serif;
    font-size: clamp(14px, 1.5vw, 16px);
    color: var(--frost-50);
    line-height: 1.75;
    margin: 0;
    max-width: 360px;
}

.warning_actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    margin-top: 8px;
}

.warning_btn {
    width: 100%;
    padding: 14px 24px;
    border-radius: 14px;
    font-family: 'welcomefont', sans-serif;
    font-size: 15px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all .3s cubic-bezier(.22,1,.36,1);
}

.warning_btn--confirm {
    background: var(--gold-subtle);
    border: 1px solid var(--gold-subtle);
    color: var(--gold);
}

.warning_btn--confirm:hover {
    background: var(--gold-subtle);
    border-color: var(--gold-dim);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0,0,0,.4);
}

.warning_btn--cancel {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--frost-35);
}

.warning_btn--cancel:hover {
    background: rgba(255,255,255,.08);
    color: var(--frost-65);
}

@media (max-width: 520px) {
    .modal_box--warning { padding: 36px 28px; }
}

/* ==========================================================
   DATES TIMELINE
========================================================== */

.dates_timeline {
    position: relative;
    z-index: 2;
    max-width: 880px;
    margin: 0 auto;
    padding: 60px 30px 100px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.date_entry {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0 28px;
    opacity: 0;
    transform: translateX(-30px);
    transition:
        opacity .7s cubic-bezier(.22,1,.36,1),
        transform .7s cubic-bezier(.22,1,.36,1);
    will-change: opacity, transform;
    margin-bottom: 60px;
}

.date_entry.reveal_in {
    opacity: 1;
    transform: translateX(0);
}

.date_entry--right {
    transform: translateX(30px);
}

.date_entry--right.reveal_in {
    transform: translateX(0);
}

.date_marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.date_dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cream), var(--gold));
    border: 3px solid var(--frost-25);
    box-shadow: 0 0 20px var(--gold-subtle), 0 0 0 6px var(--gold-faint);
    flex-shrink: 0;
    margin-top: 28px;
    position: relative;
    z-index: 1;
    animation: dotGlow 3s ease-in-out infinite;
}

@keyframes dotGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(244,227,178,.3), 0 0 0 5px rgba(244,227,178,.05); }
    50%       { box-shadow: 0 0 25px rgba(244,227,178,.5), 0 0 0 8px rgba(244,227,178,.08); }
}

.date_line {
    flex: 1;
    width: 1px;
    background: linear-gradient(to bottom, var(--cream-20), var(--cream-04));
    margin-top: 8px;
    min-height: 60px;
}

.date_entry:last-child .date_line { display: none; }

.date_card {
    background: rgba(255,255,255,.025);
    border: 1px solid var(--frost-08);
    border-radius: 24px;
    overflow: hidden;
    transition:
        border-color .35s ease,
        box-shadow .35s ease,
        transform .4s cubic-bezier(.22,1,.36,1);
    transform-style: preserve-3d;
}

.date_card:hover {
    border-color: var(--frost-25);
    box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px var(--gold-faint);
    transform: translateY(-6px) perspective(900px) rotateX(1deg);
}

.date_card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, var(--cream-04), transparent 55%);
    pointer-events: none;
}

.date_card_image_wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.date_card_image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-color: var(--cream-04);
    transition: transform .6s cubic-bezier(.22,1,.36,1);
}

.date_card:hover .date_card_image { transform: scale(1.04); }

.date_img_overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 40%, rgba(13,11,9,.9));
}

.date_card_content {
    padding: 28px 32px 36px;
}

.date_label {
    display: block;
    font-family: 'Tanker', 'welcomefont', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--frost-35);
    margin-bottom: 10px;
}

.date_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(18px, 2.5vw, 26px);
    color: var(--text-primary);
    margin: 0 0 18px;
    font-weight: normal;
    letter-spacing: 1px;
}

.date_desc {
    font-family: 'desfont', sans-serif;
    font-size: clamp(14px, 1.4vw, 16px);
    color: var(--frost-50);
    line-height: 1.85;
    margin: 0;
}

@media (max-width: 640px) {
    .dates_timeline { padding: 40px 16px 80px; }
    .date_entry { grid-template-columns: 36px 1fr; gap: 0 16px; }
    .date_card_image_wrap { height: 160px; }
    .date_card_content { padding: 20px 20px 26px; }
}

/* ==========================================================
   SCROLL REVEAL — FLICKER FIX
   Replace dual-observer with a single one-way reveal.
   Elements appear once and stay visible. No toggling = no flicker.
========================================================== */

.reveal {
    opacity: 0;
    transform: translateY(60px);
    filter: blur(8px);
    transition:
        opacity 1s cubic-bezier(.22,1,.36,1),
        transform 1s cubic-bezier(.22,1,.36,1),
        filter 1s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity, filter;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
}

/* Delay helpers — kept from original */
.delay-1 { transition-delay: .10s; }
.delay-2 { transition-delay: .28s; }
.delay-3 { transition-delay: .44s; }
.delay-4 { transition-delay: .58s; }


/* ==========================================================
   FIXED BACKGROUND — POEMS & DATES
   Background is fixed/attachment:fixed so it never scrolls.
   Only the scrollable content wrapper moves.
========================================================== */

/* Poems overlay: fixed bg, scrollable content */
#poems_page .overlay_page_bg,
#dates_page .overlay_page_bg,
#poems_page .overlay_canvas,
#dates_page .overlay_canvas {
    position: fixed;
    inset: 0;
}

/* The overlay itself is the scroll container */
#poems_page,
#dates_page {
    overflow-y: auto;
    overflow-x: hidden;
    /* stack context for fixed children */
    isolation: isolate;
}

/* ==========================================================
   HEART BOOKMARK BUTTON
========================================================== */

.heart_btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 22px;
    color: var(--frost-35);
    line-height: 1;
    padding: 6px 8px;
    border-radius: 50%;
    transition:
        color .3s cubic-bezier(.22,1,.36,1),
        transform .35s cubic-bezier(.34,1.56,.64,1),
        background .3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform;
}

.heart_btn:hover {
    color: var(--frost-65);
    background: var(--cream-06);
    transform: scale(1.2);
}

.heart_btn.saved {
    color: #e85d7a;
    text-shadow: 0 0 18px rgba(232,93,122,.5), 0 0 35px rgba(232,93,122,.25);
}

.heart_btn.saved:hover {
    color: #ff7a96;
    transform: scale(1.25);
}

/* Heart pop animation on save */
@keyframes heartPop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.55); }
    65%  { transform: scale(0.88); }
    85%  { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.heart_btn.popping { animation: heartPop .5s cubic-bezier(.22,1,.36,1) forwards; }

/* Favourites items: heart hidden until hover */
.fav_item {
    position: relative;
}

.fav_item .heart_btn {
    top: 50%;
    right: 4px;
    transform: translateY(-50%) scale(0.85);
    font-size: 16px;
    opacity: 0;
    transition:
        opacity .25s ease,
        color .3s ease,
        transform .35s cubic-bezier(.34,1.56,.64,1),
        background .3s ease;
}

.fav_item:hover .heart_btn {
    opacity: 1;
    transform: translateY(-50%) scale(1);
}

.fav_item .heart_btn.saved {
    opacity: 1;
    color: #e85d7a;
}

.fav_item .heart_btn:hover {
    transform: translateY(-50%) scale(1.2);
}

/* Space for heart in fav items */
.fav_item {
    padding-right: 38px;
}

/* ==========================================================
   SAVES BUTTON IN MEMORY PANEL
========================================================== */

.saves_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cream-04);
    border: 1px solid var(--frost-15);
    border-radius: 16px;
    color: var(--frost-65);
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(13px, 1.4vw, 15px);
    letter-spacing: 1px;
    padding: 10px 20px;
    cursor: pointer;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .35s cubic-bezier(.22,1,.36,1),
        box-shadow .3s ease;
    position: relative;
    overflow: hidden;
}

.saves_btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--cream-06), transparent);
    opacity: 0;
    transition: opacity .3s ease;
}

.saves_btn:hover {
    background: var(--cream-12);
    border-color: var(--frost-35);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(0,0,0,.4), 0 0 16px var(--gold-faint);
}

.saves_btn:hover::before { opacity: 1; }

.saves_btn_icon {
    font-size: 16px;
    line-height: 1;
    transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}

.saves_btn:hover .saves_btn_icon { transform: scale(1.2); }

/* Sound toggle — minimal corner icon */
.sound_toggle_mini {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--frost-15);
    background: rgba(26,23,20,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--frost-50);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .25s ease;
    z-index: 2;
    padding: 0;
    line-height: 1;
}
.sound_toggle_mini:hover {
    color: var(--gold);
    border-color: var(--gold-40);
    background: rgba(201,169,110,.08);
    transform: scale(1.1);
}
.sound_toggle_mini.muted {
    color: var(--frost-30);
    opacity: .5;
}
#sound_icon { font-style: normal; }

.saves_count_badge {
    background: linear-gradient(135deg, var(--gold), var(--cream));
    color: #1a1208;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 99px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Tanker', monospace;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
}

.saves_count_badge.hidden {
    transform: scale(0);
    opacity: 0;
}

/* ==========================================================
   SAVES PAGE
   ─────────────────────────────────────────────────────────
   Same fix as .overlay_page: outer shell = opacity/visibility
   only. Transform lives on #saves_page_inner so position:fixed
   children (bg, canvas) are never trapped by a transform
   containing block.
========================================================== */

#saves_page {
    position: fixed;
    inset: 0;
    z-index: 100002;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity .55s cubic-bezier(.22,1,.36,1),
        visibility .55s ease;
    isolation: isolate;
}

#saves_page.saves_page--open {
    opacity: 1;
    visibility: visible;
}

/* Content wrapper carries the slide-in transform */
#saves_page_inner {
    position: relative;
    z-index: 2;
    min-height: 100%;
    transform: translateX(40px);
    transition: transform .55s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

#saves_page.saves_page--open #saves_page_inner {
    transform: translateX(0);
}

#saves_page .overlay_page_bg,
#saves_page .overlay_canvas {
    position: fixed;
    inset: 0;
}

/* Saves page background is slightly distinct — cyan-tinted gold */
#saves_page .overlay_page_bg {
    background:
        radial-gradient(ellipse at 15% 25%, rgba(180,150,220,.04) 0%, transparent 55%),
        radial-gradient(ellipse at 85% 75%, var(--frost-04) 0%, transparent 50%),
        linear-gradient(160deg, #0c0b10 0%, #131218 40%, #0e0c0b 100%);
}

.saves_container {
    position: relative;
    z-index: 2;
    max-width: 760px;
    margin: 0 auto;
    padding: 60px 30px 100px;
}

.saves_empty_state {
    text-align: center;
    padding: 80px 40px;
    color: var(--frost-35);
}

.saves_empty_icon {
    font-size: 48px;
    margin-bottom: 20px;
    display: block;
    animation: heartPulse 3s ease-in-out infinite;
}

.saves_empty_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(18px, 2.5vw, 24px);
    letter-spacing: 3px;
    margin: 0 0 14px;
    color: var(--frost-35);
}

.saves_empty_desc {
    font-family: 'desfont', sans-serif;
    font-size: clamp(13px, 1.4vw, 15px);
    color: var(--frost-25);
    line-height: 1.7;
}

/* Saves group */
.saves_group {
    margin-bottom: 56px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}

.saves_group.saves_group--visible {
    opacity: 1;
    transform: translateY(0);
}

.saves_group_header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--frost-08);
}

.saves_group_icon {
    font-size: 16px;
    color: var(--frost-35);
}

.saves_group_title {
    font-family: 'welcomefont', sans-serif;
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--frost-35);
    margin: 0;
}

.saves_group_count {
    margin-left: auto;
    font-family: 'Tanker', monospace;
    font-size: 12px;
    color: var(--frost-25);
    letter-spacing: 1px;
}

/* Individual save card */
.save_card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    background: rgba(255,255,255,.025);
    border: 1px solid var(--frost-08);
    border-radius: 18px;
    padding: 20px 22px;
    margin-bottom: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
        border-color .35s ease,
        background .35s ease,
        transform .4s cubic-bezier(.22,1,.36,1),
        box-shadow .35s ease;
    will-change: transform;
}

.save_card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--cream-20), transparent);
    opacity: 0;
    transition: opacity .35s ease;
}

.save_card:hover {
    border-color: var(--frost-25);
    background: var(--cream-04);
    transform: translateX(6px);
    box-shadow: 0 12px 40px rgba(0,0,0,.4), 0 0 0 1px var(--gold-faint);
}

.save_card:hover::before { opacity: 1; }

.save_card.highlighted {
    border-color: rgba(232,93,122,.4);
    background: rgba(232,93,122,.05);
    box-shadow: 0 0 30px rgba(232,93,122,.1);
}

.save_card_icon {
    font-size: 18px;
    color: var(--frost-35);
    flex-shrink: 0;
    margin-top: 2px;
    transition: color .3s ease;
}

.save_card:hover .save_card_icon { color: var(--frost-65); }

.save_card_content {
    flex: 1;
    min-width: 0;
}

.save_card_title {
    font-family: 'welcomefont', sans-serif;
    font-size: clamp(15px, 1.8vw, 18px);
    color: var(--text-primary);
    margin: 0 0 6px;
    letter-spacing: 0.5px;
    font-weight: normal;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.save_card_excerpt {
    font-family: 'desfont', sans-serif;
    font-size: clamp(12px, 1.3vw, 14px);
    color: var(--frost-35);
    line-height: 1.6;   
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    overflow: hidden;
}

.save_card_remove {
    background: none;
    border: none;
    color: rgba(232,93,122,.4);
    cursor: pointer;
    font-size: 18px;
    padding: 4px 6px;
    border-radius: 8px;
    line-height: 1;
    transition: color .25s ease, background .25s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.save_card_remove:hover {
    color: #e85d7a;
    background: rgba(232,93,122,.1);
    transform: scale(1.2);
}

.save_card_navigate {
    background: var(--cream-06);
    border: 1px solid var(--frost-15);
    border-radius: 10px;
    color: var(--frost-50);
    font-family: 'welcomefont', sans-serif;
    font-size: 11px;
    letter-spacing: 1px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all .25s ease;
    flex-shrink: 0;
    white-space: nowrap;
}

.save_card_navigate:hover {
    background: var(--cream-12);
    color: var(--text-primary);
    border-color: var(--frost-25);
}

/* ==========================================================
   SAVE TOAST NOTIFICATION
========================================================== */

#saves_toast {
    position: fixed;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(20,18,16,.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--frost-25);
    border-radius: 14px;
    padding: 12px 20px;
    color: var(--text-primary);
    font-family: 'welcomefont', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease, transform .4s cubic-bezier(.22,1,.36,1);
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 12px 40px rgba(0,0,0,.5);
    white-space: nowrap;
}

#saves_toast.toast--visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

#saves_toast .toast_icon { font-size: 16px; }

/* ==========================================================
   ACCOUNT SETTINGS PANEL
   Full-screen overlay with sidebar navigation
========================================================== */

#settings_page {
    position: fixed;
    inset: 0;
    z-index: 100000;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s cubic-bezier(.22,1,.36,1), visibility .5s ease;
    isolation: isolate;
}

#settings_page.settings_page--open {
    opacity: 1;
    visibility: visible;
}

#settings_page .overlay_page_bg {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse at 20% 30%, var(--gold-faint) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 70%, var(--frost-04) 0%, transparent 50%),
        linear-gradient(160deg, #0d0b09 0%, #131110 40%, #0e0c0b 100%);
    z-index: 0;
}

#settings_page_inner {
    position: relative;
    z-index: 2;
    min-height: 100%;
    transform: translateY(30px);
    transition: transform .5s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}

#settings_page.settings_page--open #settings_page_inner {
    transform: translateY(0);
}

/* Layout: sidebar + content */
.settings_layout {
    display: flex;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 24px 60px;
    min-height: calc(100vh - 80px);
}

/* ── Sidebar ── */
.settings_sidebar {
    position: sticky;
    top: 80px;
    align-self: flex-start;
    width: 180px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 24px;
    margin-right: 24px;
    border-right: 1px solid var(--frost-08);
}

.settings_tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--frost-50);
    font-family: 'welcomefont', Georgia, serif;
    font-size: 13px;
    letter-spacing: .04em;
    cursor: pointer;
    transition: all .2s ease;
    text-align: left;
}

.settings_tab:hover {
    color: var(--frost-80);
    background: var(--cream-06);
}

.settings_tab.active {
    color: var(--text-primary);
    background: var(--cream-08);
    border-color: var(--frost-12);
}

.settings_tab svg { flex-shrink: 0; opacity: .6; }
.settings_tab.active svg { opacity: 1; }

.settings_tab--danger { color: rgba(232,93,122,.5); }
.settings_tab--danger:hover { color: rgba(232,93,122,.8); background: rgba(232,93,122,.06); }
.settings_tab--danger.active { color: rgba(232,93,122,.9); background: rgba(232,93,122,.08); border-color: rgba(232,93,122,.15); }

/* ── Content ── */
.settings_content {
    flex: 1;
    min-width: 0;
}

.settings_panel {
    display: none;
    animation: settingsFadeIn .35s ease;
}

.settings_panel.active { display: block; }

@keyframes settingsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.settings_section_title {
    font-family: 'welcomefont', Georgia, serif;
    font-size: 20px;
    letter-spacing: 2px;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.settings_section_title--danger { color: rgba(232,93,122,.85); }

.settings_section_desc {
    font-size: 13px;
    color: var(--frost-45);
    margin: 0 0 28px;
    line-height: 1.5;
}

/* ── Avatar Section ── */
.settings_avatar_section {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 24px;
    background: rgba(255,255,255,.03);
    border: 1px solid var(--frost-10);
    border-radius: 16px;
    margin-bottom: 28px;
}

.settings_avatar_wrap {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 50%;
}

.settings_avatar_svg,
.settings_avatar_img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--frost-50);
    transition: border-color .3s, filter .3s;
}

.settings_avatar_img {
    position: absolute;
    top: 0; left: 0;
}

.settings_avatar_wrap:hover .settings_avatar_svg,
.settings_avatar_wrap:hover .settings_avatar_img {
    border-color: var(--text-primary);
    filter: brightness(.75);
}

.settings_avatar_overlay {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(15,14,12,.55);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    opacity: 0;
    transition: opacity .25s;
    pointer-events: none;
}

.settings_avatar_overlay span {
    font-family: 'welcomefont', Georgia, serif;
    font-size: 9px;
    letter-spacing: .06em;
    color: var(--frost-80);
    text-transform: uppercase;
}

.settings_avatar_wrap:hover .settings_avatar_overlay { opacity: 1; }

.settings_avatar_ring {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s;
}

.settings_avatar_ring.uploading {
    opacity: 1;
    animation: avatarRingSpin 1s linear infinite;
    background: conic-gradient(var(--cream) 0%, transparent 40%);
    mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}

.settings_avatar_info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings_avatar_label {
    font-family: 'welcomefont', Georgia, serif;
    font-size: 14px;
    color: var(--text-primary);
    letter-spacing: .04em;
}

.settings_avatar_hint {
    font-size: 12px;
    color: var(--frost-35);
}

.settings_avatar_actions {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

#settings_avatar_input { display: none; }

/* ── Preview ── */
.settings_preview_area {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 16px 20px;
    background: rgba(201,169,110,.06);
    border: 1px solid var(--gold-subtle);
    border-radius: 12px;
    margin-bottom: 28px;
    animation: settingsFadeIn .3s ease;
}

.settings_preview_img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--gold-dim);
}

.settings_preview_actions {
    display: flex;
    gap: 8px;
}

/* ── Fields ── */
.settings_field {
    margin-bottom: 22px;
}

.settings_label {
    display: block;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold-dim);
    margin-bottom: 8px;
}

.settings_input {
    width: 100%;
    background: rgba(255,255,255,.05);
    border: 1px solid var(--frost-15);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-primary);
    outline: none;
    transition: border-color .2s, box-shadow .2s;
}

.settings_input::placeholder { color: var(--frost-25); }

.settings_input:focus {
    border-color: var(--gold-dim);
    box-shadow: 0 0 0 3px var(--gold-subtle);
}

.settings_input--readonly {
    opacity: .6;
    cursor: not-allowed;
}

.settings_input_row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.settings_input_row .settings_input { flex: 1; }

.settings_hint {
    display: block;
    font-size: 11px;
    color: var(--frost-30);
    margin-top: 6px;
}

.settings_error {
    display: block;
    font-size: 12px;
    color: rgba(232,93,122,.85);
    margin-top: 6px;
    min-height: 0;
    transition: all .2s;
}

.settings_error:empty { display: none; }

/* ── Buttons ── */
.settings_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(135deg, var(--gold), #b8955a);
    color: #0d0b09;
    border: none;
    border-radius: 10px;
    font-family: 'welcomefont', Georgia, serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: opacity .2s, transform .15s;
    min-width: 140px;
}

.settings_btn:hover { opacity: .9; transform: translateY(-1px); }
.settings_btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

.settings_btn--danger {
    background: rgba(180,60,60,.2);
    border: 1px solid rgba(180,60,60,.3);
    color: #e88;
}

.settings_btn--danger:hover { background: rgba(180,60,60,.35); }

.settings_btn_sm {
    display: inline-flex;
    align-items: center;
    padding: 7px 16px;
    background: var(--cream-08);
    border: 1px solid var(--frost-15);
    border-radius: 8px;
    color: var(--frost-70);
    font-family: 'welcomefont', Georgia, serif;
    font-size: 11px;
    letter-spacing: .06em;
    cursor: pointer;
    transition: all .2s;
}

.settings_btn_sm:hover { background: var(--cream-14); color: var(--text-primary); }

.settings_btn_sm--danger {
    color: rgba(232,93,122,.7);
    border-color: rgba(232,93,122,.2);
}

.settings_btn_sm--danger:hover {
    background: rgba(232,93,122,.1);
    color: rgba(232,93,122,.9);
}

.settings_btn_sm--ghost {
    background: transparent;
    border-color: var(--frost-12);
    color: var(--frost-50);
}

.settings_btn_sm--ghost:hover { background: var(--cream-06); color: var(--text-primary); }

.settings_btn_spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(13,11,9,.2);
    border-top-color: #0d0b09;
    border-radius: 50%;
    animation: settingsSpin .6s linear infinite;
}

.settings_btn--danger .settings_btn_spinner {
    border-color: rgba(232,93,122,.2);
    border-top-color: #e88;
}

@keyframes settingsSpin { to { transform: rotate(360deg); } }

/* ── Password Strength ── */
.pw_strength {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
}

.pw_strength_bar {
    flex: 1;
    height: 3px;
    border-radius: 2px;
    background: var(--cream-10);
    transition: background .3s;
}

.pw_strength_bar.active.weak    { background: rgba(180,60,60,.6); }
.pw_strength_bar.active.fair    { background: rgba(200,160,80,.6); }
.pw_strength_bar.active.good    { background: rgba(120,180,100,.6); }
.pw_strength_bar.active.strong  { background: rgba(80,160,100,.8); }

.pw_strength_text {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    min-width: 48px;
    text-align: right;
    transition: color .3s;
}

.pw_strength_text.weak   { color: rgba(180,60,60,.8); }
.pw_strength_text.fair   { color: rgba(200,160,80,.8); }
.pw_strength_text.good   { color: rgba(120,180,100,.8); }
.pw_strength_text.strong { color: rgba(80,160,100,1); }

.pw_requirements {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    margin-top: 8px;
    font-size: 11px;
    color: var(--frost-30);
}

.pw_requirements span { transition: color .2s; }
.pw_requirements span.met { color: rgba(80,160,100,.8); }

/* ── Danger Zone ── */
.settings_danger_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 24px;
    background: rgba(180,60,60,.04);
    border: 1px solid rgba(180,60,60,.15);
    border-radius: 14px;
}

.settings_danger_info h4 {
    font-family: 'welcomefont', Georgia, serif;
    font-size: 15px;
    color: rgba(232,93,122,.85);
    margin: 0 0 4px;
    letter-spacing: 1px;
}

.settings_danger_info p {
    font-size: 12px;
    color: var(--frost-40);
    margin: 0;
    line-height: 1.5;
}

.settings_delete_confirm {
    margin-top: 20px;
    padding: 24px;
    background: rgba(180,60,60,.06);
    border: 1px solid rgba(180,60,60,.2);
    border-radius: 14px;
    animation: settingsFadeIn .3s ease;
}

.settings_delete_warning {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: rgba(232,93,122,.8);
    margin: 0 0 18px;
    line-height: 1.5;
}

.settings_delete_warning svg { flex-shrink: 0; margin-top: 2px; }

.settings_delete_actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 18px;
}

/* ── Responsive: Tablet ── */
@media (max-width: 768px) {
    .settings_layout {
        flex-direction: column;
        padding: 0 16px 40px;
    }

    .settings_sidebar {
        position: static;
        flex-direction: row;
        width: 100%;
        padding-right: 0;
        margin-right: 0;
        border-right: none;
        border-bottom: 1px solid var(--frost-08);
        padding-bottom: 12px;
        margin-bottom: 24px;
        overflow-x: auto;
        gap: 4px;
    }

    .settings_tab {
        white-space: nowrap;
        font-size: 12px;
        padding: 8px 12px;
    }

    .settings_avatar_section {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }

    .settings_avatar_actions { justify-content: center; }

    .settings_danger_card {
        flex-direction: column;
        text-align: center;
    }

    .settings_delete_actions { justify-content: center; }
}

/* ── Responsive: Phone ── */
@media (max-width: 480px) {
    #settings_page_inner { padding-top: 0; }

    .settings_layout { padding: 0 12px 30px; }

    .settings_sidebar { gap: 2px; }

    .settings_tab svg { display: none; }

    .settings_avatar_wrap { width: 72px; height: 72px; }
    .settings_avatar_svg,
    .settings_avatar_img { width: 72px; height: 72px; }

    .settings_input { font-size: 16px; padding: 11px 14px; }

    .settings_btn { width: 100%; }

    .settings_input_row { flex-direction: column; gap: 8px; }
    .settings_input_row .settings_btn_sm { width: 100%; justify-content: center; }

    .settings_preview_area {
        flex-direction: column;
        text-align: center;
    }
}

/* ==========================================================
   HIGHLIGHT PULSE — when navigating from Saves
========================================================== */

@keyframes highlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(232,93,122,.4); border-color: rgba(232,93,122,.4); }
    40%  { box-shadow: 0 0 0 12px rgba(232,93,122,.0); }
    100% { box-shadow: 0 0 0 0 rgba(232,93,122,0); border-color: rgba(244,227,178,.1); }
}

.poem_card_inner.highlight_pulse { animation: highlightPulse 1.6s ease forwards; }
.date_card.highlight_pulse        { animation: highlightPulse 1.6s ease forwards; }
.fav_item.highlight_pulse { animation: highlightPulse 1.2s ease forwards; background: rgba(232,93,122,.06); border-radius: 8px; }


/* ==========================================================
   CURSOR ENGINE — Premium Custom Cursor System
   Ring + dot + ambient glow, magnetic, context-aware
========================================================== */

/* Hide native cursor globally when custom cursor is active */
.px-cursor-active,
.px-cursor-active * {
    cursor: none !important;
}

/* Text inputs keep native cursor for typing UX */
.px-cursor-active input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
.px-cursor-active textarea,
.px-cursor-active [contenteditable="true"] {
    cursor: text !important;
}

/* ——— Ambient Glow ——— */
.px-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(201,169,110,.06) 0%,
        rgba(201,169,110,.025) 35%,
        transparent 70%);
    pointer-events: none;
    z-index: 999990;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0);
    opacity: 0;
    transition: opacity .7s ease;
}
.px-cursor-glow.visible { opacity: 1; }

/* ——— Outer Ring ——— */
.px-cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid rgba(201,169,110,.4);
    background: transparent;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
    opacity: 0;
    transition:
        width .42s cubic-bezier(.22,1,.36,1),
        height .42s cubic-bezier(.22,1,.36,1),
        border-color .35s ease,
        border-width .35s ease,
        background .35s ease,
        border-radius .35s ease,
        opacity .35s ease;
}
.px-cursor-ring.visible { opacity: 1; }

/* ——— Inner Dot ——— */
.px-cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #c9a96e;
    pointer-events: none;
    z-index: 999999;
    will-change: transform;
    transform: translate3d(-200px, -200px, 0) translate(-50%, -50%);
    opacity: 0;
    transition:
        width .32s cubic-bezier(.22,1,.36,1),
        height .32s cubic-bezier(.22,1,.36,1),
        background .3s ease,
        opacity .3s ease;
}
.px-cursor-dot.visible { opacity: 1; }

/* ─── Hover State ─── */
.px-cursor-ring.hovering {
    width: 44px;
    height: 44px;
    border-color: rgba(201,169,110,.72);
    background: rgba(201,169,110,.05);
}
.px-cursor-dot.hovering {
    width: 3px;
    height: 3px;
    background: rgba(201,169,110,.55);
}

/* ─── Text State ─── */
.px-cursor-ring.text-mode {
    width: 2px;
    height: 28px;
    border-radius: 1px;
    border-color: rgba(201,169,110,.85);
    border-width: 1px;
    background: rgba(201,169,110,.85);
}
.px-cursor-dot.text-mode {
    width: 0;
    height: 0;
    opacity: 0;
}

/* ─── Media State ─── */
.px-cursor-ring.media-mode {
    width: 52px;
    height: 52px;
    border-color: rgba(201,169,110,.65);
    border-width: 2px;
    background: rgba(201,169,110,.04);
}
.px-cursor-dot.media-mode {
    width: 8px;
    height: 8px;
    background: rgba(201,169,110,.7);
}

/* ─── Click Ripple ─── */
.px-cursor-ripples {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 999998;
    overflow: visible;
}
.px-cursor-ripple {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid rgba(201,169,110,.45);
    transform: translate(-50%,-50%) scale(0);
    animation: pxRipple .65s cubic-bezier(.22,1,.36,1) forwards;
    pointer-events: none;
}
@keyframes pxRipple {
    0%   { width: 0; height: 0; opacity: .55; transform: translate(-50%,-50%) scale(0); }
    100% { width: 80px; height: 80px; opacity: 0; transform: translate(-50%,-50%) scale(1); }
}

/* ─── Reduced Motion ─── */
@media (prefers-reduced-motion: reduce) {
    .px-cursor-ring,
    .px-cursor-dot {
        transition: opacity .12s ease !important;
    }
    .px-cursor-glow {
        transition: opacity .12s ease !important;
    }
    .px-cursor-ripple {
        animation-duration: .15s !important;
    }
}

/* ─── Touch Devices — no custom cursor ─── */
@media (hover: none) and (pointer: coarse) {
    .px-cursor-ring,
    .px-cursor-dot,
    .px-cursor-glow,
    .px-cursor-ripples {
        display: none !important;
    }
    .px-cursor-active,
    .px-cursor-active * {
        cursor: auto !important;
    }
    .px-cursor-active input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
    .px-cursor-active textarea,
    .px-cursor-active [contenteditable="true"] {
        cursor: text !important;
    }
}


/* ==========================================================
   PAGE TRANSITIONS — Fast fade+slide, ~280ms
========================================================== */

/* Exit: page fades out quickly */
html.px-exiting {
    transition: opacity .28s ease-out;
    opacity: 0;
}

/* Entrance: page starts hidden, fades in */
html.px-entering {
    opacity: 0;
    transition: none;
}

html.px-entered {
    transition: opacity .28s ease-in;
    opacity: 1;
}

/* Reduced motion: instant switch */
@media (prefers-reduced-motion: reduce) {
    html.px-exiting,
    html.px-entered {
        transition: opacity .08s ease !important;
    }
}


/* ==========================================================
   Breakpoints:
     1200px  Large tablet / small desktop
      900px  Tablet landscape
      768px  Tablet portrait
      640px  Large phone landscape
      480px  Phone portrait
      360px  Small phone
   ══════════════════════════════════════════════════════════
========================================================== */

/* ──────────────────────────────────────────────────────────
   GLOBAL TOUCH & ACCESSIBILITY HELPERS
────────────────────────────────────────────────────────── */

/* Prevent text-size inflation on iOS rotation */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Improve tap target sizes on touch devices */
@media (hover: none) and (pointer: coarse) {
    button, a, [role="button"] {
        min-height: 44px;
        min-width: 44px;
    }
    /* Disable hover-only effects on touch screens */
    .mainpage_menu_item:hover .mainpage_text { opacity: 0; }
    .mainpage_menu_item:hover .mainpage_icon { transform: none; }
    /* Show labels always in touch mode (text is hidden by default) */
    .mainpage_side_menu .mainpage_text { display: none; }
}

/* ──────────────────────────────────────────────────────────
   WELCOME PAGE — index.htm
────────────────────────────────────────────────────────── */

/* ≤ 1200px */
@media (max-width: 1200px) {
    #welcome_header {
        outline: 20px solid black;
    }
}

/* ≤ 900px */
@media (max-width: 900px) {
    #morena_div {
        letter-spacing: 6px;
        top: 22%;
    }
    #welcome_description {
        top: 75%;
        font-size: clamp(14px, 2.5vw, 18px);
    }
    #welcome_button {
        top: 56%;
    }
}

/* ≤ 768px */
@media (max-width: 768px) {
    #welcome_page_body {
        overflow: hidden;
    }
    #welcome_header {
        outline: 10px solid black;
        height: 100%;
    }
    #morena_div {
        font-size: clamp(52px, 14vw, 120px);
        letter-spacing: 5px;
        top: 20%;
        white-space: nowrap;
    }
    #welcome_description {
        top: 72%;
        padding: 10px 16px;
        font-size: clamp(13px, 3vw, 17px);
        width: 95%;
    }
    .reveal_line {
        min-width: 10px;
        margin: 0 8px;
    }
    #welcome_button {
        top: 55%;
        width: clamp(130px, 35vw, 180px);
        height: 50px;
        font-size: 20px;
        border-radius: 14px;
    }
    #welcome_footer {
        font-size: 11px;
        letter-spacing: 1.5px;
    }
    /* Dropdown adjustments */
    .wel_dropdown {
        padding: 10px;
    }
}

/* ≤ 640px */
@media (max-width: 640px) {
    #morena_div {
        font-size: clamp(44px, 15vw, 80px);
        letter-spacing: 4px;
        top: 18%;
    }
    #welcome_description {
        top: 70%;
        font-size: 13px;
        padding: 8px 12px;
        width: 96%;
    }
    .reveal_line {
        display: none;
    }
    #welcome_button {
        top: 53%;
        width: clamp(120px, 38vw, 160px);
        height: 46px;
        font-size: 18px;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    #morena_div {
        font-size: clamp(38px, 16vw, 70px);
        letter-spacing: 3px;
        top: 17%;
    }
    #welcome_description {
        top: 68%;
        font-size: 12px;
        letter-spacing: 0.02em;
    }
    #welcome_button {
        top: 52%;
        width: clamp(110px, 40vw, 150px);
        height: 44px;
        font-size: 17px;
        border-radius: 12px;
    }
    #welcome_footer {
        font-size: 10px;
        letter-spacing: 1px;
        bottom: 10px;
    }
    #loading_logo {
        font-size: clamp(32px, 12vw, 60px);
        letter-spacing: clamp(3px, 1.5vw, 8px);
    }
    .cinematic_bar {
        height: 50px;
    }
}

/* ≤ 360px — Small phones */
@media (max-width: 360px) {
    #morena_div {
        font-size: 36px;
        letter-spacing: 2px;
        top: 16%;
    }
    #welcome_description {
        top: 66%;
        font-size: 11px;
    }
    #welcome_button {
        top: 50%;
        width: 110px;
        height: 42px;
        font-size: 16px;
    }
    .wel_dropbtn {
        width: 40px;
        height: 40px;
    }
    .line { width: 20px; height: 3px; }
}

/* ──────────────────────────────────────────────────────────
   MAIN PAGE — main_page.htm
   Filling gaps in the existing responsive blocks
────────────────────────────────────────────────────────── */

/* ≤ 1200px — Header title reflow */
@media (max-width: 1200px) {
    .mainpage_head_title {
        width: 22%;
        font-size: clamp(28px, 4.5vw, 64px);
    }
    .memory_panel {
        width: 92%;
    }
    .intro_wrapper {
        gap: 50px;
    }
}

/* ≤ 900px — already handled in existing CSS, extended here */
@media (max-width: 900px) {
    .main_intro {
        min-height: auto;
        padding: 60px 0;
    }
    .intro_left h2 {
        font-size: clamp(28px, 4.5vw, 48px);
    }
    .intro_left p {
        font-size: clamp(18px, 3vw, 24px);
    }
    #mainpage_footer .footer_inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .footer_col--brand {
        grid-column: 1 / -1;
    }
}

/* ≤ 768px — already partially handled, extended */
@media (max-width: 768px) {
    #mainpage_header {
        border-bottom-left-radius: 24px;
        border-bottom-right-radius: 24px;
    }

    /* Memory panel full restructure */
    .memory_panel {
        width: 94%;
        margin: 10px auto 40px;
        border-radius: 18px;
        padding: 18px 16px;
    }
    .user_avatar {
        width: 56px;
        height: 56px;
    }
    .user_info h3 {
        font-size: 20px;
    }
    .saves_btn {
        padding: 8px 14px;
        font-size: 13px;
    }

    /* Intro section */
    .intro_left h2 {
        font-size: clamp(26px, 5vw, 40px);
    }

    /* Overlay headers */
    .overlay_header {
        padding: 16px 20px;
        gap: 12px;
    }
    .overlay_title {
        font-size: clamp(16px, 3.5vw, 24px);
        letter-spacing: 2px;
    }
    .overlay_back_btn {
        font-size: 13px;
        padding: 7px 12px;
    }
    .overlay_title_ornament {
        font-size: 14px;
    }

    /* Saves container */
    .saves_container {
        padding: 40px 16px 80px;
    }
    .save_card {
        gap: 12px;
        padding: 16px 16px;
    }
    .save_card_navigate {
        display: none;    /* hide on mobile to save space */
    }

    /* Music panel full width on mobile — reinforcing existing rule */
    .music_panel {
        width: 100vw;
        right: -100vw;
        padding: 20px 16px 16px;
    }

    /* Footer full width adjustments */
    #mainpage_footer .footer_inner {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 5% 36px;
    }
    .footer_col--brand {
        grid-column: auto;
        text-align: center;
    }
    .footer_divider { margin: 0 auto 20px; }
    .footer_social_row { justify-content: center; }
    .footer_link_list { align-items: center; }
    .footer_col_title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    .footer_stat_grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ≤ 640px */
@media (max-width: 640px) {
    /* Header */
    #mainpage_header {
        border-bottom-left-radius: 16px;
        border-bottom-right-radius: 16px;
    }
    .mainpage_head_title {
        width: 70%;
        font-size: clamp(22px, 6vw, 38px);
    }
    #mainpage_scroll_txt {
        font-size: 12px;
        top: 0.5%;
    }

    /* Memory panel — stack tighter */
    .memory_panel {
        gap: 14px;
        padding: 16px 14px;
    }
    .user_section {
        gap: 12px;
    }
    .user_avatar {
        width: 48px;
        height: 48px;
    }
    .user_info h3 {
        font-size: 18px;
    }

    /* Side menu: already moved to bottom bar at 768, make icons smaller */
    .mainpage_icon svg {
        width: clamp(22px, 5vw, 30px);
        height: clamp(22px, 5vw, 30px);
    }
    .mainpage_side_menu {
        gap: 10px;
        padding: 8px 14px;
    }

    /* Intro */
    .intro_wrapper {
        width: 94%;
        gap: 30px;
    }
    .intro_left h2 {
        font-size: clamp(24px, 6vw, 36px);
        margin-bottom: 14px;
    }
    .intro_left p {
        font-size: clamp(16px, 4vw, 22px);
    }
    .intro_badges span {
        font-size: 11px;
        padding: 5px 10px;
    }

    /* Poems & Dates */
    .poems_container {
        padding: 30px 14px 70px;
        gap: 28px;
    }
    .poem_card_inner {
        padding: 26px 20px;
    }
    .poem_title {
        font-size: clamp(18px, 5vw, 26px);
    }

    /* Dates */
    .dates_timeline {
        padding: 30px 14px 70px;
    }
    .date_entry {
        grid-template-columns: 30px 1fr;
        gap: 0 12px;
        margin-bottom: 40px;
    }
    .date_dot {
        width: 14px;
        height: 14px;
        margin-top: 22px;
    }
    .date_card_content {
        padding: 18px 16px 22px;
    }
    .date_card_image_wrap {
        height: 140px;
    }

    /* Saves */
    .saves_container {
        padding: 30px 14px 70px;
    }

    /* Mini music bar */
    .mini_bar_title { font-size: 13px; }
    .mini_bar_artist { font-size: 11px; }

    /* Warning popup */
    .modal_box--warning {
        padding: 32px 22px;
        gap: 16px;
    }
    .warning_title {
        font-size: clamp(18px, 5vw, 22px);
    }

    /* Saves toast */
    #saves_toast {
        width: calc(100vw - 32px);
        white-space: normal;
        text-align: center;
        justify-content: center;
        font-size: 13px;
    }
}

/* ≤ 480px */
@media (max-width: 480px) {
    /* Header */
    .mainpage_head_title {
        width: 80%;
        font-size: clamp(20px, 6.5vw, 32px);
        top: 48%;
    }

    /* Memory panel — single column */
    .memory_panel {
        padding: 14px 12px;
        gap: 12px;
        border-radius: 14px;
    }
    .user_info h3 { font-size: 16px; }
    .user_label   { font-size: 11px; }
    .counter_label { font-size: 11px; }
    #daysCounter { font-size: 28px; }

    /* Intro */
    .intro_left h2 { font-size: clamp(22px, 7vw, 30px); }
    .intro_left p  { font-size: clamp(15px, 4.5vw, 20px); }

    /* Music player */
    .music_header h2 { font-size: 18px; }
    .custom_player { padding: 12px 10px; gap: 10px; }
    .player_volume_area { display: none; }
    .player_btn { width: 34px; height: 34px; }
    .player_btn_main { width: 46px; height: 46px; }
    .music_vinyl_disc { display: none; }
    .player_cover_wrap { display: block; }
    .music_visualizer { height: 36px; }

    /* Modal */
    .modal_box {
        border-radius: 20px;
    }
    .modal_header {
        padding: 18px 18px 14px;
    }
    .modal_body {
        padding: 18px 16px 24px;
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Overlay header */
    .overlay_back_btn span { display: none; } /* hide text, keep arrow */
    .overlay_back_btn {
        padding: 8px 10px;
        min-width: 36px;
        justify-content: center;
    }

    /* Poems */
    .poem_card_inner { padding: 22px 16px; }
    .poem_body p { font-size: clamp(14px, 3.8vw, 16px); }

    /* Dates */
    .date_entry {
        grid-template-columns: 28px 1fr;
        gap: 0 10px;
    }
    .date_card_image_wrap { height: 120px; }

    /* Footer */
    .footer_stat_grid { grid-template-columns: 1fr; }
    .footer_stat_card { padding: 18px 20px; }
    #mainpage_footer .footer_inner { padding: 36px 4% 30px; }
    .footer_bottom { padding: 0 4% 20px; }
}

/* ≤ 360px */
@media (max-width: 360px) {
    /* Header */
    .mainpage_head_title {
        font-size: 18px;
        width: 88%;
    }

    /* Side menu shrinks further */
    .mainpage_side_menu {
        gap: 8px;
        padding: 6px 10px;
    }
    .mainpage_icon svg {
        width: 20px;
        height: 20px;
    }

    /* Memory panel ultra-compact */
    .memory_panel {
        padding: 12px 10px;
    }
    .user_avatar { width: 42px; height: 42px; }
    .user_info h3 { font-size: 15px; }

    /* Music panel text */
    .music_card_info h4 { font-size: 13px; }
    .music_card_info p  { font-size: 11px; }

    /* Poems */
    .poem_card_inner { padding: 18px 14px; }
    .poem_title { font-size: 18px; }

    /* Dates */
    .date_entry { grid-template-columns: 24px 1fr; gap: 0 8px; }
    .date_dot { width: 12px; height: 12px; }

    /* Saves */
    .saves_container { padding: 24px 10px 60px; }
    .save_card { padding: 14px 12px; gap: 10px; }

    /* Footer */
    .footer_logo_text,
    .footer_logo_glow {
        font-size: clamp(26px, 9vw, 38px);
        letter-spacing: 6px;
    }
}

/* ──────────────────────────────────────────────────────────
   AUTH PAGES — signin.html & signup.html
   The card already uses min(420px,92vw) so it scales.
   These rules refine inner spacing and type sizes.
────────────────────────────────────────────────────────── */

/* ≤ 480px */
@media (max-width: 480px) {
    .auth_card {
        padding: 36px 24px 32px !important;
    }
    .auth_logo_text {
        font-size: clamp(24px, 10vw, 36px) !important;
    }
    .auth_logo_ornament {
        font-size: 11px !important;
    }
    .auth_input {
        padding: 11px 13px !important;
        font-size: 16px !important; /* prevents iOS zoom */
    }
    .auth_submit {
        padding: 13px !important;
        font-size: 12px !important;
    }
    .auth_heading {
        font-size: 16px !important;
    }
    .auth_back {
        top: 14px !important;
        left: 14px !important;
    }
    /* Strength bar label */
    #strength_label { font-size: 9px !important; }
}

/* ≤ 360px */
@media (max-width: 360px) {
    .auth_card {
        padding: 28px 16px 24px !important;
        border-radius: 1px !important;
    }
    .auth_label {
        font-size: 10px !important;
    }
    .auth_input {
        padding: 10px 11px !important;
    }
    .auth_submit {
        margin-top: 18px !important;
    }
    .auth_footer {
        font-size: 12px !important;
    }
}

/* ──────────────────────────────────────────────────────────
   LANDSCAPE PHONE  (height-constrained)
   When phone is rotated: allow scrolling, compress heights.
────────────────────────────────────────────────────────── */

@media (max-height: 500px) and (orientation: landscape) {
    /* Welcome page */
    #welcome_page_body { overflow-y: auto; }
    #welcome_header { height: 100%; min-height: 300px; }
    #morena_div {
        font-size: clamp(40px, 10vh, 80px);
        top: 18%;
    }
    #welcome_description {
        top: 62%;
        font-size: 12px;
    }
    #welcome_button {
        top: 48%;
        height: 40px;
        font-size: 16px;
    }

    /* Auth pages — allow scroll */
    #auth_page_body {
        align-items: flex-start !important;
        overflow-y: auto !important;
        padding: 20px 0 !important;
    }
    .auth_card {
        margin: 0 auto !important;
        padding: 28px 28px 24px !important;
    }
    .auth_logo { margin-bottom: 20px !important; }

    /* Main page header — don't lock at 100vh */
    #mainpage_header { height: 90vh; }

    /* Music panel */
    .music_panel { padding: 14px 16px; }
    .music_list  { max-height: 40vh; }
    .custom_player { padding: 10px; gap: 8px; }
    .music_visualizer { height: 32px; }
}

/* ──────────────────────────────────────────────────────────
   LARGE SCREENS — 1400px+
   Ensure max-widths don't over-stretch.
────────────────────────────────────────────────────────── */

@media (min-width: 1400px) {
    .intro_wrapper { max-width: 1280px; }
    .memory_panel  { max-width: 1200px; }
    #mainpage_footer .footer_inner { padding: 80px 10% 60px; }
}

/* ──────────────────────────────────────────────────────────
   SAFE AREA INSETS — iPhone notch / home bar
────────────────────────────────────────────────────────── */

@supports (padding: env(safe-area-inset-bottom)) {
    .mini_music_bar { 
        bottom: calc(-90px - env(safe-area-inset-bottom));
    }
    .mini_music_bar.visible {
        bottom: calc(12px + env(safe-area-inset-bottom));
    }
    .mainpage_side_menu {
        bottom: calc(90px + env(safe-area-inset-bottom));
    }
    #welcome_footer {
        bottom: calc(15px + env(safe-area-inset-bottom));
    }
    #saves_toast {
        bottom: calc(100px + env(safe-area-inset-bottom));
    }
    .auth_card { 
        margin-bottom: env(safe-area-inset-bottom);
    }
}

/* ──────────────────────────────────────────────────────────
   PRINT — minimal, readable
────────────────────────────────────────────────────────── */

@media print {
    #loading_screen,
    #mouse_glow,
    .px-cursor-ring,
    .px-cursor-dot,
    .px-cursor-glow,
    .px-cursor-ripples,
    .music_panel,
    .mini_music_bar,
    .music_dynamic_bg,
    .music_vinyl_disc,
    .music_visualizer,
    .mainpage_side_menu,
    .more_dropdown,
    #bg-canvas,
    #shooting-stars,
    .sky-flash,
    .auth_back,
    .wel_dropdown { display: none !important; }

    body {
        background: white !important;
        color: black !important;
    }
    .poem_body p, .date_desc {
        color: #333 !important;
    }
}

/* ==========================================================
   SCROLL ENGINE — Progress Bar
   Thin gold bar at top of viewport showing scroll progress
========================================================== */

.scroll_progress_bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--gold-dim), var(--gold));
    transform-origin: left center;
    transform: scaleX(0);
    z-index: 99999;
    pointer-events: none;
    will-change: transform;
}

/* ==========================================================
   SCROLL ENGINE — Vertical Timeline Navigation
   Fixed right-side dot navigation with labels
========================================================== */

.scroll_timeline {
    position: fixed;
    right: 28px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 24px;
    z-index: 9998;
    pointer-events: auto;
}

.scroll_timeline_dot {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    outline: none;
    flex-direction: row-reverse;
}

.scroll_timeline_pip {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--frost-25);
    border: 1.5px solid var(--frost-35);
    transition: all .4s cubic-bezier(.22,1,.36,1);
    flex-shrink: 0;
    position: relative;
}

.scroll_timeline_pip::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1px solid transparent;
    transition: border-color .4s ease;
}

.scroll_timeline_label {
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--frost-35);
    opacity: 0;
    transform: translateX(6px);
    transition: all .35s cubic-bezier(.22,1,.36,1);
    white-space: nowrap;
    pointer-events: none;
}

.scroll_timeline_dot:hover .scroll_timeline_label {
    opacity: 1;
    transform: translateX(0);
}

.scroll_timeline_dot:hover .scroll_timeline_pip {
    background: var(--frost-50);
    border-color: var(--frost-50);
    transform: scale(1.3);
}

.scroll_timeline_dot--active .scroll_timeline_pip {
    background: var(--gold);
    border-color: var(--gold);
    box-shadow: 0 0 12px var(--gold-dim), 0 0 24px var(--gold-subtle);
    transform: scale(1.4);
}

.scroll_timeline_dot--active .scroll_timeline_pip::after {
    border-color: var(--gold-subtle);
}

.scroll_timeline_dot--active .scroll_timeline_label {
    opacity: 1;
    transform: translateX(0);
    color: var(--gold);
}

/* ==========================================================
   SCROLL ENGINE — Scroll-Triggered Animation States
   Hardware-accelerated (transform + opacity only)
========================================================== */

/* --- base hidden state --- */
.sr-fade,
.sr-slide-up,
.sr-slide-left,
.sr-slide-right,
.sr-scale,
.sr-blur {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity .9s cubic-bezier(.22,1,.36,1),
                transform .9s cubic-bezier(.22,1,.36,1),
                filter .9s cubic-bezier(.22,1,.36,1);
}

.sr-slide-up    { transform: translateY(50px); }
.sr-slide-left  { transform: translateX(-40px); }
.sr-slide-right { transform: translateX(40px); }
.sr-scale       { transform: scale(0.92); }
.sr-blur        { filter: blur(8px); }

/* combine: sr-blur + sr-slide-up */
.sr-blur.sr-slide-up { filter: blur(8px); transform: translateY(50px); }

/* --- visible state --- */
.sr-visible,
.sr-fade.sr-visible,
.sr-slide-up.sr-visible,
.sr-slide-left.sr-visible,
.sr-slide-right.sr-visible,
.sr-scale.sr-visible,
.sr-blur.sr-visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
    filter: blur(0);
}

/* --- stagger delays (1–8) --- */
.sr-stagger-1 { transition-delay: .05s; }
.sr-stagger-2 { transition-delay: .12s; }
.sr-stagger-3 { transition-delay: .20s; }
.sr-stagger-4 { transition-delay: .30s; }
.sr-stagger-5 { transition-delay: .42s; }
.sr-stagger-6 { transition-delay: .55s; }
.sr-stagger-7 { transition-delay: .70s; }
.sr-stagger-8 { transition-delay: .88s; }

/* ==========================================================
   SCROLL ENGINE — Section Depth Effects
   Subtle scale + opacity transition on section visibility
========================================================== */

.section--depth {
    transition: transform .8s cubic-bezier(.22,1,.36,1),
                opacity .8s cubic-bezier(.22,1,.36,1);
    will-change: transform, opacity;
}

.section--depth:not(.section--visible) {
    transform: scale(0.985);
    opacity: 0.7;
}

.section--depth.section--visible {
    transform: scale(1);
    opacity: 1;
}

/* ==========================================================
   SCROLL ENGINE — Reduced Motion
   Respect user preference
========================================================== */

@media (prefers-reduced-motion: reduce) {
    .scroll_progress_bar { transition: none !important; }
    .scroll_timeline_pip { transition: none !important; }
    .scroll_timeline_label { transition: none !important; }

    .sr-fade,
    .sr-slide-up,
    .sr-slide-left,
    .sr-slide-right,
    .sr-scale,
    .sr-blur {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }

    .section--depth {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
    }

    .music_vinyl_disc,
    .music_vinyl_disc.spinning {
        animation: none !important;
        transform: translateX(0) rotate(0deg) !important;
        opacity: 1 !important;
        margin-left: 2px !important;
    }

    .music_visualizer {
        opacity: 0.3 !important;
    }

    .music_dynamic_bg {
        transition: none !important;
    }

    .player_cover_wrap {
        transition: none !important;
    }
}

/* ==========================================================
   SCROLL ENGINE — Responsive
========================================================== */

@media (max-width: 768px) {
    .scroll_timeline {
        right: 12px;
        gap: 18px;
    }

    .scroll_timeline_label {
        display: none;
    }

    .scroll_timeline_pip {
        width: 6px;
        height: 6px;
    }

    .scroll_progress_bar {
        height: 2px;
    }
}

@media (max-width: 480px) {
    .scroll_timeline {
        right: 8px;
        gap: 14px;
    }

    .scroll_timeline_pip {
        width: 5px;
        height: 5px;
    }
}