/* ==========================================================
   Home Wallpaper — background + 35 ribbon-path floating
   symbols dancing to a slow music wave.
   Light / Dark mode aware.
   ========================================================== */

body.home-wallpaper-active {
    position: relative;
    background-color: transparent !important;
}

/* ----- Background layer (fixed, behind everything) ----- */
body.home-wallpaper-active::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background-image: url("/assets/design_1/img/home/bg-light.webp");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    will-change: opacity;
    opacity: 1;
    transition: opacity .4s ease;
}

body.home-wallpaper-active.dark-mode::before {
    background-image: url("/assets/design_1/img/home/bg-dark.webp");
}

/* Soft tint so text stays readable on top of the photo */
body.home-wallpaper-active::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.40) 0%, rgba(255, 255, 255, 0.60) 100%);
}

body.home-wallpaper-active.dark-mode::after {
    background: linear-gradient(180deg, rgba(10, 10, 20, 0.45) 0%, rgba(10, 10, 20, 0.65) 100%);
}

/* ----- Floating PNG decoration container ----- */
.home-wallpaper-fx {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.home-wallpaper-fx .fx-symbol {
    position: absolute;
    width: 18px;
    height: auto;
    opacity: 0.45;
    transform-origin: center center;
    will-change: transform, opacity;
    user-select: none;
    /* Slow-music dance — 4s = ~60 BPM, 4 quarter notes per cycle */
    animation: fx-music-dance 4s ease-in-out infinite;
    /* Light mode: re-paint the black PNG to a soft lavender that
       blends with the wallpaper's purple ripples instead of stamping
       hard black on top of them. */
    filter: brightness(0) saturate(100%) invert(82%) sepia(15%) saturate(900%) hue-rotate(232deg) brightness(102%) contrast(96%);
}

/* Symbol #2 reads bigger optically — shrink it down */
.home-wallpaper-fx img[src$="symbol-2.webp"] {
    width: 11px;
}

/* Dark mode: brighten to a soft white-lavender for visibility on dark bg */
body.dark-mode .home-wallpaper-fx .fx-symbol {
    opacity: 0.55;
    filter: brightness(0) saturate(100%) invert(91%) sepia(8%) saturate(600%) hue-rotate(232deg) brightness(105%) contrast(95%);
}

/* ==========================================================
   35 slots covering EVERY part of the ribbon.
   Left side intentionally dense (~20 slots ≤ left 50%).

   animation-delay is derived from each slot's top% so the
   pulse sweeps vertically up the ribbon — slots at the bottom
   (highest top%) start the beat, slots at the top finish it.
   formula: delay ≈ -((100 - top%) / 100) × 4s
   ========================================================== */

/* ── Upper bowl, left & center (14 slots) ── */
.home-wallpaper-fx .fx-1  { top: 15%; left:  5%;  animation-delay: -3.40s; }
.home-wallpaper-fx .fx-2  { top: 12%; left: 12%;  animation-delay: -3.52s; }
.home-wallpaper-fx .fx-3  { top: 14%; left: 20%;  animation-delay: -3.44s; }
.home-wallpaper-fx .fx-4  { top: 15%; left: 28%;  animation-delay: -3.40s; }
.home-wallpaper-fx .fx-5  { top: 17%; left: 36%;  animation-delay: -3.32s; }
.home-wallpaper-fx .fx-6  { top: 20%; left: 45%;  animation-delay: -3.20s; }
.home-wallpaper-fx .fx-7  { top: 22%; left:  8%;  animation-delay: -3.12s; }
.home-wallpaper-fx .fx-8  { top: 24%; left: 16%;  animation-delay: -3.04s; }
.home-wallpaper-fx .fx-9  { top: 25%; left: 24%;  animation-delay: -3.00s; }
.home-wallpaper-fx .fx-10 { top: 27%; left: 32%;  animation-delay: -2.92s; }
.home-wallpaper-fx .fx-11 { top: 28%; left: 40%;  animation-delay: -2.88s; }
.home-wallpaper-fx .fx-12 { top: 32%; left: 10%;  animation-delay: -2.72s; }
.home-wallpaper-fx .fx-13 { top: 35%; left: 20%;  animation-delay: -2.60s; }
.home-wallpaper-fx .fx-14 { top: 38%; left: 30%;  animation-delay: -2.48s; }

/* ── Pinch — where the ribbon crosses (3 slots) ── */
.home-wallpaper-fx .fx-15 { top: 42%; left: 45%;  animation-delay: -2.32s; }
.home-wallpaper-fx .fx-16 { top: 50%; left: 52%;  animation-delay: -2.00s; }
.home-wallpaper-fx .fx-17 { top: 58%; left: 50%;  animation-delay: -1.68s; }

/* ── Lower bowl (11 slots, spread across the wave) ── */
.home-wallpaper-fx .fx-18 { top: 65%; left: 40%;  animation-delay: -1.40s; }
.home-wallpaper-fx .fx-19 { top: 68%; left: 50%;  animation-delay: -1.28s; }
.home-wallpaper-fx .fx-20 { top: 66%; left: 60%;  animation-delay: -1.36s; }
.home-wallpaper-fx .fx-21 { top: 64%; left: 70%;  animation-delay: -1.44s; }
.home-wallpaper-fx .fx-22 { top: 75%; left: 45%;  animation-delay: -1.00s; }
.home-wallpaper-fx .fx-23 { top: 78%; left: 55%;  animation-delay: -0.88s; }
.home-wallpaper-fx .fx-24 { top: 76%; left: 65%;  animation-delay: -0.96s; }
.home-wallpaper-fx .fx-25 { top: 72%; left: 75%;  animation-delay: -1.12s; }
.home-wallpaper-fx .fx-26 { top: 85%; left: 50%;  animation-delay: -0.60s; }
.home-wallpaper-fx .fx-27 { top: 88%; left: 62%;  animation-delay: -0.48s; }
.home-wallpaper-fx .fx-28 { top: 85%; left: 74%;  animation-delay: -0.60s; }

/* ── Right tail rising back up (7 slots) ── */
.home-wallpaper-fx .fx-29 { top: 78%; left: 84%;  animation-delay: -0.88s; }
.home-wallpaper-fx .fx-30 { top: 68%; left: 90%;  animation-delay: -1.28s; }
.home-wallpaper-fx .fx-31 { top: 58%; left: 87%;  animation-delay: -1.68s; }
.home-wallpaper-fx .fx-32 { top: 50%; left: 80%;  animation-delay: -2.00s; }
.home-wallpaper-fx .fx-33 { top: 44%; left: 72%;  animation-delay: -2.24s; }
.home-wallpaper-fx .fx-34 { top: 38%; left: 62%;  animation-delay: -2.48s; }
.home-wallpaper-fx .fx-35 { top: 32%; left: 55%;  animation-delay: -2.72s; }

/* ==========================================================
   Music-dance keyframe — slow, gentle sway like swaying to
   a quiet ballad. scale acts as the "breath", rotation as
   the "lean", and opacity as the "voice rising and falling".
   ========================================================== */
@keyframes fx-music-dance {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(0.88) rotate(-2deg);
        opacity: 0.20;
    }
    25% {
        transform: translate3d(0, -2px, 0) scale(1.06) rotate(1.5deg);
        opacity: 0.50;
    }
    50% {
        transform: translate3d(0, -1px, 0) scale(1.00) rotate(-1deg);
        opacity: 0.38;
    }
    75% {
        transform: translate3d(0, -3px, 0) scale(1.14) rotate(2deg);
        opacity: 0.60;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    .home-wallpaper-fx .fx-symbol { animation: none !important; }
}

/* On small screens — thin the path so it doesn't crowd */
@media (max-width: 768px) {
    .home-wallpaper-fx .fx-symbol { width: 13px; opacity: 0.26; }
    .home-wallpaper-fx img[src$="symbol-2.webp"] { width: 8px; }
    .home-wallpaper-fx .fx-2,
    .home-wallpaper-fx .fx-5,
    .home-wallpaper-fx .fx-8,
    .home-wallpaper-fx .fx-10,
    .home-wallpaper-fx .fx-13,
    .home-wallpaper-fx .fx-19,
    .home-wallpaper-fx .fx-21,
    .home-wallpaper-fx .fx-23,
    .home-wallpaper-fx .fx-25,
    .home-wallpaper-fx .fx-28,
    .home-wallpaper-fx .fx-31,
    .home-wallpaper-fx .fx-33,
    .home-wallpaper-fx .fx-35 { display: none; }
}

/* Make sure landing content sits above the FX overlay */
#app { position: relative; z-index: 1; }