/* ════════════════════════════════════════════════════════════════
   CISO Consulting — Visual Effects System
   Preloader · Animations · Particles · Glassmorphism · Transitions
   ════════════════════════════════════════════════════════════════ */


/* ═══════════════ 1. PRELOADER — SENTINEL STAR ═══════════════ */
#cyber-preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: radial-gradient(ellipse at 50% 40%, #0a1420 0%, #060a0f 45%, #020406 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    --p-green: #00ff88;
    --p-green-dim: #00cc6a;
    --p-cyan: #00d4ff;
    --p-cyan-dim: #0088aa;
    /* CSS-only hard timeout: preloader auto-dismisses after 6s even if JS is slow/blocked */
    animation: preloaderHardTimeout 0.5s ease-out 6s forwards;
}
#cyber-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(1.06);
    animation: none;
}
@keyframes preloaderHardTimeout {
    from { opacity: 1; visibility: visible; pointer-events: auto; }
    to   { opacity: 0; visibility: hidden;  pointer-events: none; }
}

/* Background layers */
.preloader-pattern {
    position: absolute; inset: 0;
    background-image:
        radial-gradient(circle at 0 0, rgba(0,255,136,0.05) 0, rgba(0,255,136,0.05) 1px, transparent 2px),
        radial-gradient(circle at 50px 50px, rgba(0,212,255,0.06) 0, rgba(0,212,255,0.06) 1px, transparent 2px);
    background-size: 100px 100px;
    animation: preloaderPatternDrift 20s linear infinite;
    opacity: 0.6;
    pointer-events: none;
}
@keyframes preloaderPatternDrift {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 100px 100px, 100px 100px; }
}

.preloader-rays {
    position: absolute;
    top: 50%; left: 50%;
    width: 180vmin; height: 180vmin;
    transform: translate(-50%, -50%);
    background: conic-gradient(
        from 0deg,
        transparent 0deg, rgba(0,255,136,0.04) 12deg, transparent 24deg,
        transparent 45deg, rgba(0,212,255,0.04) 57deg, transparent 69deg,
        transparent 90deg, rgba(0,255,136,0.04) 102deg, transparent 114deg,
        transparent 135deg, rgba(0,212,255,0.04) 147deg, transparent 159deg,
        transparent 180deg, rgba(0,255,136,0.04) 192deg, transparent 204deg,
        transparent 225deg, rgba(0,212,255,0.04) 237deg, transparent 249deg,
        transparent 270deg, rgba(0,255,136,0.04) 282deg, transparent 294deg,
        transparent 315deg, rgba(0,212,255,0.04) 327deg, transparent 339deg,
        transparent 360deg
    );
    animation: preloaderRaysRotate 60s linear infinite;
    pointer-events: none;
}
@keyframes preloaderRaysRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.preloader-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 50vmin; height: 50vmin;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(0,255,136,0.18) 0%, rgba(0,212,255,0.08) 40%, transparent 70%);
    filter: blur(40px);
    animation: preloaderGlowPulse 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes preloaderGlowPulse {
    0%, 100% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.1); }
}

/* HUD corner brackets */
.preloader-corner {
    position: absolute;
    width: 80px; height: 80px;
    border: 1.5px solid var(--p-green);
    opacity: 0;
    animation: preloaderCornerIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}
