/* ==========================================================
   HelpInPrep — Aurora hero background (lightweight)
   Usage: <link rel="stylesheet" href="/css/aurora.css?v=2">

   Why it's lighter than the first version:
   - No filter: blur() / invert()        (very expensive on big layers)
   - No mix-blend-mode: difference       (forces full-layer blending)
   - No background-attachment: fixed     (repaints on every scroll)
   - No animating background-position    (repaints every frame)
   - Animates transform only             (runs on the GPU compositor)
   - Colors are pre-baked, so no invert trick is needed
   ========================================================== */

.hip-aurora {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    contain: layout paint;
}

/* Two tiles wide, so shifting by -50% loops seamlessly */
.hip-aurora__layer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 200%;
    opacity: 0.55;
    background-image: linear-gradient(
        100deg,
        #eff6ff 0%,
        #bfdbfe 14%,
        #c7d2fe 30%,
        #ddd6fe 45%,
        #93c5fd 62%,
        #dbeafe 80%,
        #eff6ff 100%
    );
    background-size: 50% 100%;
    background-repeat: repeat-x;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    animation: hip-aurora-drift 45s linear infinite;
}

/* Soft fade toward the page background (replaces the CSS mask) */
.hip-aurora::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse at 100% 0%,
        rgba(243, 246, 249, 0) 10%,
        rgba(243, 246, 249, 1) 75%
    );
}

@keyframes hip-aurora-drift {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

/* Pause when the hero is off-screen (toggled by the small JS snippet) */
.hip-aurora.is-paused .hip-aurora__layer {
    animation-play-state: paused;
}

/* Phones: keep the look, skip the animation */
@media (max-width: 767px) {
    .hip-aurora__layer {
        animation: none;
        will-change: auto;
        width: 100%;
    }
}

/* ---------- Hero entrance (transform + opacity only) ---------- */
@keyframes hip-hero-in {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

[data-hero-header].hip-hero-in {
    animation: hip-hero-in 0.8s ease-in-out 0.3s both;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .hip-aurora__layer {
        animation: none;
        will-change: auto;
    }

    [data-hero-header].hip-hero-in {
        animation: none;
    }
}