/* ═══════════════════════════════════════════════════════════════════════════
   VideoForge — AMBIENT
   The background effect: slow drifting light fields with a still grain over
   them. Shared by the app and the landing page so the two can't drift apart.

   Everything in here is decorative and inert — fixed, pinned behind the
   content (z-index 0), pointer-events:none, aria-hidden in the markup.
   Content lives at z-index 1 and up and is never dimmed by it.

   Each field draws from one of the three grade triplets in tokens.css —
   powder, lilac, blush — so the background reads as coloured light, not
   painted colour. The triplets shift per theme; nothing else changes here.
   ═══════════════════════════════════════════════════════════════════════════ */

.vf-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

/* ── Drifting fields ──────────────────────────────────────────────────────
   Inset well past the viewport so a blurred edge never reveals itself as a
   hard circle when a field drifts toward a corner. */
.vf-aurora {
    position: absolute;
    inset: -30%;
    opacity: var(--aurora-a);
}

.vf-aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    /* Blur is the whole effect. Kept on the element rather than the parent so
       each field can carry its own radius without smearing its neighbours. */
    filter: blur(var(--f-blur, 90px));
    background: radial-gradient(circle at 50% 50%,
        rgba(var(--f-rgb, var(--elev)), var(--f-str, .30)) 0%,
        rgba(var(--f-rgb, var(--elev)), calc(var(--f-str, .30) * .38)) 42%,
        transparent 70%);
    will-change: transform;
    animation: vf-drift var(--f-dur, 56s) var(--f-delay, 0s) ease-in-out infinite alternate;
}

/* Three fields, deliberately different sizes and speeds — matched periods read
   as a single pulsing blob rather than as weather. Each carries one hue of
   the grade: powder top-left, lilac right, blush low-centre. */
.vf-aurora i:nth-child(1) {
    --f-rgb: var(--field-1);
    --f-blur: 110px; --f-str: .34; --f-dur: 58s;
    width: 62vw; height: 62vw; min-width: 640px; min-height: 640px;
    top: -12%; left: 4%;
}
.vf-aurora i:nth-child(2) {
    --f-rgb: var(--field-2);
    --f-blur: 130px; --f-str: .26; --f-dur: 74s; --f-delay: -18s;
    width: 54vw; height: 54vw; min-width: 560px; min-height: 560px;
    top: 26%; right: 2%; left: auto;
}
.vf-aurora i:nth-child(3) {
    --f-rgb: var(--field-3);
    --f-blur: 150px; --f-str: .20; --f-dur: 92s; --f-delay: -40s;
    width: 70vw; height: 70vw; min-width: 700px; min-height: 700px;
    bottom: -24%; left: 22%;
}

/* Translate + scale only — both composite on the GPU, so the drift costs
   nothing on the main thread even on a low-end laptop. */
@keyframes vf-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(6vw, 4vh, 0) scale(1.16); }
}

/* ── Grain ────────────────────────────────────────────────────────────────
   Generated by feTurbulence in a data URI: no network request, no image file,
   and it tiles seamlessly via stitchTiles. Still by design — animated grain
   is a headache at this opacity and reads as a broken screen. */
.vf-grain {
    position: absolute;
    inset: 0;
    opacity: var(--grain-a);
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* ── Vignette ─────────────────────────────────────────────────────────────
   Pulls the corners down a touch so the fields fade out at the edges of the
   screen instead of being clipped by it. */
.vf-vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 82% 68% at 50% 42%,
        transparent 40%, rgba(var(--bg-rgb), .55) 100%);
}

/* Content must clear the ambient layer. The app and login put their shell in
   one of these; the landing page uses a bare <main>, so it is named too rather
   than relying on paint order to keep working. */
.app-container,
.vf-page,
.vf-ambient ~ main,
.vf-ambient ~ footer { position: relative; z-index: 1; }

/* ── Reduced motion ───────────────────────────────────────────────────────
   The drift stops; the fields and grain stay, since they are texture rather
   than movement and carry no meaning that motion was conveying. */
@media (prefers-reduced-motion: reduce) {
    .vf-aurora i { animation: none; transform: translate3d(3vw, 2vh, 0) scale(1.08); }
}