/* ==========================================================================
   SODAGAR ONLINE - ULTRA-MODERN ANIMATION SYSTEM
   Inspired by Apple, Linear, Stripe, Vercel
   ========================================================================== */

/* --- 1. GLOBAL VARIABLES & TIMING --- */
:root {
    /* Ultra-smooth cinematic easing */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    
    /* Animation Durations */
    --duration-fast: 300ms;
    --duration-normal: 600ms;
    --duration-slow: 1000ms;
    --duration-epic: 1500ms;
}

/* --- 2. HARDWARE ACCELERATION (GPU) --- */
.gpu-accel {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform, opacity;
}

/* --- 3. SCROLL REVEAL ANIMATIONS --- */
.reveal-up {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity var(--duration-epic) var(--ease-out-expo), 
                transform var(--duration-epic) var(--ease-out-expo);
    will-change: opacity, transform;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-blur {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-epic) var(--ease-out-expo),
                transform var(--duration-epic) var(--ease-out-expo);
}

.reveal-blur.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Delays */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --- 4. (Background system moved to background.css) --- */

/* --- 5. CARD & GLASSMORPHISM MOTION --- */
.premium-card {
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-normal) var(--ease-out-expo),
                box-shadow var(--duration-normal) var(--ease-out-expo),
                border-color var(--duration-normal) var(--ease-out-expo);
    transform: translateZ(0);
}

.premium-card::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
    transform: skewX(-25deg);
    transition: left 0.7s var(--ease-out-expo);
    z-index: 1;
}

.premium-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0,0,0,0.6), 0 0 30px rgba(13, 110, 253, 0.15);
    border-color: #a855f7;
}

.premium-card:hover::before {
    left: 200%;
}

/* --- 6. BUTTON MICROINTERACTIONS --- */
.premium-btn {
    position: relative;
    overflow: hidden;
    transition: transform var(--duration-fast) var(--ease-smooth),
                box-shadow var(--duration-fast) var(--ease-smooth);
}

.premium-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-smooth);
}

.premium-btn:hover {
    transform: translateY(-2px);
}

.premium-btn:hover::after {
    opacity: 1;
}

.premium-btn:active {
    transform: scale(0.96);
}

/* Ripple Glow on click (handled via JS injecting a span) */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, transparent 60%);
    transform: scale(0);
    animation: rippleAnim 600ms linear;
    pointer-events: none;
}

@keyframes rippleAnim {
    to { transform: scale(4); opacity: 0; }
}

/* --- 7. NAVBAR SCROLL EFFECT --- */
.navbar-scrolled {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    padding: 1rem 5% !important;
}

.navbar {
    transition: background var(--duration-normal) var(--ease-smooth),
                backdrop-filter var(--duration-normal) var(--ease-smooth),
                padding var(--duration-normal) var(--ease-smooth),
                box-shadow var(--duration-normal) var(--ease-smooth);
}

/* --- 8. GLITCH & CYBER TEXT --- */
@keyframes cyberGlitch {
    0% { clip-path: inset(10% 0 80% 0); transform: translate(-2px, 2px); }
    20% { clip-path: inset(80% 0 5% 0); transform: translate(2px, -2px); }
    40% { clip-path: inset(30% 0 50% 0); transform: translate(-2px, 2px); }
    60% { clip-path: inset(100% 0 0% 0); transform: translate(2px, -2px); }
    80% { clip-path: inset(50% 0 30% 0); transform: translate(-2px, 2px); }
    100% { clip-path: inset(0 0 0 0); transform: translate(0); }
}

.glitch-hover:hover {
    animation: cyberGlitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* --- 9. MICRO PULSE INDICATORS (LIVE) --- */
@keyframes pulseDot {
    0% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(39, 201, 63, 0); }
    100% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); }
}

.live-indicator {
    width: 8px; height: 8px;
    background-color: #27c93f;
    border-radius: 50%;
    display: inline-block;
    animation: pulseDot 2s infinite;
}

/* --- 10. LOADING SKELETON (SHIMMER) --- */
@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

.skeleton-load {
    background: linear-gradient(90deg, rgba(255,255,255,0.03) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.03) 75%);
    background-size: 1000px 100%;
    animation: shimmer 2s infinite linear;
    border-radius: 4px;
}

/* Adaptive Mobile Reduction */
@media (max-width: 768px) {
    .reveal-up { transform: translateY(20px); }
    .premium-card:hover { transform: translateY(-4px) scale(1); }
    .ambient-orb { animation: none; }
}

/* =====================================================
   11. SODAGAR_OS PANEL — TERMINAL ANIMATIONS
   ===================================================== */

/* Scanline sweep animation across the panel */
@keyframes scanline {
    0%   { top: -10%; }
    100% { top: 110%; }
}

/* Blinking cursor at the end of a line */
@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* Typing reveal: text appears char-by-char via width expansion */
@keyframes typeReveal {
    from { width: 0; opacity: 0; }
    to   { width: 100%; opacity: 1; }
}

/* Fade + slide up for each data-stream row */
@keyframes streamFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Flicker glow for the "highlight" / STATUS line */
@keyframes statusFlicker {
    0%, 96%, 100% { opacity: 1; text-shadow: 0 0 10px rgba(255, 42, 42, 0.8); }
    97%           { opacity: 0.6; text-shadow: none; }
    98%           { opacity: 1; text-shadow: 0 0 20px rgba(255, 42, 42, 1); }
    99%           { opacity: 0.8; }
}

/* Subtle card pulse glow */
@keyframes panelPulse {
    0%, 100% { box-shadow: 0 0 30px rgba(168,85,247,0.12), 0 8px 32px rgba(0,0,0,0.5); }
    50%       { box-shadow: 0 0 50px rgba(168,85,247,0.22), 0 8px 32px rgba(0,0,0,0.5); }
}

/* Apply pulse to mockup card */
.mockup-card {
    animation: panelPulse 4s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

/* Scanline overlay on top of the panel */
.mockup-card::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(168,85,247,0.4), rgba(255,255,255,0.15), rgba(168,85,247,0.4), transparent);
    animation: scanline 4s linear infinite;
    pointer-events: none;
    z-index: 10;
}

/* Data stream rows: staggered fade-in */
.data-stream {
    animation: streamFadeIn 0.6s var(--ease-out-expo) both;
    overflow: hidden;
    white-space: nowrap;
}

.data-stream:nth-child(1) { animation-delay: 0.3s; }
.data-stream:nth-child(2) { animation-delay: 0.7s; }
.data-stream:nth-child(3) { animation-delay: 1.1s; }

/* The STATUS (highlight) line flickers like a real terminal */
.data-stream.highlight {
    animation: streamFadeIn 0.6s var(--ease-out-expo) 1.1s both,
               statusFlicker 6s ease-in-out 2s infinite;
}

/* Blinking cursor appended after last data-stream line */
.data-stream.highlight::after {
    content: '█';
    display: inline-block;
    margin-left: 4px;
    font-size: 0.8em;
    animation: cursorBlink 1s step-end infinite;
    color: #a855f7;
}