/**
 * GITS-OS Effect Styles
 * CSS-only effects, animations, and visual treatments
 * (JS-driven effects like particles, data streams, scan lines
 *  are created by gits-os.js — this file handles CSS-only effects)
 */

/* === Space Background Class (replaces hex grid) === */
.gits-hex-bg {
    /* Removed hex pattern for cleaner space aesthetic */
    background-image: none;
}

/* === Glitch Effect (CSS class) === */
.gits-glitch {
    position: relative;
}

.gits-glitch::before,
.gits-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.gits-glitch::before {
    animation: glitch-1 3s infinite;
    color: var(--gits-neon-red);
    z-index: -1;
}

.gits-glitch::after {
    animation: glitch-2 3s infinite;
    color: var(--gits-accent-cyan);
    z-index: -2;
}

@keyframes glitch-1 {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 0.8; left: 2px; }
    92% { left: -2px; }
    93% { opacity: 0; }
}

@keyframes glitch-2 {
    0%, 90%, 100% { opacity: 0; }
    91% { opacity: 0.8; left: -2px; }
    92% { left: 2px; }
    93% { opacity: 0; }
}

/* === Neon Pulse (border glow) === */
.gits-neon-pulse {
    animation: neonPulse 2s ease-in-out infinite;
}

@keyframes neonPulse {
    0%, 100% {
        box-shadow: 0 0 5px var(--gits-accent-primary),
                    0 0 10px var(--gits-accent-primary),
                    0 0 20px var(--gits-accent-glow);
    }
    50% {
        box-shadow: 0 0 10px var(--gits-accent-primary),
                    0 0 20px var(--gits-accent-primary),
                    0 0 40px var(--gits-accent-glow);
    }
}

/* === Data Stream Sweep (CSS-only decorative) === */
.gits-data-stream {
    position: relative;
    overflow: hidden;
}

.gits-data-stream::before {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 255, 159, 0.1) 50%, transparent 100%);
    animation: dataStream 2s linear infinite;
}

@keyframes dataStream {
    0% { top: -100%; }
    100% { top: 100%; }
}

/* === Typing Animation === */
.gits-typing {
    overflow: hidden;
    border-right: 2px solid var(--gits-accent-primary);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--gits-accent-primary); }
}

/* === Fade In Up === */
.gits-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Shimmer Effect === */
.gits-shimmer {
    position: relative;
    overflow: hidden;
}

.gits-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 255, 159, 0.1), transparent);
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* === Flashing Neon Email CTA === */
.gits-email-cta {
    margin-top: 20px !important;
}

.gits-neon-flash {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    color: var(--gits-accent-cyan) !important;
    text-shadow:
        0 0 5px var(--gits-accent-cyan),
        0 0 10px var(--gits-accent-cyan),
        0 0 20px var(--gits-accent-cyan),
        0 0 40px var(--gits-accent-cyan);
    animation: neonFlash 1.5s ease-in-out infinite;
    display: inline-block;
}

.gits-neon-flash:hover {
    color: var(--gits-accent-primary) !important;
    text-shadow:
        0 0 5px var(--gits-accent-primary),
        0 0 10px var(--gits-accent-primary),
        0 0 20px var(--gits-accent-primary),
        0 0 40px var(--gits-accent-primary),
        0 0 80px var(--gits-accent-primary);
}

@keyframes neonFlash {
    0%, 100% {
        opacity: 1;
        text-shadow:
            0 0 5px var(--gits-accent-cyan),
            0 0 10px var(--gits-accent-cyan),
            0 0 20px var(--gits-accent-cyan),
            0 0 40px var(--gits-accent-cyan);
    }
    50% {
        opacity: 0.8;
        text-shadow:
            0 0 2px var(--gits-accent-cyan),
            0 0 5px var(--gits-accent-cyan),
            0 0 10px var(--gits-accent-cyan);
    }
}

/* === Print Styles === */
@media print {
    body::before,
    body::after,
    .gits-taskbar,
    .gits-scanlines-overlay,
    .gits-data-streams,
    .gits-particles {
        display: none !important;
    }

    .gits-window {
        border: 1px solid #ccc;
        box-shadow: none;
    }
}