.preloader-corner.tl { top: 40px; left: 40px; border-right: none; border-bottom: none; }
.preloader-corner.tr { top: 40px; right: 40px; border-left: none; border-bottom: none; animation-delay: 0.15s; }
.preloader-corner.bl { bottom: 40px; left: 40px; border-right: none; border-top: none; animation-delay: 0.2s; }
.preloader-corner.br { bottom: 40px; right: 40px; border-left: none; border-top: none; animation-delay: 0.25s; }
@keyframes preloaderCornerIn {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
.preloader-corner::before {
    content: '';
    position: absolute;
    width: 5px; height: 5px;
    background: var(--p-green);
    box-shadow: 0 0 8px var(--p-green);
}
.preloader-corner.tl::before { top: -3px; left: -3px; }
.preloader-corner.tr::before { top: -3px; right: -3px; }
.preloader-corner.bl::before { bottom: -3px; left: -3px; }
.preloader-corner.br::before { bottom: -3px; right: -3px; }

/* Top tag pill */
.preloader-tag {
    position: absolute;
    top: 56px; left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    border: 1px solid var(--p-green);
    background: rgba(0,255,136,0.05);
    color: var(--p-green);
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 10px; font-weight: 700;
    letter-spacing: 4px; text-transform: uppercase;
    opacity: 0;
    animation: preloaderTagIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
    z-index: 5;
}
.preloader-tag::before, .preloader-tag::after {
    content: '✦';
    margin: 0 10px;
    color: var(--p-green-dim);
    opacity: 0.8;
}
@keyframes preloaderTagIn {
    from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Main stage */
.preloader-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    z-index: 5;
}

/* 8-pointed Islamic star */
.preloader-star {
    position: relative;
    width: 280px; height: 280px;
    display: flex; align-items: center; justify-content: center;
    animation: preloaderStarEntry 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards;
}
@keyframes preloaderStarEntry {
    from { opacity: 0; transform: scale(0.85) rotate(-8deg); }
    to   { opacity: 1; transform: scale(1) rotate(0deg); }
}

.preloader-star-svg {
    position: absolute;
    width: 100%; height: 100%;
    overflow: visible;
}
.preloader-star-outer {
    fill: none;
    stroke: var(--p-green);
    stroke-width: 1.2;
    filter: drop-shadow(0 0 10px rgba(0,255,136,0.5));
    animation: preloaderStarBreathe 4s ease-in-out infinite;
}
.preloader-star-inner {
    fill: none;
    stroke: var(--p-cyan);
    stroke-width: 1;
    opacity: 0.8;
    animation: preloaderStarBreatheOpp 4s ease-in-out infinite;
}
@keyframes preloaderStarBreathe {
    0%, 100% { opacity: 0.9; }
    50%      { opacity: 1; filter: drop-shadow(0 0 14px rgba(0,255,136,0.7)); }
}
@keyframes preloaderStarBreatheOpp {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 0.95; }
}

/* Scanning beam sweeping the star perimeter */
.preloader-star-sweep {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg, transparent 340deg,
        rgba(0,255,136,0.6) 355deg,
        rgba(255,255,255,0.9) 360deg,
        transparent 365deg
    );
    -webkit-mask: radial-gradient(circle, transparent 45%, #000 46%, #000 48%, transparent 49%);
            mask: radial-gradient(circle, transparent 45%, #000 46%, #000 48%, transparent 49%);
    animation: preloaderSweepRotate 3s linear infinite;
    mix-blend-mode: screen;
    pointer-events: none;
}
@keyframes preloaderSweepRotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 8 pulsing dots at each star vertex */
.preloader-star-point {
    position: absolute;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--p-green);
    box-shadow: 0 0 10px var(--p-green), 0 0 20px rgba(0,255,136,0.5);
    animation: preloaderPointPulse 2s ease-in-out infinite;
}
@keyframes preloaderPointPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.4); opacity: 0.7; }
}
.preloader-star-point:nth-child(1) { top: 2px; left: 50%; transform: translateX(-50%); animation-delay: 0.0s; }
.preloader-star-point:nth-child(2) { top: 38px; right: 38px; animation-delay: 0.12s; }
.preloader-star-point:nth-child(3) { top: 50%; right: 2px; transform: translateY(-50%); animation-delay: 0.24s; }
.preloader-star-point:nth-child(4) { bottom: 38px; right: 38px; animation-delay: 0.36s; }
.preloader-star-point:nth-child(5) { bottom: 2px; left: 50%; transform: translateX(-50%); animation-delay: 0.48s; }
.preloader-star-point:nth-child(6) { bottom: 38px; left: 38px; animation-delay: 0.60s; }
.preloader-star-point:nth-child(7) { top: 50%; left: 2px; transform: translateY(-50%); animation-delay: 0.72s; }
.preloader-star-point:nth-child(8) { top: 38px; left: 38px; animation-delay: 0.84s; }

