/*
 * EGPI - animated brand backdrop for public pages (job application, success page).
 * Matches the login page: navy gradient, drifting molecule pattern, soft glows and
 * rising particles. Markup:
 *   <div class="brand-backdrop" aria-hidden="true">
 *       <span class="orb orb-1"></span><span class="orb orb-2"></span><span class="orb orb-3"></span>
 *       <span class="particle"></span> ... (up to 8)
 * The three orbs must come first: particle positions are counted with :nth-of-type (spans 4-11).
 *   </div>
 */

.brand-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(900px 500px at 110% -10%, rgba(243, 146, 0, 0.18), transparent 60%),
        radial-gradient(800px 600px at -10% 110%, rgba(45, 99, 196, 0.5), transparent 60%),
        linear-gradient(160deg, #0e2149 0%, #163a78 55%, #1f4b99 100%);
}

/* Molecule pattern */
.brand-backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='104' viewBox='0 0 120 104'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.4'%3E%3Cpath d='M30 2 L58 18 L58 50 L30 66 L2 50 L2 18 Z'/%3E%3Cpath d='M58 50 L86 66 L86 98'/%3E%3Cpath d='M86 66 L114 50 L114 18 L86 2'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='30' cy='2' r='3'/%3E%3Ccircle cx='58' cy='50' r='3'/%3E%3Ccircle cx='2' cy='18' r='3'/%3E%3Ccircle cx='86' cy='66' r='3'/%3E%3Ccircle cx='114' cy='18' r='3'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 120px 104px;
    animation: bb-pattern-drift 40s linear infinite;
}

.brand-backdrop .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    will-change: transform;
}

.brand-backdrop .orb-1 {
    width: 520px;
    height: 520px;
    top: -160px;
    right: -140px;
    background: rgba(255, 168, 38, 0.18);
    animation: bb-orb-1 18s ease-in-out infinite alternate;
}

.brand-backdrop .orb-2 {
    width: 620px;
    height: 620px;
    bottom: -220px;
    left: -180px;
    background: rgba(59, 130, 246, 0.4);
    animation: bb-orb-2 22s ease-in-out infinite alternate;
}

.brand-backdrop .orb-3 {
    width: 360px;
    height: 360px;
    top: 45%;
    left: 50%;
    background: rgba(125, 211, 252, 0.12);
    animation: bb-orb-3 26s ease-in-out infinite alternate;
}

.brand-backdrop .particle {
    position: absolute;
    bottom: -20px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.7);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    opacity: 0;
    will-change: transform, opacity;
    animation: bb-particle-rise linear infinite;
}

.brand-backdrop .particle:nth-of-type(even) {
    background: rgba(243, 146, 0, 0.9);
    box-shadow: 0 0 12px rgba(243, 146, 0, 0.7);
}

.brand-backdrop .particle:nth-of-type(4) { left: 6%;  animation-duration: 18s; animation-delay: 0s; }
.brand-backdrop .particle:nth-of-type(5) { left: 18%; animation-duration: 23s; animation-delay: 5s;  width: 4px; height: 4px; }
.brand-backdrop .particle:nth-of-type(6) { left: 31%; animation-duration: 20s; animation-delay: 10s; }
.brand-backdrop .particle:nth-of-type(7) { left: 47%; animation-duration: 26s; animation-delay: 3s;  width: 4px; height: 4px; }
.brand-backdrop .particle:nth-of-type(8) { left: 62%; animation-duration: 19s; animation-delay: 13s; }
.brand-backdrop .particle:nth-of-type(9) { left: 74%; animation-duration: 22s; animation-delay: 7s;  width: 5px; height: 5px; }
.brand-backdrop .particle:nth-of-type(10) { left: 87%; animation-duration: 25s; animation-delay: 11s; width: 4px; height: 4px; }
.brand-backdrop .particle:nth-of-type(11) { left: 95%; animation-duration: 21s; animation-delay: 16s; }

@keyframes bb-pattern-drift {
    from { background-position: 0 0; }
    to   { background-position: 120px -104px; }
}

@keyframes bb-orb-1 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-110px, 90px) scale(1.15); }
}

@keyframes bb-orb-2 {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(130px, -100px) scale(1.1); }
}

@keyframes bb-orb-3 {
    from { transform: translate(-50%, -50%) scale(0.9); }
    to   { transform: translate(-20%, -80%) scale(1.2); }
}

@keyframes bb-particle-rise {
    0%   { transform: translate(0, 0); opacity: 0; }
    10%  { opacity: 1; }
    85%  { opacity: 0.8; }
    100% { transform: translate(40px, -105vh); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .brand-backdrop::before,
    .brand-backdrop .orb {
        animation: none !important;
    }

    .brand-backdrop .particle {
        display: none;
    }
}