/**
 * HARBOUR AGENCY - Visual Effects Styles
 * Custom cursor, neural grid, magnetic effects, and animations
 */

/* ===== NEURAL GRID BACKGROUND ===== */

#canvas-container {
    position: fixed;
    top: 12vh;
    left: 0;
    width: 100%;
    height: 88vh;
    z-index: var(--z-background);
    pointer-events: none;
    opacity: 0.8;
}

#gridCanvas {
    width: 100%;
    height: 100%;
    display: block;
}

/* Background Rotation Animation from Reference */
/* Background Rotation Animation - Removed for Strict B&W */
body {
    background-color: var(--color-white);
    color: var(--color-black);
}

body[data-page="home"] {
    overflow-x: hidden;
}

/* Removed body::after/before animations that used varying grays */

/* Theme Animation Removed */

/* ===== LAYOUT & COMPONENTS ===== */



/* ===== SCROLL REVEAL ANIMATIONS ===== */

.reveal {

    opacity: 0;
    transform: translateY(40px);
    transition: all var(--duration-slow) var(--ease-smooth);
}

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

.reveal--fade {
    opacity: 0;
    transition: opacity var(--duration-slow) var(--ease-smooth);
}

.reveal--fade.active {
    opacity: 1;
}

.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

.stagger-4 {
    transition-delay: 400ms;
}

.stagger-5 {
    transition-delay: 500ms;
}

.stagger-6 {
    transition-delay: 600ms;
}

/* ===== GLASSMORPHISM ===== */

.glass {
    background: #fafafa79;
    border: 1px solid var(--color-black);
    backdrop-filter: blur(var(--blur-md));
    -webkit-backdrop-filter: blur(var(--blur-md));
    color: black;
}

.glass--strong {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(var(--blur-lg));
    -webkit-backdrop-filter: blur(var(--blur-lg));
}

/* ===== GRADIENT OVERLAYS ===== */

.gradient-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            transparent 0%,
            var(--color-overlay-light) 50%,
            var(--color-overlay-dark) 100%);
    pointer-events: none;
}

.gradient-overlay--radial {
    background: radial-gradient(circle at center,
            transparent 0%,
            var(--color-overlay-medium) 100%);
}

/* ===== LOADING STATES ===== */

.loading-skeleton {
    background: linear-gradient(90deg,
            var(--color-gray-dark) 25%,
            var(--color-gray-medium) 50%,
            var(--color-gray-dark) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
}

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

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

/* ===== HOVER EFFECTS ===== */

.hover-lift {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

.hover-lift:hover {
    transform: translateY(-8px);
}

.hover-glow {
    transition: box-shadow var(--duration-normal) var(--ease-smooth);
}

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

.hover-scale {
    transition: transform var(--duration-normal) var(--ease-smooth);
}

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

/* ===== PERFORMANCE TOGGLE ===== */

.effects-toggle {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    z-index: var(--z-overlay);
    padding: var(--space-3) var(--space-6);
    background: var(--color-glass-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    backdrop-filter: blur(var(--blur-md));
    transition: all var(--duration-normal) var(--ease-smooth);
}

.effects-toggle:hover {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.effects-toggle.active {
    border-color: var(--color-accent-primary);
    color: var(--color-accent-primary);
}

.effects-toggle.inactive {
    border-color: var(--color-accent-tertiary);
    color: var(--color-accent-tertiary);
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {

    .magnetic-wrap {
        transform: none !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ===== RESPONSIVE MOBILE BREAKPOINTS ===== */



/* ===== ACCESSIBILITY: REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {

    /* Disable all animations */
    body,
    body::before,
    body::after {
        animation: none !important;
    }

    /* Disable reveal animations */
    .reveal,
    .reveal--fade {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    /* Disable magnetic effects */
    .magnetic-wrap {
        transition: none !important;
    }

    /* Reduce all transitions to instant */
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== CURSOR POINTER FOR INTERACTIVE ELEMENTS ===== */
/* (Cursor styles omitted for brevity if not strictly needed given system cursor) */

/* ===== ARTIST GLITCH EFFECT (Ported from 404) ===== */
.artist-glitch {
    position: relative;
    display: inline-block;
    color: var(--color-text-primary);
}

.artist-glitch::before,
.artist-glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--color-white);
    /* Match background to hide main text parts */
    color: var(--color-text-primary);
}

.artist-glitch::before {
    left: 2px;
    text-shadow: -1px 0 red;
    clip: rect(24px, 550px, 90px, 0);
    animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

.artist-glitch::after {
    left: -2px;
    text-shadow: -1px 0 red;
    clip: rect(85px, 550px, 140px, 0);
    animation: glitch-anim 2.5s infinite linear alternate-reverse;
}

@keyframes glitch-anim {
    0% {
        clip: rect(10px, 9999px, 31px, 0);
    }

    20% {
        clip: rect(75px, 9999px, 80px, 0);
    }

    40% {
        clip: rect(20px, 9999px, 60px, 0);
    }

    60% {
        clip: rect(65px, 9999px, 120px, 0);
    }

    80% {
        clip: rect(15px, 9999px, 50px, 0);
    }

    100% {
        clip: rect(95px, 9999px, 130px, 0);
    }
}

@keyframes glitch-anim-2 {
    0% {
        clip: rect(65px, 9999px, 100px, 0);
    }

    20% {
        clip: rect(15px, 9999px, 50px, 0);
    }

    40% {
        clip: rect(90px, 9999px, 120px, 0);
    }

    60% {
        clip: rect(10px, 9999px, 35px, 0);
    }

    80% {
        clip: rect(75px, 9999px, 90px, 0);
    }

    100% {
        clip: rect(20px, 9999px, 60px, 0);
    }
}

/* ===== ANIMATIONS ===== */
@keyframes pulse {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

.pulse {
    animation: pulse 2s infinite;
}