/* Base Styles and Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
    background: #ffffff;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Section Base Styles */
section {
    padding: 5rem 0;
    position: relative;
}

.section-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, #2c3e50 0%, #667eea 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
    opacity: 0;
    animation: titleReveal 1s ease-out forwards;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 2px;
    animation: underlineExpand 0.8s ease-out 0.5s both;
}

/* Enhanced Animation Classes */
.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275),
        transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.revealed {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.revealed-left,
.revealed-right,
.revealed-scale {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Enhanced Keyframe Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes underlineExpand {
    from {
        width: 0;
    }

    to {
        width: 60px;
    }
}

@keyframes pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Loading States */
body {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.loaded {
    opacity: 1;
}

/* Smooth scrolling enhancement */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

/* Accessibility - Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Enhanced focus styles for accessibility */
*:focus {
    outline: 2px solid #667eea;
    outline-offset: 2px;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
}

/* Custom Cursor Styles */
body.custom-cursor-active {
    cursor: none;
}

body.custom-cursor-active a,
body.custom-cursor-active button,
body.custom-cursor-active .btn,
body.custom-cursor-active [role="button"],
body.custom-cursor-active input[type="button"],
body.custom-cursor-active input[type="submit"] {
    cursor: none;
}

#custom-cursor-dot {
    position: fixed;
    width: 8px;
    height: 8px;
    background-color: #667eea;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
    animation: pulseCore 2s infinite ease-in-out;
}

#custom-cursor-outline {
    position: fixed;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease-out, width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}

#custom-cursor-outline svg {
    display: block;
    width: 100%;
    height: 100%;
}

.reticle-circle {
    stroke: rgba(102, 126, 234, 0.7);
    stroke-width: 1px;
    transition: stroke 0.2s ease;
}

.reticle-tick {
    stroke: rgba(102, 126, 234, 0.9);
    stroke-width: 1.5px;
    stroke-linecap: round;
    transition: stroke 0.2s ease, opacity 0.3s ease, transform 0.3s ease;
    /* animation: pulseOpacity 2.5s infinite ease-in-out; */
    /* Replaced by specific scan animations */
}

#tick-n {
    transform-origin: 25px 10px;
    /* North tick, origin at its base */
    animation: scanTickVertical 2.5s infinite ease-in-out;
}

#tick-e {
    transform-origin: 40px 25px;
    /* East tick, origin at its base */
    animation: scanTickHorizontal 2.5s infinite ease-in-out;
}

#tick-s {
    transform-origin: 25px 40px;
    /* South tick, origin at its base */
    animation: scanTickVertical 2.5s infinite ease-in-out;
}

#tick-w {
    transform-origin: 10px 25px;
    /* West tick, origin at its base */
    animation: scanTickHorizontal 2.5s infinite ease-in-out;
}

@keyframes scanTickVertical {

    0%,
    100% {
        transform: scaleY(1);
        opacity: 0.7;
    }

    50% {
        transform: scaleY(1.5);
        opacity: 1;
    }
}

@keyframes scanTickHorizontal {

    0%,
    100% {
        transform: scaleX(1);
        opacity: 0.7;
    }

    50% {
        transform: scaleX(1.5);
        opacity: 1;
    }
}

/* Keep pulseOpacity if needed elsewhere, or remove if not. For now, it's unused by ticks. */
/* @keyframes pulseOpacity { ... } */

/* Cursor states */
body.custom-cursor-active #custom-cursor-dot.interactive {
    background-color: #764ba2;
    /* Darker theme purple for interactive core */
    animation: pulseCore 0.7s infinite ease-in-out;
    /* Faster pulse */
}

body.custom-cursor-active #custom-cursor-outline.interactive .reticle-circle {
    stroke: rgba(118, 75, 162, 0.9);
    /* Darker theme purple */
}

body.custom-cursor-active #custom-cursor-outline.interactive .reticle-tick {
    stroke: rgba(118, 75, 162, 1);
    /* Fully opaque, darker theme purple */
    /* To make ticks extend, we'd animate x2/y2 attributes (via JS) or use scale transform with proper origin */
    /* For now, focusing on color/opacity change and the sonar ping */
    animation: pulseOpacity 1.5s infinite ease-in-out;
    /* Faster pulse on ticks */
}

/* Sonar Ping Effect */
.reticle-ping {
    stroke: rgba(118, 75, 162, 0.8);
    stroke-width: 1.5px;
    opacity: 0;
}

@keyframes sonarPing {
    0% {
        r: 0;
        opacity: 1;
        stroke-width: 2px;
    }

    80% {
        r: 20;
        /* Ping expands to the main circle radius */
        opacity: 0;
        stroke-width: 0.5px;
    }

    100% {
        r: 20;
        opacity: 0;
        stroke-width: 0;
    }
}

