/* ============================================================================
   ANIMATIONS.CSS - Keyframes, Preloader, Transitions, Effects
   ============================================================================ */

/* --------------------------------------------------------------------------
   [1] PRELOADER - Circular Progress (Hero-style rings)
   -------------------------------------------------------------------------- */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--color-void-black);
    z-index: var(--z-preloader);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.preloader.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

/* Rings Container - holds all circular elements */
.preloader-rings {
    position: relative;
    width: 280px;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Decorative rotating ring (like hero ring-2) */
.preloader-ring-deco {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px dashed var(--color-system-cyan);
    border-top-color: transparent;
    border-right-color: transparent;
    opacity: 0.6;
    filter: drop-shadow(0 0 8px var(--color-system-cyan))
            drop-shadow(0 0 15px rgba(0, 240, 255, 0.4));
    animation: preloaderRingSpin 8s linear infinite;
}

/* SVG Progress Circle */
.preloader-progress-svg {
    position: absolute;
    width: 240px;
    height: 240px;
    transform: rotate(-90deg); /* Start from top */
}

.progress-bg {
    fill: none;
    stroke: var(--color-border-active);
    stroke-width: 4;
    opacity: 0.3;
}

.progress-ring {
    fill: none;
    stroke: url(#progressGradient);
    stroke-width: 6;
    stroke-linecap: round;
    /* Circle circumference = 2 * PI * r = 2 * 3.14159 * 90 ≈ 565.49 */
    stroke-dasharray: 565.49;
    stroke-dashoffset: 565.49; /* Start empty (fully offset) */
    transition: stroke-dashoffset 0.3s ease;
    filter: drop-shadow(0 0 10px var(--color-orange-glow))
            drop-shadow(0 0 20px rgba(255, 119, 0, 0.3));
}

/* Center content (logo + percent) */
.preloader-center {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-icon-large {
    width: 70px;
    height: 70px;
    background: var(--color-tactical-orange);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: logoPulse 2s ease-in-out infinite;
    box-shadow: 0 0 30px rgba(255, 119, 0, 0.5);
}

.status-percent {
    font-family: var(--font-code);
    color: var(--color-tactical-orange);
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 119, 0, 0.6);
    letter-spacing: 2px;
}

/* Title below rings */
.preloader-title {
    font-family: var(--font-header);
    font-size: 2rem;
    color: var(--color-white);
    letter-spacing: 4px;
    animation: glitch-text 3s ease-in-out infinite;
    margin: 0;
}

/* Status text at bottom */
.preloader-content > .status-text {
    font-family: var(--font-code);
    color: var(--color-system-cyan);
    font-size: 0.85rem;
    animation: typing 2s steps(30) infinite;
    margin: 0;
}

/* Preloader-specific keyframes */
@keyframes preloaderRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes logoPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 30px rgba(255, 119, 0, 0.5);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 50px rgba(255, 119, 0, 0.7);
    }
}

/* Mobile responsive */
@media (max-width: 480px) {
    .preloader-rings {
        width: 220px;
        height: 220px;
    }

    .preloader-progress-svg {
        width: 190px;
        height: 190px;
    }

    .logo-icon-large {
        width: 55px;
        height: 55px;
    }

    .status-percent {
        font-size: 1.4rem;
    }

    .preloader-title {
        font-size: 1.6rem;
    }
}

/* --------------------------------------------------------------------------
   [2] KEYFRAME ANIMATIONS
   -------------------------------------------------------------------------- */

/* Rotation */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Pulse */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }
}

/* Glitch Skew */
@keyframes glitch-skew {
    0% {
        transform: skew(0deg);
    }
    20% {
        transform: skew(-8deg);
    }
    40% {
        transform: skew(8deg);
    }
    60% {
        transform: skew(-5deg);
    }
    80% {
        transform: skew(5deg);
    }
    100% {
        transform: skew(0deg);
    }
}

