/*
 * Aurora drift: TRANSLATE ONLY, never scale. Each layer is blurred once and
 * promoted to its own compositor texture (filter + will-change), so the GPU
 * just slides a cached bitmap each frame - no per-frame blur re-rasterisation,
 * which is what caused the residual shimmer. Closed loops return to their start
 * so the linear, seamless motion never stops or snaps.
 */
@keyframes auroraDriftOne {
    0%   { transform: translate3d(-4%, -3%, 0); }
    25%  { transform: translate3d(3%, -4%, 0); }
    50%  { transform: translate3d(5%, 3%, 0); }
    75%  { transform: translate3d(-2%, 4%, 0); }
    100% { transform: translate3d(-4%, -3%, 0); }
}

@keyframes auroraDriftTwo {
    0%   { transform: translate3d(3%, 2%, 0); }
    25%  { transform: translate3d(-3%, 4%, 0); }
    50%  { transform: translate3d(-5%, -2%, 0); }
    75%  { transform: translate3d(2%, -4%, 0); }
    100% { transform: translate3d(3%, 2%, 0); }
}

@keyframes button-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

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

/* === GLOBAL ATMOSPHERE: large drifting aurora field behind the whole site === */
.site-atmosphere {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    background: var(--color-bg);
    pointer-events: none;
    isolation: isolate;
}

/* Soft vignette so the aurora reads as light, not a flat panel. */
.site-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background:
        linear-gradient(180deg, rgb(20 18 16 / 0.18), transparent 30%, rgb(20 18 16 / 0.62)),
        radial-gradient(ellipse at center, transparent 46%, rgb(20 18 16 / 0.5) 100%);
}

/* No blur here - the canvas only carries the subtle scroll offset. */
.aurora-canvas {
    position: absolute;
    width: 92%;
    height: 72vh;
    min-height: 540px;
    top: 14%;
    left: 4%;
    overflow: visible;
    transform: translate3d(0, var(--aurora-scroll, 0px), 0);
    will-change: transform;
}

.aurora-layer {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    /* Blur lives on the layer so the rasterised result is cached and reused. */
    filter: blur(90px);
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Broad, soft fields (percentage radii) so nothing reads as a circle/blob. */
.aurora-layer-one {
    opacity: 0.55;
    background:
        radial-gradient(70% 78% at 22% 46%, rgb(0 92 80 / 0.5), transparent 70%),
        radial-gradient(62% 66% at 60% 55%, rgb(62 156 138 / 0.32), transparent 72%),
        radial-gradient(55% 60% at 84% 50%, rgb(229 115 115 / 0.1), transparent 72%);
    animation: auroraDriftOne 90s linear infinite;
}

.aurora-layer-two {
    opacity: 0.42;
    background:
        radial-gradient(66% 72% at 34% 60%, rgb(0 92 80 / 0.26), transparent 72%),
        radial-gradient(60% 62% at 72% 40%, rgb(62 156 138 / 0.24), transparent 74%);
    animation: auroraDriftTwo 120s linear infinite;
}

/*
 * Global film grain: a fixed overlay ON TOP of the entire interface (cards
 * included), not a background texture. Oversized 400% so the slow transform
 * drift never exposes an edge. soft-light at low opacity keeps text readable.
 */
.site-grain {
    position: fixed;
    inset: -200%;
    width: 400%;
    height: 400%;
    z-index: 80;
    background-image: url("../img/noise-texture.png");
    background-repeat: repeat;
    opacity: 0.3;
    mix-blend-mode: soft-light;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(var(--grain-x, -9%), var(--grain-y, 8%), 0);
}

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}

[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

.page-hero .container[data-reveal] {
    opacity: 1;
    transform: none;
}

.hero-collage__main {
    transition: transform 500ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
    .hero-collage:hover .hero-collage__main {
        transform: translateY(-4px);
    }
}

@media (max-width: 760px) {
    .aurora-canvas {
        width: 120%;
        left: -10%;
        height: 60vh;
        min-height: 440px;
        top: 16%;
    }

    /* Lighter blur on mobile GPUs keeps the cached layer cheap. */
    .aurora-layer {
        filter: blur(64px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }

    [data-reveal] {
        opacity: 1;
        transform: none;
    }

    /* Keep a calm, readable static atmosphere - no drift, no animation. */
    .aurora-layer,
    .site-grain {
        animation: none !important;
        transform: none !important;
    }
}