/* ===================================================================
   GLOBAL DESCRIPTION TEXT ENHANCEMENT
   Subtle luminous glow animation for all description/body text
   across every page — cards, sections, blog excerpts, etc.
   =================================================================== */

/* Description text class — reusable glow for any page */
.dw-desc-text,
.gits-site-card p[style*="8b949e"],
.gits-site-card p[style*="a8b2bc"],
.gits-card p[style*="8b949e"],
.dw-glass-card p[style*="8b949e"],
.gits-window p[style*="8b949e"] {
    color: #86efac !important;
    font-size: 1.05rem !important;
    line-height: 1.85 !important;
    text-shadow:
        0 0 6px rgba(0, 255, 159, 0.2),
        0 1px 3px rgba(0, 0, 0, 0.7);
    animation: dw-desc-glow 5s ease-in-out infinite;
}

@keyframes dw-desc-glow {
    0%, 100% {
        text-shadow:
            0 0 6px rgba(140, 190, 240, 0.2),
            0 1px 3px rgba(0, 0, 0, 0.7);
    }
    50% {
        text-shadow:
            0 0 10px rgba(140, 190, 240, 0.35),
            0 0 22px rgba(100, 180, 255, 0.12),
            0 1px 3px rgba(0, 0, 0, 0.7);
    }
}



/* Blog excerpt / post description text */
.wp-block-post-excerpt,
.wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
    color: #b8c4d0 !important;
    text-shadow:
        0 0 6px rgba(140, 190, 240, 0.15),
        0 1px 3px rgba(0, 0, 0, 0.6);
    animation: dw-desc-glow 5s ease-in-out infinite;
}

/* Projects page description text under section headings */
.dw-glass-card p[style*="8b949e"],
.gits-card p[style*="8b949e"] {
    color: #b8c4d0 !important;
    line-height: 1.75 !important;
    text-shadow:
        0 0 6px rgba(140, 190, 240, 0.18),
        0 1px 3px rgba(0, 0, 0, 0.6);
    animation: dw-desc-glow 5s ease-in-out infinite;
}

/* === Reduced Motion === */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .gits-floating-logo {
        animation: none;
    }

    .dw-glow-text,
    .dw-desc-text,
    .gits-site-card p,
    .gits-card p,
    .dw-glass-card p,
    .wp-block-post-excerpt {
        animation: none !important;
    }

    .dw-cursor-glow,
    body::after {
        display: none !important;
    }
}

/* =============================================================
   CURSOR GLOW — Ambient light that follows the pointer
   Positioned via --cx/--cy custom properties set by JS
   ============================================================= */
.dw-cursor-glow {
    position: fixed;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(99, 102, 241, 0.06) 0%,
        rgba(139, 92, 246, 0.03) 30%,
        transparent 70%
    );
    transform: translate(
        calc(var(--cx, -500px) - 250px),
        calc(var(--cy, -500px) - 250px)
    );
    pointer-events: none;
    z-index: 0;
    will-change: transform;
    transition: transform 0.15s ease-out;
}

@media (hover: none) {
    .dw-cursor-glow { display: none; }
}

/* =============================================================
   AMBIENT MESH — Floating gradient orbs behind content
   ============================================================= */
@property --orb-hue {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.dw-ambient-orb {
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    filter: blur(80px);
    opacity: 0.04;
    will-change: transform;
}

.dw-ambient-orb--1 {
    width: 600px;
    height: 600px;
    top: 10%;
    left: -5%;
    background: hsl(240, 80%, 60%);
    animation: dw-orb-float-1 25s ease-in-out infinite alternate;
}

.dw-ambient-orb--2 {
    width: 500px;
    height: 500px;
    bottom: 10%;
    right: -5%;
    background: hsl(280, 80%, 60%);
    animation: dw-orb-float-2 30s ease-in-out infinite alternate;
}

@keyframes dw-orb-float-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(100px, 50px) scale(1.1); }
    100% { transform: translate(-50px, 100px) scale(0.95); }
}

@keyframes dw-orb-float-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-80px, -60px) scale(1.15); }
    100% { transform: translate(60px, -40px) scale(0.9); }
}