/* Glitch Text */
@keyframes glitch-text {
    0%, 90%, 100% {
        text-shadow: none;
    }
    92% {
        text-shadow:
            2px 0 var(--color-system-cyan),
            -2px 0 var(--color-tactical-orange);
    }
    94% {
        text-shadow:
            -2px 0 var(--color-system-cyan),
            2px 0 var(--color-tactical-orange);
    }
    96% {
        text-shadow: none;
    }
}

/* Typing Effect */
@keyframes typing {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}

/* Bounce In */
@keyframes bounceIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Slide In Right */
@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Slide In Left */
@keyframes slideInLeft {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Glow Pulse */
@keyframes glowPulse {
    0%, 100% {
        box-shadow: 0 0 10px var(--color-orange-glow);
    }
    50% {
        box-shadow: 0 0 25px var(--color-orange-glow);
    }
}

/* Shimmer */
@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Flicker */
@keyframes flicker {
    0%, 100% {
        opacity: 1;
    }
    41% {
        opacity: 1;
    }
    42% {
        opacity: 0.8;
    }
    43% {
        opacity: 1;
    }
    45% {
        opacity: 0.9;
    }
    46% {
        opacity: 1;
    }
}

/* --------------------------------------------------------------------------
   [3] HOVER & INTERACTION EFFECTS
   -------------------------------------------------------------------------- */

/* Hover Lift */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
}

/* Hover Glow */
.hover-glow {
    transition: box-shadow var(--transition-base);
}

.hover-glow:hover {
    box-shadow: var(--shadow-glow-orange);
}

/* Hover Scale */
.hover-scale {
    transition: transform var(--transition-base);
}

.hover-scale:hover {
    transform: scale(1.05);
}

/* --------------------------------------------------------------------------
   [4] SCROLL REVEAL ANIMATIONS
   -------------------------------------------------------------------------- */

/* Base Reveal */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(5px);
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        filter 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Reveal from Left */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal from Right */
.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Reveal Scale */
.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Stagger Delays for Grid Items */
.reveal:nth-child(1) { transition-delay: 0.1s; }
.reveal:nth-child(2) { transition-delay: 0.15s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.25s; }
.reveal:nth-child(5) { transition-delay: 0.3s; }
.reveal:nth-child(6) { transition-delay: 0.35s; }
.reveal:nth-child(7) { transition-delay: 0.4s; }
.reveal:nth-child(8) { transition-delay: 0.45s; }
.reveal:nth-child(9) { transition-delay: 0.5s; }

/* --------------------------------------------------------------------------
   [4.5] ADVANCED HOVER ANIMATIONS
   -------------------------------------------------------------------------- */

/* Magnetic Button Effect */
@keyframes magnetic-pull {
    0%, 100% {
        transform: translateX(0) translateY(0);
    }
    25% {
        transform: translateX(-2px) translateY(-2px);
    }
    75% {
        transform: translateX(2px) translateY(2px);
    }
}

/* Neon Flicker */
@keyframes neonFlicker {
    0%, 100% {
        text-shadow:
            0 0 10px var(--color-tactical-orange),
            0 0 20px var(--color-tactical-orange),
            0 0 30px var(--color-tactical-orange);
    }
    10%, 15%, 30%, 35%, 50%, 55% {
        text-shadow:
            0 0 5px var(--color-tactical-orange),
            0 0 10px var(--color-tactical-orange);
    }
}

/* Scan Line Animation */
@keyframes scanline {
    0% {
        transform: translateY(-100%);
    }
    100% {
        transform: translateY(100vh);
    }
}

/* Data Stream */
@keyframes dataStream {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* --------------------------------------------------------------------------
   [5] LOADING & SKELETON STATES
   -------------------------------------------------------------------------- */

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-panel-dark) 0%,
        var(--color-panel-light) 50%,
        var(--color-panel-dark) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-border-active);
    border-top-color: var(--color-tactical-orange);
    border-radius: 50%;
    animation: rotate 0.8s linear infinite;
}

/* --------------------------------------------------------------------------
   [6] PARTICLE EFFECTS (Enhanced via Canvas)
   -------------------------------------------------------------------------- */

