/* =============================================================
   Form-section animated background
   ------------------------------------------------------------
   Adds a subtle, on-brand animated layer behind form sections.
   - Slow drifting radial-gradient mesh (red/dark, very low opacity)
   - SVG "ball-flight" arcs that drift sideways
   - Faint dot constellation that breathes
   - Form card stays the focal point (animations < 15% opacity)
   - Disabled on small screens & for prefers-reduced-motion
   ============================================================= */

.has-animated-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Layer 1 — drifting gradient mesh ----------------------------- */
.has-animated-bg::before {
    content: "";
    position: absolute;
    inset: -20%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 30% at 18% 28%, rgba(229, 9, 20, 0.10) 0%, rgba(229, 9, 20, 0) 70%),
        radial-gradient(35% 28% at 82% 22%, rgba(10, 10, 10, 0.08) 0%, rgba(10, 10, 10, 0) 70%),
        radial-gradient(45% 35% at 50% 92%, rgba(229, 9, 20, 0.07) 0%, rgba(229, 9, 20, 0) 70%),
        radial-gradient(30% 25% at 12% 78%, rgba(10, 10, 10, 0.06) 0%, rgba(10, 10, 10, 0) 70%);
    background-size: 100% 100%;
    filter: blur(8px);
    will-change: transform, opacity;
    animation: pgFormDrift 22s ease-in-out infinite alternate;
}

/* Layer 2 — golf-trajectory arcs + dot constellation ----------- */
.has-animated-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.55;
    /* SVG: 3 thin red arcs (ball-flight paths) + scattered dots */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 600' preserveAspectRatio='xMidYMid slice'>\
<g fill='none' stroke='%23E50914' stroke-width='1.1' stroke-linecap='round' opacity='0.18'>\
<path d='M40 520 Q 360 60 720 280'/>\
<path d='M260 560 Q 700 120 1180 340' opacity='0.7'/>\
<path d='M880 540 Q 1180 180 1560 360' opacity='0.55'/>\
</g>\
<g fill='%230A0A0A' opacity='0.10'>\
<circle cx='40' cy='520' r='3'/><circle cx='260' cy='560' r='3'/><circle cx='880' cy='540' r='3'/>\
<circle cx='720' cy='280' r='2.4'/><circle cx='1180' cy='340' r='2.4'/><circle cx='1560' cy='360' r='2.4'/>\
</g>\
<g fill='%230A0A0A' opacity='0.06'>\
<circle cx='150' cy='180' r='1.6'/><circle cx='320' cy='90' r='1.4'/><circle cx='540' cy='420' r='1.6'/>\
<circle cx='760' cy='140' r='1.4'/><circle cx='980' cy='460' r='1.6'/><circle cx='1220' cy='110' r='1.4'/>\
<circle cx='1420' cy='220' r='1.6'/><circle cx='1380' cy='480' r='1.4'/><circle cx='620' cy='560' r='1.6'/>\
<circle cx='80' cy='340' r='1.4'/><circle cx='420' cy='260' r='1.4'/><circle cx='1080' cy='220' r='1.4'/>\
</g>\
</svg>");
    background-repeat: no-repeat;
    background-size: 130% 130%;
    background-position: 0% 50%;
    will-change: transform, opacity;
    animation:
        pgFormArcs 28s linear infinite,
        pgFormBreathe 9s ease-in-out infinite;
}

/* Make sure the form card / inner container sits ABOVE the bg layers */
.has-animated-bg > * {
    position: relative;
    z-index: 1;
}

/* Keyframes --------------------------------------------------- */
@keyframes pgFormDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1);    opacity: 0.95; }
    50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.04); opacity: 1; }
    100% { transform: translate3d(2%, -1%, 0) scale(1.02); opacity: 0.9; }
}

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

@keyframes pgFormBreathe {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.65; }
}

/* Mobile — disable animation, keep a static soft gradient only - */
@media (max-width: 768px) {
    .has-animated-bg::before {
        animation: none;
        filter: blur(12px);
        inset: 0;
        opacity: 0.7;
    }
    .has-animated-bg::after {
        animation: none;
        opacity: 0.25;
        background-size: 200% 200%;
    }
}

/* Accessibility — honor prefers-reduced-motion ---------------- */
@media (prefers-reduced-motion: reduce) {
    .has-animated-bg::before,
    .has-animated-bg::after {
        animation: none !important;
    }
}