/* Central logo tile */
.preloader-logo {
    position: relative;
    width: 82px; height: 82px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--p-green) 0%, var(--p-cyan) 100%);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Orbitron', sans-serif;
    font-weight: 900; font-size: 28px; color: #060a0f;
    letter-spacing: -1px;
    box-shadow:
        0 0 35px rgba(0,255,136,0.4),
        0 0 70px rgba(0,212,255,0.25),
        inset 0 -2px 8px rgba(0,0,0,0.2);
    z-index: 2;
    animation: preloaderLogoEntry 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.9s backwards, preloaderLogoFloat 3s ease-in-out 1.5s infinite;
}
@keyframes preloaderLogoEntry {
    from { opacity: 0; transform: scale(0.3); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1); filter: blur(0); }
}
@keyframes preloaderLogoFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.02); }
}
.preloader-logo span { position: relative; z-index: 2; }
.preloader-logo::after {
    content: '';
    position: absolute; inset: -6px;
    border-radius: 18px;
    border: 1px solid rgba(0,255,136,0.4);
    animation: preloaderLogoRing 2s ease-in-out infinite;
}
@keyframes preloaderLogoRing {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50%      { opacity: 0.8; transform: scale(1.08); }
}

/* Large digital counter */
.preloader-counter {
    font-family: 'Rajdhani', 'Orbitron', sans-serif;
    font-size: 54px; font-weight: 700;
    letter-spacing: 4px;
    color: var(--p-cyan);
    text-shadow: 0 0 20px rgba(0,212,255,0.6);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    /* Always LTR — numbers are universal */
    direction: ltr !important;
    unicode-bidi: bidi-override;
    display: flex;
    align-items: baseline;
    gap: 2px;
    opacity: 0;
    animation: preloaderCounterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s forwards;
}
@keyframes preloaderCounterIn {
    from { opacity: 0; transform: translateY(8px); letter-spacing: 8px; }
    to   { opacity: 1; transform: translateY(0); letter-spacing: 4px; }
}
.preloader-counter-value { min-width: 108px; text-align: center; }
.preloader-counter-pct {
    font-size: 26px;
    color: var(--p-cyan-dim);
    opacity: 0.8;
    margin-left: 2px;
}

/* Status line */
.preloader-status {
    font-family: 'Rajdhani', 'JetBrains Mono', monospace;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 500;
    margin-top: 4px;
    min-height: 14px;
    white-space: nowrap;
    opacity: 0;
    animation: preloaderCounterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards;
    display: flex;
    align-items: center;
    gap: 8px;
}
.preloader-status-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--p-green);
    box-shadow: 0 0 8px var(--p-green);
    animation: preloaderStatusDotBlink 1s step-end infinite;
}
@keyframes preloaderStatusDotBlink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0.2; }
}

/* Brand */
.preloader-brand {
    text-align: center;
    margin-top: 8px;
    opacity: 0;
    animation: preloaderCounterIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
}
.preloader-brand-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px; font-weight: 800;
    color: #fff;
    letter-spacing: 6px;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.preloader-brand-tagline {
    font-family: 'Outfit', sans-serif;
    font-size: 10.5px; font-weight: 500;
    color: var(--p-cyan);
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.6;
}
.preloader-hud {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

/* Arabic / RTL */
#cyber-preloader[dir="rtl"] .preloader-brand-name {
    font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
    letter-spacing: 2px;
}
#cyber-preloader[dir="rtl"] .preloader-brand-tagline,
#cyber-preloader[dir="rtl"] .preloader-status,
#cyber-preloader[dir="rtl"] .preloader-tag {
    font-family: 'Tajawal', 'Noto Kufi Arabic', sans-serif;
    letter-spacing: 1.5px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .preloader-pattern, .preloader-rays, .preloader-glow, .preloader-star-sweep,
    .preloader-logo, .preloader-logo::after, .preloader-star-outer, .preloader-star-inner,
    .preloader-star-point { animation: none !important; }
}

/* Mobile responsive */
@media (max-width: 600px) {
    .preloader-star { width: 230px; height: 230px; }
    .preloader-logo { width: 70px; height: 70px; font-size: 24px; }
    .preloader-counter { font-size: 44px; letter-spacing: 3px; }
    .preloader-counter-value { min-width: 88px; }
    .preloader-counter-pct { font-size: 22px; }
    .preloader-brand-name { font-size: 15px; letter-spacing: 4px; }
    .preloader-brand-tagline { font-size: 9.5px; letter-spacing: 2px; }
    .preloader-corner { width: 60px; height: 60px; }
    .preloader-corner.tl, .preloader-corner.tr { top: 24px; }
    .preloader-corner.tl, .preloader-corner.bl { left: 24px; }
    .preloader-corner.tr, .preloader-corner.br { right: 24px; }
    .preloader-corner.bl, .preloader-corner.br { bottom: 24px; }
    .preloader-tag { top: 40px; font-size: 9px; letter-spacing: 3px; }
}

