/* ============================================================
   Learn My Dreams — Site FX (background, entry fade, transitions)
   Additive only. Does not modify any existing site rules.
   Link this file on every page you want the effect on:
   <link rel="stylesheet" href="site-fx.css">
   ============================================================ */

/* 1) Smooth cross-page transitions.
   Chrome 126+ / Safari 18.2+ get a cross-fade between pages.
   Firefox and older browsers ignore this safely — normal navigation. */
@view-transition {
    navigation: auto;
}

/* 2) Gentle fade when a page first loads */
body {
    animation: lmdPageEntryFade 0.5s ease-out;
}
@keyframes lmdPageEntryFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 3) Flowing aurora glow behind existing content.
   z-index: -1 (not 0) is the key fix here — it places this fixed
   layer in the "negative stacking" paint step, which is painted
   BEFORE normal static-positioned content (.container, .main-card,
   footer). That's what actually keeps it behind cards/sections/
   text — z-index: 0 was wrong; it painted this layer ABOVE static
   content regardless of its position in the HTML. */
body::before {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
        radial-gradient(circle at 25% 20%, rgba(168, 85, 247, 0.32) 0%, rgba(168, 85, 247, 0.18) 30%, transparent 55%),
        radial-gradient(circle at 75% 75%, rgba(223, 183, 108, 0.26) 0%, rgba(223, 183, 108, 0.12) 30%, transparent 55%),
        radial-gradient(circle at 50% 50%, rgba(96, 80, 200, 0.16) 0%, transparent 60%);
    background-size: 200% 200%;
    animation: lmdNebulaDrift 25s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

@keyframes lmdNebulaDrift {
    0%, 100% { background-position: 0% 0%, 100% 100%, 50% 50%; }
    50%      { background-position: 100% 50%, 0% 50%, 30% 70%; }
}

/* 4) Twinkling starfield — pure CSS, one element, ~70 dots via
   box-shadow. No images, no canvas, no per-frame JS. z-index: -1
   for the same reason as the aurora above — keeps it painted
   behind cards/header/footer instead of over them. */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    background: transparent;
    pointer-events: none;
    z-index: -1;
    box-shadow:
    63.9vw 2.5vh 0 0 rgba(255,248,220,0.47),
    22.3vw 73.6vh 0 0 rgba(255,248,220,0.71),
    89.2vw 8.7vh 0 0 rgba(255,248,220,0.55),
    3.0vw 21.9vh 0 0 rgba(255,248,220,0.6),
    2.7vw 19.9vh 0 0 rgba(255,248,220,0.69),
    54.5vw 22.0vh 0 0 rgba(255,248,220,0.65),
    80.9vw 0.6vh 0 0 rgba(255,248,220,0.78),
    69.8vw 34.0vh 0 0 rgba(255,248,220,0.39),
    95.7vw 33.7vh 0 0 rgba(255,248,220,0.36),
    9.7vw 84.7vh 0 0 rgba(255,248,220,0.66),
    80.7vw 73.0vh 0 0 rgba(255,248,220,0.62),
    97.3vw 37.9vh 0 0 rgba(255,248,220,0.63),
    82.9vw 61.9vh 0 0 rgba(255,248,220,0.82),
    57.7vw 70.5vh 0 0 rgba(255,248,220,0.33),
    22.8vw 28.9vh 0 0 rgba(255,248,220,0.35),
    23.3vw 10.1vh 0 0 rgba(255,248,220,0.47),
    63.6vw 36.5vh 0 0 rgba(255,248,220,0.52),
    21.0vw 26.7vh 0 0 rgba(255,248,220,0.86),
    64.8vw 60.9vh 0 0 rgba(255,248,220,0.4),
    72.9vw 16.3vh 0 0 rgba(255,248,220,0.53),
    99.0vw 64.0vh 0 0 rgba(255,248,220,0.63),
    68.5vw 84.3vh 0 0 rgba(255,248,220,0.77),
    22.9vw 3.2vh 0 0 rgba(255,248,220,0.49),
    26.8vw 21.1vh 0 0 rgba(255,248,220,0.87),
    87.6vw 31.5vh 0 0 rgba(255,248,220,0.69),
    39.6vw 91.5vh 0 0 rgba(255,248,220,0.58),
    26.5vw 24.7vh 0 0 rgba(255,248,220,0.64),
    26.3vw 58.5vh 0 0 rgba(255,248,220,0.84),
    39.9vw 21.9vh 0 0 rgba(255,248,220,0.9),
    51.0vw 9.1vh 0 0 rgba(255,248,220,0.33),
    11.0vw 62.7vh 0 0 rgba(255,248,220,0.78),
    42.2vw 6.4vh 0 0 rgba(255,248,220,0.53),
    99.6vw 52.9vh 0 0 rgba(255,248,220,0.88),
    86.1vw 1.1vh 0 0 rgba(255,248,220,0.73),
    68.2vw 53.7vh 0 0 rgba(255,248,220,0.46),
    64.1vw 11.2vh 0 0 rgba(255,248,220,0.56),
    45.4vw 95.4vh 0 0 rgba(255,248,220,0.83),
    26.3vw 50.1vh 0 0 rgba(255,248,220,0.41),
    91.3vw 87.1vh 0 0 rgba(255,248,220,0.48),
    63.9vw 60.9vh 0 0 rgba(255,248,220,0.39),
    76.3vw 53.9vh 0 0 rgba(255,248,220,0.77),
    53.0vw 0.1vh 0 0 rgba(255,248,220,0.49),
    1.9vw 92.9vh 0 0 rgba(255,248,220,0.83),
    83.2vw 30.8vh 0 0 rgba(255,248,220,0.33),
    87.8vw 94.7vh 0 0 rgba(255,248,220,0.35),
    48.6vw 6.9vh 0 0 rgba(255,248,220,0.76),
    76.6vw 12.8vh 0 0 rgba(255,248,220,0.59),
    55.0vw 26.5vh 0 0 rgba(255,248,220,0.82),
    42.3vw 21.2vh 0 0 rgba(255,248,220,0.62),
    73.0vw 20.1vh 0 0 rgba(255,248,220,0.49),
    99.5vw 65.0vh 0 0 rgba(255,248,220,0.56),
    51.8vw 12.1vh 0 0 rgba(255,248,220,0.43),
    33.8vw 58.8vh 0 0 rgba(255,248,220,0.44),
    22.0vw 7.1vh 0 0 rgba(255,248,220,0.68),
    22.9vw 90.5vh 0 0 rgba(255,248,220,0.82),
    7.1vw 23.8vh 0 0 rgba(255,248,220,0.7),
    21.4vw 13.2vh 0 0 rgba(255,248,220,0.86),
    57.1vw 47.3vh 0 0 rgba(255,248,220,0.77),
    80.7vw 19.0vh 0 0 rgba(255,248,220,0.36),
    43.1vw 42.4vh 0 0 rgba(255,248,220,0.58),
    72.9vw 67.3vh 0 0 rgba(255,248,220,0.89),
    9.8vw 40.3vh 0 0 rgba(255,248,220,0.5),
    86.2vw 24.9vh 0 0 rgba(255,248,220,0.41),
    44.9vw 42.2vh 0 0 rgba(255,248,220,0.47),
    25.0vw 92.3vh 0 0 rgba(255,248,220,0.57),
    86.1vw 55.0vh 0 0 rgba(255,248,220,0.33),
    99.9vw 83.6vh 0 0 rgba(255,248,220,0.88),
    92.6vw 84.9vh 0 0 rgba(255,248,220,0.4),
    48.6vw 21.4vh 0 0 rgba(255,248,220,0.54),
    5.9vw 37.9vh 0 0 rgba(255,248,220,0.89);
    animation: lmdTwinkle 4.5s ease-in-out infinite alternate;
}

@keyframes lmdTwinkle {
    0%   { opacity: 0.35; }
    100% { opacity: 1; }
}

/* Respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce) {
    body { animation: none; }
    body::before,
    body::after { animation: none; }
}