/* =============================================================================
   Den levande bakgrunden
   =============================================================================

   Hämtad ur huvudsajtens app.css och bubbling.js — samma toning, samma rörelse,
   samma bubbelbeteende. Poängen är att korten ska lyfta från underlaget, och det
   gör de bara om underlaget rör sig långsammare än de gör.

   ---------------------------------------------------------------------------
   VARFÖR DEN INTE MOTSÄGER FAS 4

   Vi lugnade komponenterna: mindre rörelse, mjukare skuggor, ingen uppförstoring
   vid hover. Det står kvar. Det som rör sig nu är duken, inte sakerna på den —
   och en stilla panel på en levande yta läser lugnare än en hoppande panel på en
   död. Det är hela skillnaden mellan bakgrund och innehåll.

   ---------------------------------------------------------------------------
   PRESTANDA OCH RESPEKT

   Bubblorna pausas när fliken är dold — annars målar de vidare i en flik ingen
   tittar på och äter batteri. Och hela härligheten stängs av för den som bett om
   mindre rörelse i sitt operativsystem; se prefers-reduced-motion längst ner.
   ============================================================================= */

.pp-canvas {
    position: fixed;
    inset: 0;
    z-index: -10;
    pointer-events: none;

    /* Samma fem stopp som huvudsajten. Djupt vinrött till lila och tillbaka —
       långsamt nog att man inte ser det hända, bara att något lever. */
    background: linear-gradient(-45deg, #2d0016, #4a041f, #6b21a8, #1e002b, #5c0f1e);
    background-size: 400% 400%;
    animation: ppGradient 15s ease infinite;
}

@keyframes ppGradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.pp-canvas-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.pp-bubble {
    position: absolute;
    bottom: -160px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    backdrop-filter: blur(3px);

    /* Tvingar upp lagret på GPU:n. Utan den ritas bubblorna om på CPU:n vid varje
       bildruta och sidan hackar när man skrollar. */
    transform: translateZ(0);
    will-change: transform, opacity;

    animation: ppFloat linear infinite;
}

@keyframes ppFloat {
    0% {
        transform: translateY(0) scale(0.8);
        opacity: 0;
    }
    20% { opacity: 1; }
    80% { opacity: 0.5; }
    100% {
        transform: translateY(-110vh) scale(1.5) translateX(50px);
        opacity: 0;
    }
}

/* Ett tunt mörkt lager mellan duken och innehållet. Toningen når som ljusast
   #6b21a8, och vit text på den är läsbar men ansträngd — lagret tar ner toppen
   utan att döda rörelsen. */
.pp-canvas-veil {
    position: fixed;
    inset: 0;
    z-index: -5;
    pointer-events: none;
    background: rgba(0, 0, 0, 0.18);
}

/* -----------------------------------------------------------------------------
   Innehållet ovanpå

   Sidans egen bakgrund måste bort, annars ligger en ogenomskinlig yta över hela
   duken och man ser ingenting av den.
   -------------------------------------------------------------------------- */

.pp-canvas-content {
    position: relative;
    z-index: 1;
    background: transparent;
}

/* -----------------------------------------------------------------------------
   Rörelsekänslighet

   Den som bett operativsystemet om mindre rörelse ska inte få en gungande
   bakgrund. Toningen fryser i ett läge och bubblorna tas bort helt — kvar blir
   en stillastående yta med samma färger, inte en vit sida.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pp-canvas {
        animation: none;
        background-position: 40% 50%;
    }

    .pp-canvas-bubbles {
        display: none;
    }
}