/* ===================================
   EFFECTS
   Scanline, Particles, Background HUD & Glass Effect
   (Originally styles.css lines 284-385)
   =================================== */

/* --- Scanline Effect --- */
.scanline {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(249, 115, 22, 0.01), transparent);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.2);
    animation: scanline 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
    z-index: -1;
}

/* --- Particles --- */
.particles {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -5;
}

.particle {
    position: absolute;
    background: rgba(249, 115, 22, 0.2);
    border-radius: 50%;
    pointer-events: none;
    animation: particleFloat var(--duration) linear infinite;
    top: 100%;
}

/* --- Background HUD --- */
.background-hud {
    position: fixed;
    inset: 0;
    z-index: -10;
    overflow: hidden;
    pointer-events: none;
}

.hud-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(140px);
}

.hud-blob-1 {
    top: 10%;
    left: -5%;
    width: 50rem;
    height: 50rem;
    background: rgba(255, 237, 213, 0.4);
    animation: drift 25s ease-in-out infinite;
}

.hud-blob-2 {
    bottom: 10%;
    right: -5%;
    width: 45rem;
    height: 45rem;
    background: var(--color-slate-100);
    animation: drift 25s ease-in-out infinite;
    animation-delay: -7s;
}

.hud-line {
    position: absolute;
}

.hud-line-1 {
    top: 15%;
    left: 5%;
    width: 400px;
    height: 1px;
    background: linear-gradient(to right, rgba(249, 115, 22, 0.2), transparent);
}

.hud-line-2 {
    bottom: 20%;
    right: 5%;
    width: 400px;
    height: 1px;
    background: linear-gradient(to left, rgba(249, 115, 22, 0.2), transparent);
}

.hud-line-3 {
    top: 20%;
    right: 12%;
    width: 1px;
    height: 200px;
    background: linear-gradient(to bottom, rgba(249, 115, 22, 0.1), transparent);
}

/* --- Glass Effect --- */
.glass-effect {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(249, 115, 22, 0.1);
}