/* ═══════════════ 2. PAGE TRANSITION ═══════════════ */
.page-transition-in {
    animation: pageSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes pageSlideIn {
    from { opacity: 0; transform: translateY(20px); filter: blur(4px); }
    to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* ═══════════════ 3. SCROLL REVEAL ANIMATIONS ═══════════════ */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
}
.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}
.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
.stagger-children .reveal { transition-delay: var(--stagger-delay, 0ms); }

/* ═══════════════ 4. CARD EFFECTS ═══════════════ */
/* Glassmorphism — disabled, using solid backgrounds */
.glass-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-subtle) !important;
    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hover lift with glow */
.card-hover {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s ease,
                border-color 0.35s ease;
}
.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,255,136,0.08), 0 4px 12px rgba(0,0,0,0.3);
    border-color: rgba(0,255,136,0.15) !important;
}
/* 3D Tilt Card */
.tilt-card {
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}
/* Neon border on hover */
.neon-hover {
    position: relative;
    overflow: hidden;
}
.neon-hover::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #00ff88, #00d4ff, #b464ff, #ff3355, #00ff88);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: neonBorderRotate 3s linear infinite;
}
.neon-hover:hover::before {
    opacity: 1;
}
.neon-hover::after {
    content: '';
    position: absolute;
    inset: 1px;
    background: var(--bg-card, #0d1117);
    border-radius: inherit;
    z-index: -1;
}
@keyframes neonBorderRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ═══════════════ 5. BUTTON EFFECTS ═══════════════ */
/* Ripple effect */
.btn-ripple {
    position: relative;
    overflow: hidden;
}
.btn-ripple .ripple-wave {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    transform: scale(0);
    animation: rippleExpand 0.6s linear;
    pointer-events: none;
}
@keyframes rippleExpand {
    to { transform: scale(4); opacity: 0; }
}

/* Glow pulse button */
.btn-glow {
    animation: btnGlow 2s ease-in-out infinite;
}
@keyframes btnGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(0,255,136,0.2); }
    50% { box-shadow: 0 0 20px rgba(0,255,136,0.4), 0 0 40px rgba(0,255,136,0.15); }
}

