/* ============================================
   VEDANTA BARMAN — PORTFOLIO V2
   Enhanced 3D + Anime.js Stylesheet
   ============================================ */

/* ---------- Base ---------- */
body {
    background-color: #0a0a0c;
    color: #f8fafc;
    overflow-x: hidden;
    cursor: none;
}

/* ---------- Custom Cursor ---------- */
.cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    background: #14b8a6;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, width 0.2s ease, height 0.2s ease, background 0.2s ease;
    mix-blend-mode: difference;
}

.cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    border: 1.5px solid rgba(20, 184, 166, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, width 0.3s ease, height 0.3s ease, border-color 0.3s ease;
}

.cursor-ring.hover {
    width: 60px;
    height: 60px;
    border-color: rgba(20, 184, 166, 0.8);
}

/* ---------- Preloader ---------- */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #0a0a0c;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.6s ease, visibility 0.6s ease;
}

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

.preloader-content {
    text-align: center;
}

.preloader-logo {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 4rem;
    font-weight: 700;
    color: #14b8a6;
    margin-bottom: 1.5rem;
    letter-spacing: -0.05em;
}

.preloader-bar {
    width: 200px;
    height: 2px;
    background: #1f1f2e;
    border-radius: 1px;
    overflow: hidden;
    margin: 0 auto 1rem;
}

.preloader-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #14b8a6, #3b82f6);
    border-radius: 1px;
    transition: width 0.3s ease;
}

.preloader-percent {
    font-family: 'Fira Code', monospace;
    font-size: 0.75rem;
    color: #94a3b8;
}

/* ---------- Navigation ---------- */
.nav-blur {
    background: rgba(10, 10, 12, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(31, 31, 46, 0.5);
    transition: background 0.3s ease, border-color 0.3s ease;
}

.nav-logo {
    color: #f8fafc;
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: #14b8a6;
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ---------- Background Orbs ---------- */
.bg-orb-1 {
    position: fixed;
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(20, 184, 166, 0.06) 0%, rgba(10, 10, 12, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: orbFloat1 20s ease-in-out infinite;
}

.bg-orb-2 {
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.05) 0%, rgba(10, 10, 12, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: orbFloat2 25s ease-in-out infinite;
}

.bg-orb-3 {
    position: fixed;
    top: 40%;
    left: 50%;
    width: 40vw;
    height: 40vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.03) 0%, rgba(10, 10, 12, 0) 70%);
    z-index: -1;
    pointer-events: none;
    animation: orbFloat3 30s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 30px) scale(0.95); }
}

@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-40px, 20px) scale(1.08); }
    66% { transform: translate(20px, -30px) scale(0.92); }
}

@keyframes orbFloat3 {
    0%, 100% { transform: translate(-50%, 0) scale(1); }
    50% { transform: translate(-50%, -40px) scale(1.1); }
}

/* ---------- Text Effects ---------- */
.text-glow {
    text-shadow: 0 0 40px rgba(20, 184, 166, 0.4), 0 0 80px rgba(20, 184, 166, 0.15);
}

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

::-webkit-scrollbar-track {
    background: #0a0a0c;
}

::-webkit-scrollbar-thumb {
    background: #1f1f2e;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #14b8a6;
}

/* ---------- Anime.js Initial States ----------
   Hidden state is scoped to html.js-anim, which the inline head script adds.
   Without JS (or if script.js never runs) content stays visible instead of
   being stuck behind opacity:0. */
html.js-anim .hero-elem,
html.js-anim .scroll-item {
    opacity: 0;
    transform: translateY(30px);
}

/* ---------- Boot Failsafe ----------
   Hard escape hatch: if the preloader is still up after the deadline, the
   inline script adds .boot-fallback, which reveals everything unconditionally.
   This covers a stale cached script.js, a blocked CDN, main-thread starvation
   on weak GPUs, or any crash during init. */
.boot-fallback .hero-elem,
.boot-fallback .scroll-item {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.boot-fallback #preloader {
    display: none !important;
}

/* ---------- Three.js Canvas ---------- */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -2;
    pointer-events: none;
}

/* ---------- Tilt Card Effect ---------- */
.tilt-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.1s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    will-change: transform;
}

.tilt-card-inner {
    transform: translateZ(30px);
}

/* ---------- Magnetic Button ---------- */
.magnetic-btn {
    transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}

/* ---------- Live Systems Status Pills ---------- */
.system-card {
    transform-style: preserve-3d;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 9999px;
    font-family: 'Fira Code', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.03em;
    border: 1px solid;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.status-online {
    color: #14b8a6;
    border-color: rgba(20, 184, 166, 0.35);
    background: rgba(20, 184, 166, 0.08);
}

.status-online .status-dot {
    animation: statusPulse 2s ease-in-out infinite;
    box-shadow: 0 0 6px currentColor;
}

.status-locked {
    color: #94a3b8;
    border-color: rgba(148, 163, 184, 0.3);
    background: rgba(148, 163, 184, 0.06);
}

.status-internal {
    color: #3b82f6;
    border-color: rgba(59, 130, 246, 0.3);
    background: rgba(59, 130, 246, 0.06);
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ---------- Grid Pattern Overlay ---------- */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(31, 31, 46, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(31, 31, 46, 0.15) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index: -3;
    pointer-events: none;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black 30%, transparent 70%);
}

/* ---------- Noise Texture ---------- */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.015;
    z-index: 9997;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

/* ---------- Selection ---------- */
::selection {
    background: rgba(20, 184, 166, 0.3);
    color: #f8fafc;
}

/* ---------- Focus Styles ---------- */
a:focus-visible, button:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
    border-radius: 4px;
}

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

    .cursor-dot, .cursor-ring {
        display: none;
    }

    body {
        cursor: auto;
    }
}

/* ---------- Mobile Cursor Disable ---------- */
@media (hover: none), (pointer: coarse) {
    .cursor-dot, .cursor-ring {
        display: none;
    }
    body {
        cursor: auto;
    }
}