/* =============================================================================
   Vektor Space – Main Stylesheet
   Supplement to Tailwind CDN; compiled CSS goes here in production.
   ============================================================================= */

/* ── Brand Design Tokens ────────────────────────────────────────────────────── */

:root {
    /* Dark Glass-Morphism Theme Palette */
    --color-dark:         #0a0a0f;
    --color-dark-light:   #1a1a25;
    --color-accent:       #c6a77d;
    --color-accent-hover: #e0c095;
    --color-gold:         #c6a77d;
    --color-gold-light:   #e0c095;

    /* Neutral scale - dark theme */
    --color-white:        #ffffff;
    --color-gray-100:     #f3f4f6;
    --color-gray-200:     #e5e7eb;
    --color-gray-300:     #d1d5db;
    --color-gray-400:     #9ca3af;
    --color-gray-500:     #6b7280;
    --color-gray-600:     #4b5563;
    --color-gray-700:     #374151;
    --color-gray-800:     #1f2937;
    --color-gray-900:     #0f0f1a;

    /* Brand accent for legacy support */
    --color-navy:         #0a0a0f;
    --color-navy-mid:     #1a1a25;
    --color-navy-dark:    #0a0a0f;
    --color-navy-light:   #f3f4f6;

    --color-royal:        #1E4DB7;
    --color-royal-mid:    #2B5ED4;
    --color-royal-dark:   #163A8A;
    --color-royal-light:  #EEF2FB;

    --color-charcoal:     #1a1a25;
    --color-charcoal-dark:#0a0a0f;
    --color-charcoal-light:#f3f4f6;

    /* Typography */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Inter', 'SF Mono', 'Fira Code', monospace;

    /* Border radius */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(60,64,67,0.10);
    --shadow-md: 0 2px 6px rgba(60,64,67,0.15), 0 1px 2px rgba(60,64,67,0.10);
    --shadow-lg: 0 4px 12px rgba(60,64,67,0.15), 0 2px 4px rgba(60,64,67,0.10);
    --shadow-xl: 0 8px 24px rgba(60,64,67,0.18), 0 4px 8px rgba(60,64,67,0.12);

    /* Motion */
    --ease-default: cubic-bezier(0.4, 0.0, 0.2, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1);
    --duration-fast:   150ms;
    --duration-normal: 250ms;
    --duration-slow:   400ms;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: #0a0a0f;
    color: #f3f4f6;
    overflow-x: hidden;
    cursor: none;          /* Custom cursor active on desktop */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@media (max-width: 767px) {
    body { cursor: auto; }
}

/* Custom cursor: hide native on desktop — restore pointer on interactive elements */
@media (min-width: 768px) {
    *, *::before, *::after {
        cursor: none !important;
    }

    /* Restore the pointer/hand cursor on clickable elements so users know what's clickable */
    a, button, [role="button"], label, select,
    input[type="submit"], input[type="button"], input[type="reset"],
    input[type="checkbox"], input[type="radio"],
    summary, [tabindex]:not([tabindex="-1"]) {
        cursor: pointer !important;
    }

    input[type="text"], input[type="email"], input[type="password"],
    input[type="search"], input[type="tel"], input[type="url"],
    input[type="number"], textarea {
        cursor: text !important;
    }
}

/* ── Logo Wordmark ─────────────────────────────────────────────────────────── */

.vs-wordmark {
    font-family: var(--font-sans);
    font-size: 20px;
    letter-spacing: -0.02em;
    white-space: nowrap;
    line-height: 1;
}

.vs-w-vector {
    color: #ffffff;
    font-weight: 700;
}

.vs-w-spaces {
    color: var(--color-accent);
    font-weight: 400;
}

/* Footer wordmark: light on dark */
.vs-w-footer-v {
    color: #ffffff;
    font-weight: 600;
}

.vs-w-footer-s {
    color: var(--color-accent);
    font-weight: 400;
}

/* ── Custom Cursor ─────────────────────────────────────────────────────────── */

.cursor-dot,
.cursor-outline {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    z-index: 9999;
    pointer-events: none;
}

.cursor-dot {
    width: 5px;
    height: 5px;
    background-color: var(--color-accent);
    transition: transform 0.1s ease;
}

.cursor-outline {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(198, 167, 125, 0.4);
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.cursor-outline.hover {
    width: 60px;
    height: 60px;
    background-color: rgba(198, 167, 125, 0.15);
    border-color: var(--color-accent-hover);
}

/* ── Film Grain Overlay ────────────────────────────────────────────────────── */

.noise {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ── Navigation ────────────────────────────────────────────────────────────── */

.glass-nav {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 0.75rem;
}

/* ── Hero ──────────────────────────────────────────────────────────────────── */

.hero-gradient {
    background: radial-gradient(circle at 50% 50%, rgba(198, 167, 125, 0.08) 0%, transparent 55%);
}

.hero-text-line.revealed {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* CSS fallback: if JS never fires, reveal hero lines via animation */
@keyframes heroLineReveal {
    0%   { transform: translateY(100%); opacity: 0; }
    100% { transform: translateY(0);    opacity: 1; }
}

.hero-text-line {
    animation: heroLineReveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.2s forwards;
}

.parallax-layer {
    will-change: transform;
}

/* ── Text Reveal Mask ─────────────────────────────────────────────────────── */

.text-reveal {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* ── Morphing Shape (SVG nav logo) ───────────────────────────────────────── */

.morphing-shape {
    transition: d 0.5s ease-in-out;
}

/* ── Text & Image Reveal Animations ───────────────────────────────────────── */

.char {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.8s;
}

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

.image-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.image-reveal.revealed {
    clip-path: inset(0 0 0 0);
}

/* ── Service Cards ─────────────────────────────────────────────────────────── */

.service-card {
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
}

/* Legacy – kept for backwards compat */
.horizontal-scroll-section {
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
}
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── Services Marquee ──────────────────────────────────────────────────────── */
.services-marquee-outer {
    width: 100%;
    overflow: hidden;
    cursor: default;
}

.services-marquee-track {
    display: flex;
    width: max-content;
    padding: 16px 24px 24px;
    gap: 20px;
}

/* 3D perspective for card tilt */
.svc-card {
    perspective: 800px;
    transform-style: preserve-3d;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    will-change: transform;
    min-height: 320px;
}

/* Border SVG overlay sizing */
.svc-border-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    pointer-events: none;
    overflow: visible;
}

.svc-border-rect {
    vector-effect: non-scaling-stroke;
}

/* ── Process Timeline ──────────────────────────────────────────────────────── */

.process-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2s ease-out;
}

.process-line.animate {
    stroke-dashoffset: 0;
}

/* ── Project Cards ─────────────────────────────────────────────────────────── */

.project-card img {
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s ease;
}

/* ── Contact / CTA Section ─────────────────────────────────────────────────── */

.cta-gradient {
    background: linear-gradient(135deg, #1a1a25 0%, #0a0a0f 50%, #1a1a25 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0%   { background-position: 0%   50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0%   50%; }
}

/* Form underline animation */
.input-line {
    background: linear-gradient(90deg, transparent, #c6a77d, transparent);
    height: 2px;
    width: 0;
    transition: width 0.4s ease;
}

.input-group:focus-within .input-line {
    width: 100%;
}

/* ── Scroll-triggered Opacity States ──────────────────────────────────────── */

.manifesto-reveal.revealed,
.service-header.revealed,
.process-header.revealed,
.work-header.revealed,
.contact-header.revealed,
.stat-item.revealed,
.process-step.revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Utility ────────────────────────────────────────────────────────────────── */

.counter {
    font-variant-numeric: tabular-nums;
}

/* Skip to content link (accessibility) */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    background: var(--color-accent);
    color: #0a0a0f;
    padding: 0.5rem 1rem;
    border-radius: 0 0 0.5rem 0.5rem;
    font-weight: 600;
    z-index: 10000;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ── Draw Animation for SVG paths ─────────────────────────────────────────── */

@keyframes draw {
    0%   { stroke-dashoffset: 1000; }
    100% { stroke-dashoffset: 0; }
}

/* ── Additional Scroll-reveal States ──────────────────────────────────────── */

.work-item.revealed,
.contact-form.revealed,
.contact-info.revealed,
.testimonial-container.revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* ── CSS Animation Fallbacks ─────────────────────────────────────────────── */
/* These ensure animations work even if Tailwind CDN runtime fails to
   generate the custom utility classes (common on mobile Safari).           */

@keyframes fadeUp {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    0%   { transform: scale(0.9); opacity: 0; }
    100% { transform: scale(1);   opacity: 1; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50%      { transform: translateY(-20px); }
}

.animate-fade-up {
    animation: fadeUp 1s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 1s ease-out forwards;
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* ── Navbar CSS Fallback ─────────────────────────────────────────────────── */
/* If JS fails to remove -translate-y-full, this keyframe ensures the
   navbar still slides in after a short delay.                              */

@keyframes navReveal {
    0%   { transform: translateY(-100%); }
    100% { transform: translateY(0); }
}

#navbar {
    animation: navReveal 0.5s ease-out 0.8s forwards;
}

/* ── Mobile Menu z-index fix ─────────────────────────────────────────────── */
/* Must sit above everything (navbar z-1000, demo-topbar z-9999)
   so the close button and links are clickable.                            */

#mobile-menu {
    z-index: 10001 !important;
}

/* Push close button below the demo topbar (40px tall) */
#mobile-menu-close {
    top: 3.25rem !important;  /* 52px — safely below 40px topbar */
}

/* ── Glass-Morphism Utilities ──────────────────────────────────────────────── */

.glass {
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.05);
}

.glass-subtle {
    background: rgba(255,255,255,0.01);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,0.03);
}

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

/* ── Gradient Utilities ────────────────────────────────────────────────────── */

.gradient-gold {
    background: linear-gradient(135deg, #c6a77d 0%, #e0c095 100%);
}

.gradient-gold-subtle {
    background: linear-gradient(135deg, rgba(198,167,125,0.1) 0%, rgba(224,192,149,0.05) 100%);
}

.gradient-dark {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a25 100%);
}

.gradient-dark-accent {
    background: linear-gradient(135deg, #0a0a0f 0%, #1a1a25 100%),
                linear-gradient(135deg, rgba(198,167,125,0.03) 0%, rgba(224,192,149,0.01) 100%);
}

/* ── Animation Utilities ──────────────────────────────────────────────────── */

.fade-in-up {
    animation: fadeInUp 0.8s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.spin-slow {
    animation: spin 8s linear infinite;
}

.pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.shimmer {
    animation: shimmer 2s infinite;
}

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