/* Background Particle Glow */
@keyframes particleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.3;
    }
    50% {
        transform: translateY(-20px) translateX(10px);
        opacity: 0.7;
    }
}

/* --------------------------------------------------------------------------
   [7] SPECIAL EFFECTS
   -------------------------------------------------------------------------- */

/* Scanline Effect */
.scanline-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.1),
        rgba(0, 0, 0, 0.1) 1px,
        transparent 1px,
        transparent 2px
    );
    pointer-events: none;
    z-index: 10;
}

/* CRT Screen Curve (Subtle) */
.crt-effect {
    filter: contrast(1.1) brightness(1.05);
}

/* Chromatic Aberration on Hover */
.chromatic-hover {
    transition: var(--transition-base);
}

.chromatic-hover:hover {
    text-shadow:
        2px 0 var(--color-system-cyan),
        -2px 0 var(--color-tactical-orange);
}

/* --------------------------------------------------------------------------
   [8] RESPONSIVE ANIMATIONS
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    .preloader-title {
        font-size: 1.8rem;
    }

    .logo-icon-large {
        width: 60px;
        height: 60px;
    }

    .progress-bar {
        width: 250px;
    }

    /* Reduce animation complexity on mobile */
    .reveal {
        transform: translateY(20px);
    }
}

@media (max-width: 480px) {
    .preloader-title {
        font-size: 1.5rem;
    }

    .progress-bar {
        width: 200px;
    }

    /* Minimal animations for low-end devices */
    .reveal:nth-child(n) {
        transition-delay: 0s;
    }
}

/* --------------------------------------------------------------------------
   [9] HERO SECTION ANIMATIONS
   -------------------------------------------------------------------------- */

/* Slow Zoom Background */
@keyframes slowZoom {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.1);
    }
}

/* Title Glow Pulse */
@keyframes titleGlow {
    0%, 100% {
        text-shadow:
            0 0 20px rgba(255, 119, 0, 0.6),
            0 0 40px rgba(255, 119, 0, 0.4),
            0 10px 30px rgba(0, 0, 0, 0.8);
    }
    50% {
        text-shadow:
            0 0 30px rgba(255, 119, 0, 0.9),
            0 0 60px rgba(255, 119, 0, 0.6),
            0 10px 40px rgba(0, 0, 0, 0.9);
    }
}

/* Glitch Effect for Outline Text */
@keyframes glitchOutline {
    0%, 90%, 100% {
        text-shadow:
            2px 2px 0 rgba(255, 119, 0, 0.3),
            -2px -2px 0 rgba(0, 240, 255, 0.3);
    }
    92% {
        text-shadow:
            4px 0 0 rgba(255, 119, 0, 0.5),
            -4px 0 0 rgba(0, 240, 255, 0.5);
    }
    94% {
        text-shadow:
            -4px 0 0 rgba(255, 119, 0, 0.5),
            4px 0 0 rgba(0, 240, 255, 0.5);
    }
    96% {
        text-shadow:
            2px 2px 0 rgba(255, 119, 0, 0.3),
            -2px -2px 0 rgba(0, 240, 255, 0.3);
    }
}

/* Floating Geometric Shapes */
@keyframes floatGeo1 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(30px, -40px) rotate(180deg);
    }
}

@keyframes floatGeo2 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(-40px, 30px) rotate(-180deg);
    }
}

@keyframes floatGeo3 {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
    }
    25% {
        transform: translate(20px, -20px) rotate(90deg) scale(1.1);
    }
    75% {
        transform: translate(-20px, 20px) rotate(270deg) scale(0.9);
    }
}

/* Scroll Indicator Bounce */
@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(10px);
    }
}

/* Scroll Icon Pulse */
@keyframes scrollPulse {
    0%, 100% {
        opacity: 1;
        transform: translateY(0);
    }
    50% {
        opacity: 0.3;
        transform: translateY(8px);
    }
}

/* --------------------------------------------------------------------------
   [10] ACCESSIBILITY - Respect User Preferences
   -------------------------------------------------------------------------- */

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

    .preloader-logo,
    .logo-icon-large,
    .status-text {
        animation: none !important;
    }
}