/* Magnetic button */
.btn-magnetic {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════ 6. TABLE EFFECTS ═══════════════ */
.table-animate tbody tr {
    opacity: 0;
    transform: translateX(-10px);
    animation: tableRowIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.table-animate tbody tr:nth-child(1) { animation-delay: 0.03s; }
.table-animate tbody tr:nth-child(2) { animation-delay: 0.06s; }
.table-animate tbody tr:nth-child(3) { animation-delay: 0.09s; }
.table-animate tbody tr:nth-child(4) { animation-delay: 0.12s; }
.table-animate tbody tr:nth-child(5) { animation-delay: 0.15s; }
.table-animate tbody tr:nth-child(6) { animation-delay: 0.18s; }
.table-animate tbody tr:nth-child(7) { animation-delay: 0.21s; }
.table-animate tbody tr:nth-child(8) { animation-delay: 0.24s; }
.table-animate tbody tr:nth-child(9) { animation-delay: 0.27s; }
.table-animate tbody tr:nth-child(10) { animation-delay: 0.30s; }
.table-animate tbody tr:nth-child(n+11) { animation-delay: 0.33s; }
@keyframes tableRowIn {
    to { opacity: 1; transform: translateX(0); }
}
.table-animate tbody tr:hover {
    background: rgba(0,255,136,0.03) !important;
    transition: background 0.2s ease;
}

/* Row slide highlight */
.table-animate tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 #00ff88;
}
[dir="rtl"] .table-animate tbody tr:hover td:first-child {
    box-shadow: inset -3px 0 0 #00ff88;
}

/* ═══════════════ 7. SIDEBAR EFFECTS ═══════════════ */
.sidebar-link {
    position: relative;
    overflow: hidden;
}
.sidebar-link::after {
    content: '';
    position: absolute;
    bottom: 0; left: 50%;
    width: 0; height: 1px;
    background: linear-gradient(90deg, transparent, #00ff88, transparent);
    transition: width 0.3s ease, left 0.3s ease;
}
.sidebar-link:hover::after {
    width: 80%; left: 10%;
}
.sidebar-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    width: 3px; height: 60%;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #00ff88, #00d4ff);
    border-radius: 0 2px 2px 0;
    animation: sidebarActiveSlide 0.3s ease;
}
[dir="rtl"] .sidebar-link.active::before {
    left: auto; right: 0;
    border-radius: 2px 0 0 2px;
}
@keyframes sidebarActiveSlide {
    from { height: 0; }
    to { height: 60%; }
}

/* Section labels slide in */
.sidebar-section-label {
    animation: sidebarLabelIn 0.4s ease;
}
@keyframes sidebarLabelIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ═══════════════ 8. COUNTER/STATS ANIMATION ═══════════════ */
.counter-animate {
    display: inline-block;
    transition: transform 0.3s ease;
}
.counter-animate.counting {
    animation: counterPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes counterPop {
    0% { transform: scale(0.5); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

/* ═══════════════ 9. ALERT / TOAST EFFECTS ═══════════════ */
.admin-alert {
    animation: alertSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    position: relative;
    overflow: hidden;
}
.admin-alert::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    height: 100%; width: 3px;
}
.admin-alert-success::before { background: linear-gradient(180deg, #00ff88, #00d4ff); }
.admin-alert-error::before { background: linear-gradient(180deg, #ff3355, #ff6b35); }
@keyframes alertSlideIn {
    from { opacity: 0; transform: translateY(-15px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Auto-dismiss animation */
.admin-alert.dismissing {
    animation: alertDismiss 0.4s cubic-bezier(0.4, 0, 1, 1) forwards;
}
@keyframes alertDismiss {
    to { opacity: 0; transform: translateY(-10px) scale(0.96); height: 0; padding: 0; margin: 0; overflow: hidden; }
}

/* Toast notifications */
.toast-container {
    position: fixed;
    top: 20px; right: 20px;
    z-index: 99998;
    display: flex; flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
[dir="rtl"] .toast-container { right: auto; left: 20px; }
.toast-item {
    pointer-events: auto;
    padding: 12px 20px;
    border-radius: 10px;
    background: #0d1117;
    border: 1px solid rgba(255,255,255,0.08);
    font-size: 13px;
    color: #e8e8e8;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
    animation: toastIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    display: flex; align-items: center; gap: 10px;
    max-width: 380px;
}
.toast-item.toast-success { border-left: 3px solid #00ff88; }
.toast-item.toast-error { border-left: 3px solid #ff3355; }
.toast-item.toast-info { border-left: 3px solid #00d4ff; }
.toast-item.toast-out {
    animation: toastOut 0.3s ease forwards;
}
@keyframes toastIn {
    from { opacity: 0; transform: translateX(40px) scale(0.95); }
    to { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes toastOut {
    to { opacity: 0; transform: translateX(40px) scale(0.9); }
}

/* ═══════════════ 10. PROGRESS BAR ANIMATION ═══════════════ */
.progress-animate {
    position: relative;
    overflow: hidden;
}
.progress-animate > div {
    transition: width 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.progress-animate::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
    animation: progressShimmer 2s infinite;
}
@keyframes progressShimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* ═══════════════ 11. BADGE ANIMATIONS ═══════════════ */
.badge-pulse {
    animation: badgePulse 2s ease-in-out infinite;
}
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255,51,85,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(255,51,85,0); }
}
.badge-count-update {
    animation: badgeBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badgeBounce {
    0% { transform: scale(0.5); }
    60% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* ═══════════════ 12. PARTICLE BACKGROUND ═══════════════ */
#cyber-particles {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.cyber-particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0;
    animation: particleFloat linear infinite;
}
@keyframes particleFloat {
    0% { opacity: 0; transform: translateY(100vh) scale(0); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translateY(-20vh) scale(1); }
}

/* Grid line animation */
.grid-animate {
    background-image:
        linear-gradient(rgba(0,255,136,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,255,136,0.02) 1px, transparent 1px);
    background-size: 60px 60px;
    animation: gridScroll 20s linear infinite;
}
@keyframes gridScroll {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

/* ═══════════════ 13. CURSOR GLOW ═══════════════ */
#cursor-glow {
    position: fixed;
    width: 300px; height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,255,136,0.04), transparent 70%);
    pointer-events: none;
    z-index: 1;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s ease;
    will-change: left, top;
}

/* ═══════════════ 14. FORM INPUT EFFECTS ═══════════════ */
.form-input, .form-control, .form-select {
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease !important;
}
.form-input:focus, .form-control:focus, .form-select:focus {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,255,136,0.08), 0 0 0 2px rgba(0,255,136,0.1) !important;
}

/* Floating label */
.form-float {
    position: relative;
}
.form-float .form-input {
    padding-top: 20px;
}
.form-float label {
    position: absolute;
    top: 50%; left: 12px;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-muted);
    transition: all 0.2s ease;
    pointer-events: none;
}
.form-float .form-input:focus ~ label,
.form-float .form-input:not(:placeholder-shown) ~ label {
    top: 6px;
    transform: translateY(0);
    font-size: 9px;
    color: #00ff88;
}

/* ═══════════════ 15. SKELETON LOADING ═══════════════ */
.skeleton {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.06) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
    border-radius: 6px;
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skeleton-text { height: 14px; margin-bottom: 8px; }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px; }
.skeleton-circle { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-card { height: 120px; }

/* ═══════════════ 16. TYPING EFFECT ═══════════════ */
.typing-effect {
    overflow: hidden;
    border-right: 2px solid #00ff88;
    white-space: nowrap;
    animation: typing 2s steps(30) 0.5s forwards, typingBlink 0.6s step-end infinite;
    width: 0;
}
@keyframes typing {
    to { width: 100%; }
}
@keyframes typingBlink {
    50% { border-color: transparent; }
}

/* ═══════════════ 17. MODAL EFFECTS ═══════════════ */
.modal.fade .modal-dialog {
    transform: scale(0.9) translateY(-30px);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* ═══════════════ 18. TOGGLE SWITCH ANIMATION ═══════════════ */
.toggle-switch {
    width: 44px; height: 22px;
    background: rgba(255,255,255,0.1);
    border-radius: 11px;
    position: relative;
    cursor: pointer;
    transition: background 0.3s ease;
}
.toggle-switch.active {
    background: rgba(0,255,136,0.3);
}
.toggle-switch::after {
    content: '';
    position: absolute;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #888;
    top: 2px; left: 2px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.toggle-switch.active::after {
    left: 24px;
    background: #00ff88;
    box-shadow: 0 0 10px rgba(0,255,136,0.5);
}

/* ═══════════════ 19. DETAILS/ACCORDION ANIMATION ═══════════════ */
details {
    transition: all 0.3s ease;
}
details summary {
    transition: color 0.3s ease;
    user-select: none;
}
details summary:hover {
    color: #00ff88 !important;
}
details[open] summary {
    margin-bottom: 10px;
}
details[open] > *:not(summary) {
    animation: detailsOpen 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes detailsOpen {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ═══════════════ 20. CHART/GAUGE ANIMATIONS ═══════════════ */
svg path {
    transition: stroke-dasharray 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.gauge-animate circle {
    stroke-dashoffset: 100;
    animation: gaugeReveal 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes gaugeReveal {
    to { stroke-dashoffset: 0; }
}

/* ═══════════════ 21. NOTIFICATION DOT ═══════════════ */
.notification-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ff3355;
    display: inline-block;
    animation: dotPulse 2s ease-in-out infinite;
}
@keyframes dotPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,51,85,0.5); }
    50% { transform: scale(1.2); box-shadow: 0 0 0 6px rgba(255,51,85,0); }
}

/* ═══════════════ 22. HEAT MAP CELL ANIMATION ═══════════════ */
.heat-cell {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}
.heat-cell:hover {
    transform: scale(1.15);
    box-shadow: 0 0 12px currentColor;
    z-index: 2;
    position: relative;
}

/* ═══════════════ 23. SCROLLBAR STYLING ═══════════════ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(0,255,136,0.15);
    border-radius: 3px;
    transition: background 0.3s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(0,255,136,0.3); }

/* ═══════════════ 24. SELECTION COLOR ═══════════════ */
::selection {
    background: rgba(0,255,136,0.25);
    color: #fff;
}

/* ═══════════════ 25. SMOOTH SCROLL ═══════════════ */
html {
    scroll-behavior: smooth;
}

/* ═══════════════ 26. TEXT GRADIENT ANIMATION ═══════════════ */
.text-gradient-animate {
    background: linear-gradient(90deg, #00ff88, #00d4ff, #b464ff, #00ff88);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textGradientFlow 4s linear infinite;
}
@keyframes textGradientFlow {
    0% { background-position: 0% 50%; }
    100% { background-position: 300% 50%; }
}

/* ═══════════════ 27. IMAGE/MEDIA EFFECTS ═══════════════ */
.img-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-reveal.revealed {
    clip-path: inset(0 0% 0 0);
}

/* ═══════════════ 28. DASHBOARD WIDGET ENTRANCE ═══════════════ */
.widget-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    animation: widgetEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.widget-enter:nth-child(1) { animation-delay: 0.05s; }
.widget-enter:nth-child(2) { animation-delay: 0.1s; }
.widget-enter:nth-child(3) { animation-delay: 0.15s; }
.widget-enter:nth-child(4) { animation-delay: 0.2s; }
.widget-enter:nth-child(5) { animation-delay: 0.25s; }
.widget-enter:nth-child(6) { animation-delay: 0.3s; }
.widget-enter:nth-child(7) { animation-delay: 0.35s; }
.widget-enter:nth-child(8) { animation-delay: 0.4s; }
@keyframes widgetEnter {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ═══════════════ 29. RESPONSIVE MOTION REDUCTION ═══════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #cyber-particles, #cursor-glow { display: none !important; }
}

/* ═══════════════ 30. LIGHT THEME ADJUSTMENTS ═══════════════ */
[data-theme="light"] #cyber-preloader {
    background: radial-gradient(ellipse at 50% 40%, #f0fdfa 0%, #f7f9fc 45%, #ffffff 100%);
}
[data-theme="light"] .preloader-pattern {
    background-image:
        radial-gradient(circle at 0 0, rgba(0,153,92,0.08) 0, rgba(0,153,92,0.08) 1px, transparent 2px),
        radial-gradient(circle at 50px 50px, rgba(0,136,170,0.08) 0, rgba(0,136,170,0.08) 1px, transparent 2px);
}
[data-theme="light"] .preloader-glow {
    background: radial-gradient(circle, rgba(0,153,92,0.15) 0%, rgba(0,136,170,0.1) 40%, transparent 70%);
}
[data-theme="light"] .preloader-star-outer { stroke: #00995c; filter: drop-shadow(0 0 8px rgba(0,153,92,0.3)); }
[data-theme="light"] .preloader-star-inner { stroke: #0088aa; }
[data-theme="light"] .preloader-star-point { background: #00995c; box-shadow: 0 0 8px #00995c; }
[data-theme="light"] .preloader-logo { color: #fff; background: linear-gradient(135deg, #00995c 0%, #0088aa 100%); box-shadow: 0 0 30px rgba(0,136,170,0.35), 0 0 60px rgba(0,153,92,0.2); }
[data-theme="light"] .preloader-counter { color: #0088aa; text-shadow: 0 0 16px rgba(0,136,170,0.3); }
[data-theme="light"] .preloader-counter-pct { color: #00995c; }
[data-theme="light"] .preloader-status { color: rgba(0,0,0,0.55); }
[data-theme="light"] .preloader-brand-name { color: #0a1420; }
[data-theme="light"] .preloader-brand-tagline { color: #0088aa; }
[data-theme="light"] .preloader-corner { border-color: #00995c; }
[data-theme="light"] .preloader-corner::before { background: #00995c; box-shadow: 0 0 8px #00995c; }
[data-theme="light"] .preloader-tag { color: #00995c; border-color: #00995c; background: rgba(0,153,92,0.05); }
[data-theme="light"] .preloader-tag::before, [data-theme="light"] .preloader-tag::after { color: #0088aa; }

[data-theme="light"] #cursor-glow { background: radial-gradient(circle, rgba(0,100,50,0.03), transparent 70%); }
[data-theme="light"] .toast-item { background: rgba(255,255,255,0.95); color: #1a1a2e; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .glass-card { background: rgba(255,255,255,0.7) !important; border-color: rgba(0,0,0,0.06) !important; }
[data-theme="light"] .neon-hover::after { background: #fff; }
[data-theme="light"] .skeleton {
    background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.07) 50%, rgba(0,0,0,0.04) 75%);
    background-size: 200% 100%;
}