body.custom-cursor-active #custom-cursor-outline.interactive .reticle-ping.pinging {
    animation: sonarPing 0.7s ease-out forwards;
}

body.custom-cursor-active #custom-cursor-outline.interactive {
    /* transform: translate(-50%, -50%) scale(1.3); */
    /* Existing scale, removed as SVG children handle visual changes */
    /* opacity: 0.7; */
    /* Existing opacity, removed as SVG children handle visual changes */
    /* No direct style changes needed on the outline div itself for interactive if SVG children handle it */
}

body.custom-cursor-active #custom-cursor-dot.text-input {
    width: 2px;
    height: 20px;
    background-color: #333;
    border-radius: 1px;
    animation: blinkCaret 1s infinite steps(1, end);
}

@keyframes blinkCaret {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

body.custom-cursor-active #custom-cursor-outline.text-input {
    /* opacity: 0; */
    /* Old style */
    transform: translate(-50%, -50%) scale(0.7);
    /* Shrink reticle */
    opacity: 0.5;
}

body.custom-cursor-active #custom-cursor-outline.text-input .reticle-circle,
body.custom-cursor-active #custom-cursor-outline.text-input .reticle-tick {
    stroke: rgba(100, 100, 100, 0.5);
    /* Dim the reticle parts */
    animation: none;
    /* Disable idle animations on ticks */
}

/* Background Spotlight Effect */
:root {
    --mouse-x: 50%;
    --mouse-y: 50%;
}

body.spotlight-active {
    /* Apply to body or a specific container if full-page effect is too much */
    /* The gradient is subtle, adjust color and size as needed */
    /* Ensure this doesn't clash with existing section backgrounds if they are opaque */
    /* This effect will be layered under content. 
       If sections have solid backgrounds, it might not be visible there. 
       Consider applying to a wrapper div or ensuring sections have some transparency if desired.
       For now, applying to body and assuming it will show through where possible.
    */
    background: radial-gradient(circle 600px at var(--mouse-x) var(--mouse-y),
            rgba(102, 126, 234, 0.08) 0%,
            rgba(118, 75, 162, 0.05) 70%,
            transparent 100%),
        #ffffff;
    /* Fallback/base background color */
    /* Add transition for smoother appearance/disappearance if toggled */
    transition: background 0.3s ease-out;
}

@keyframes pulseCore {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.15);
        opacity: 1;
    }
}

/* Echo Ping Effect */
.reticle-ping-echo {
    stroke: rgba(118, 75, 162, 0.6);
    /* Slightly fainter than main ping */
    stroke-width: 1px;
    opacity: 0;
}

@keyframes sonarPingEcho {
    0% {
        r: 0;
        opacity: 0.8;
        stroke-width: 1.5px;
    }

    20% {
        /* Start a bit later visually or ensure it doesn't obscure main ping start */
        r: 0;
        opacity: 0.8;
    }

    100% {
        r: 23;
        /* Expands slightly further or same as main ping */
        opacity: 0;
        stroke-width: 0.5px;
    }
}

body.custom-cursor-active #custom-cursor-outline.interactive .reticle-ping-echo.pinging {
    animation: sonarPingEcho 0.8s ease-out forwards;
    /* Slightly longer or different timing */
    animation-delay: 0.1s;
    /* Delayed start for echo effect */
}

body.custom-cursor-active #custom-cursor-outline.interactive {
    /* transform: translate(-50%, -50%) scale(1.3); */
    /* Existing scale, removed as SVG children handle visual changes */
    /* opacity: 0.7; */
    /* Existing opacity, removed as SVG children handle visual changes */
    /* No direct style changes needed on the outline div itself for interactive if SVG children handle it */
}

body.custom-cursor-active #custom-cursor-dot.text-input {
    width: 2px;
    height: 20px;
    background-color: #333;
    border-radius: 1px;
    animation: blinkCaret 1s infinite steps(1, end);
}

@keyframes blinkCaret {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

body.custom-cursor-active #custom-cursor-outline.text-input {
    /* opacity: 0; */
    /* Old style */
    transform: translate(-50%, -50%) scale(0.7);
    /* Shrink reticle */
    opacity: 0.5;
}

body.custom-cursor-active #custom-cursor-outline.text-input .reticle-circle,
body.custom-cursor-active #custom-cursor-outline.text-input .reticle-tick {
    stroke: rgba(100, 100, 100, 0.5);
    /* Dim the reticle parts */
    animation: none;
    /* Disable idle animations on ticks */
}