/* ==========================================
   FLOOR IN - ULTRA LUXURY DESIGN SYSTEM
   ========================================== */

/* Base Resets */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    overflow-x: hidden;
}

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

.glass-nav {
    background: rgba(20, 30, 70, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.glass-nav-enhanced {
    background: rgba(2, 12, 27, 0.7);
    backdrop-filter: blur(30px) saturate(180%);
    -webkit-backdrop-filter: blur(30px) saturate(180%);
    border: 1px solid rgba(37, 99, 235, 0.2);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.05) inset,
        0 2px 20px rgba(37, 99, 235, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-nav-enhanced:hover {
    background: rgba(2, 12, 27, 0.85);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow:
        0 12px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(37, 99, 235, 0.15) inset,
        0 4px 30px rgba(37, 99, 235, 0.2);
}

.glass-card {
    background: rgba(20, 30, 70, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.3);
    box-shadow: 0 20px 60px rgba(37, 99, 235, 0.15);
}

/* ==========================================
   NAVIGATION
   ========================================== */

.nav-link {
    position: relative;
    color: rgba(255, 255, 255, 0.8);
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: #2563EB;
}

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

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

/* ==========================================
   BUTTONS & CTAs
   ========================================== */

.cta-button {
    position: relative;
    overflow: hidden;
}

.cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-button:active::before {
    width: 300px;
    height: 300px;
}

.shadow-gold {
    box-shadow: 0 10px 40px rgba(37, 99, 235, 0.4);
}

/* ==========================================
   HERO SECTION
   ========================================== */

.hero-bg {
    background:
        radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 87, 34, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #020C1B 0%, #0a1628 50%, #020C1B 100%);
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.shimmer-text {
    background: linear-gradient(90deg,
            #ffffff 0%,
            #2563EB 25%,
            #ffffff 50%,
            #2563EB 75%,
            #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: shimmer 8s linear infinite;
}

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

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

/* ==========================================
   TECHNOLOGY SECTIONS
   ========================================== */

.tech-section {
    position: relative;
}

.tech-label {
    display: inline-block;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 30px;
    border: 1px solid currentColor;
}

/* Glow Effects */
.glow-neon {
    box-shadow: 0 0 20px rgba(0, 240, 255, 0.6),
        0 0 40px rgba(0, 240, 255, 0.3);
    animation: pulseNeon 2s ease-in-out infinite;
}

.glow-heat {
    box-shadow: 0 0 20px rgba(255, 87, 34, 0.6),
        0 0 40px rgba(255, 87, 34, 0.3);
    animation: pulseHeat 2s ease-in-out infinite;
}

.glow-gold {
    box-shadow: 0 0 20px rgba(37, 99, 235, 0.6),
        0 0 40px rgba(37, 99, 235, 0.3);
    animation: pulseGold 2s ease-in-out infinite;
}

@keyframes pulseNeon {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(0, 240, 255, 0.6), 0 0 40px rgba(0, 240, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 240, 255, 0.8), 0 0 60px rgba(0, 240, 255, 0.5);
    }
}

@keyframes pulseHeat {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 87, 34, 0.6), 0 0 40px rgba(255, 87, 34, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(255, 87, 34, 0.8), 0 0 60px rgba(255, 87, 34, 0.5);
    }
}

@keyframes pulseGold {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(37, 99, 235, 0.6), 0 0 40px rgba(37, 99, 235, 0.3);
    }

    50% {
        box-shadow: 0 0 30px rgba(37, 99, 235, 0.8), 0 0 60px rgba(37, 99, 235, 0.5);
    }
}

/* Circuit Animation */
.circuit-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawCircuit 3s ease-in-out infinite;
}

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

    50%,
    100% {
        stroke-dashoffset: 0;
    }
}

.pulse {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.2);
    }
}

/* Thermal Cards */
.cold-side {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(20, 30, 70, 0.6) 100%);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.hot-side {
    background: linear-gradient(135deg, rgba(255, 87, 34, 0.1) 0%, rgba(20, 30, 70, 0.6) 100%);
    border: 1px solid rgba(255, 87, 34, 0.3);
}

/* Acid Drop Animation */
.acid-drop {
    animation: dropFall 3s ease-in-out infinite;
}

@keyframes dropFall {
    0% {
        transform: translateY(-100px) scale(1);
        opacity: 0;
    }

    30% {
        opacity: 1;
    }

    60% {
        transform: translateY(80px) scale(1);
    }

    70% {
        transform: translateY(80px) scale(1.2, 0.8);
    }

    80% {
        transform: translateY(85px) scale(0.9, 1.1);
    }

    85% {
        transform: translateY(85px) scale(1.1, 0.9);
    }

    100% {
        transform: translateY(200px) translateX(150px) scale(0.6);
        opacity: 0;
    }
}

/* ==========================================
   BENTO GRID
   ========================================== */

.bento-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (min-width: 768px) {
    .bento-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-auto-rows: 200px;
    }
}

.service-card {
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
    transition: left 0.5s ease;
}

.service-card:hover::before {
    left: 100%;
}

/* ==========================================
   PORTFOLIO
   ========================================== */

.client-card {
    border: 2px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
}

.client-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.1) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.client-card:hover::after {
    width: 300px;
    height: 300px;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 768px) {
    .shimmer-text {
        font-size: 3rem;
    }

    .glass-nav {
        padding: 1rem;
        border-radius: 20px;
    }

    .tech-section {
        padding: 3rem 0;
    }

    .bento-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   PREMIUM MICRO-INTERACTIONS
   ========================================== */

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}

/* Selection styling */
::selection {
    background: rgba(37, 99, 235, 0.3);
    color: #ffffff;
}

/* Focus states */
button:focus,
a:focus {
    outline: 2px solid #2563EB;
    outline-offset: 4px;
}

/* Smooth transitions for all interactive elements */
a,
button,
.glass-card,
.service-card,
.client-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Performance optimizations */
.hero-bg,
.circuit-line,
.acid-drop,
.shimmer-text {
    will-change: transform, opacity;
}

/* ============================================================
   3D WORLD INTEGRATION — translucent section gradients so the
   fixed Three.js canvas shows through the whole page.
   Canvas is veiled (opacity) to keep text content calm.
   ============================================================ */
#three-hero {
    opacity: 0.55;
}

html.light #three-hero {
    opacity: 0.45;
}

#about3d {
    opacity: 0.5;
}

html.light #about3d {
    opacity: 0.42;
}

@media (max-width: 768px) {
    #three-hero { opacity: 0.5; }
    html.light #three-hero { opacity: 0.42; }
    #about3d { opacity: 0.45; }
    html.light #about3d { opacity: 0.4; }
}

.from-floor-bg {
    --tw-gradient-from: rgba(2, 12, 27, 0.84) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(2, 12, 27, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-black {
    --tw-gradient-to: rgba(0, 0, 0, 0.9) var(--tw-gradient-to-position);
}

.to-floor-bg {
    --tw-gradient-to: rgba(2, 12, 27, 0.93) var(--tw-gradient-to-position);
}

/* ============================================================
   LIGHT MODE OVERRIDES (user-toggleable, default is DARK)
   Light glassmorphism: airy slate surfaces, real depth via
   shadows + ambient glows, gold stays gold (deepened slightly
   when used AS TEXT for readability).
   ============================================================ */

/* ---------- Foundation: layered gradient + ambient glows ---------- */
html.light body {
    background:
        radial-gradient(1100px 550px at 88% -8%, rgba(37, 99, 235, 0.12), transparent 60%),
        radial-gradient(1000px 650px at -12% 28%, rgba(148, 163, 184, 0.18), transparent 60%),
        linear-gradient(160deg, #f4f7fc 0%, #e4eaf5 45%, #d9e1ef 100%);
    background-attachment: fixed;
    color: #1a2433;
}

/* ---------- Glass surfaces ---------- */
html.light .glass-nav-enhanced {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html.light .glass-card {
    background: rgba(255, 255, 255, 0.62);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(15, 23, 42, 0.07);
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

html.light .glass-card:hover {
    box-shadow: 0 16px 42px rgba(15, 23, 42, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

html.light .client-card {
    border-color: rgba(15, 23, 42, 0.08);
    background: rgba(255, 255, 255, 0.5);
}

/* Fullscreen menu overlay */
html.light .bg-floor-bg\/90 {
    background-color: rgba(240, 244, 250, 0.94);
}

/* ---------- Text system ---------- */
html.light .text-white {
    color: #16202f;
}

/* Keep white text where it intentionally sits on solid dark/gold surfaces */
html.light [class*="bg-floor-gold"] .text-white,
html.light [class*="bg-gray-9"] .text-white,
html.light [class*="bg-slate-9"] .text-white,
html.light [class*="bg-neutral-9"] .text-white,
html.light [class*="bg-black"] .text-white {
    color: #ffffff;
}

html.light .text-white\/80 { color: #243046; }
html.light .text-white\/70 { color: #334155; }
html.light .text-white\/60 { color: #475569; }
html.light .text-white\/50 { color: #4d5a70; }
html.light .text-white\/40 { color: #5a6679; }
html.light .text-gray-300 { color: #64748b; }
html.light .text-gray-400 { color: #5b6b82; }

html.light .text-floor-muted { color: #5b6b82; }
html.light .text-floor-gold { color: #1D4ED8; }
html.light .text-floor-neon { color: #0e7490; }
html.light .text-floor-heat { color: #dc4a0a; }

html.light .text-amber-300 { color: #b45309; }

/* Technical diagram chips: keep the "dark chip + glowing label" look */
html.light .bg-black\/40 {
    background-color: rgba(30, 41, 59, 0.88);
}

html.light .bg-black\/60 {
    background-color: rgba(15, 23, 42, 0.82);
}
html.light .text-red-300 { color: #b91c1c; }
html.light .text-purple-300 { color: #7e22ce; }
html.light .text-yellow-300 { color: #a16207; }
html.light .text-yellow-400 { color: #a16207; }
html.light .text-cyan-300 { color: #0e7490; }
html.light .text-blue-300 { color: #1d4ed8; }
html.light .text-green-300 { color: #15803d; }
html.light .text-emerald-300 { color: #047857; }
html.light .text-orange-300 { color: #c2410c; }

html.light .bg-floor-surface { background: rgba(255, 255, 255, 0.7); }
html.light .border-floor-muted\/20 { border-color: rgba(15, 23, 42, 0.12); }
html.light .border-floor-muted { border-color: rgba(15, 23, 42, 0.25); }

/* ---------- Gradients: kill dark endpoints ---------- */
html.light .from-floor-bg {
    --tw-gradient-from: rgba(233, 238, 246, 0.82) var(--tw-gradient-from-position);
    --tw-gradient-to: rgba(233, 238, 246, 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

html.light .to-black,
html.light .to-gray-900,
html.light .to-slate-900,
html.light .to-floor-bg {
    --tw-gradient-to: rgba(219, 227, 240, 0.92) var(--tw-gradient-to-position);
}

html.light [class*="via-gray-9"],
html.light [class*="via-slate-9"],
html.light [class*="via-blue-9"] {
    --tw-gradient-stops: var(--tw-gradient-from), rgba(203, 213, 225, 0.35) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* Hero: bright wash over the photo instead of murky dark */
html.light #hero > .absolute.inset-0.bg-gradient-to-br {
    background-image: linear-gradient(135deg, rgba(240, 244, 250, 0.78) 0%, rgba(216, 224, 238, 0.45) 45%, rgba(240, 244, 250, 0.78) 100%);
}

html.light #hero div[style*="background-image"] {
    opacity: 0.16 !important;
    filter: saturate(0.85);
}

html.light .hero-bg {
    background:
        radial-gradient(circle at 20% 50%, rgba(0, 240, 255, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(255, 87, 34, 0.06) 0%, transparent 50%),
        linear-gradient(135deg, #eef2f7 0%, #dfe6f1 50%, #eef2f7 100%);
}

/* Shimmer headline: slate -> royal blue sweep, tuned for light bg */
html.light .shimmer-text {
    background: linear-gradient(90deg,
            #24344d 0%,
            #1D4ED8 25%,
            #24344d 50%,
            #3B82F6 75%,
            #24344d 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ---------- Buttons ---------- */
html.light .bg-floor-muted.text-floor-bg {
    background: #1e293b;
    color: #f8fafc;
}

html.light .bg-floor-muted.text-floor-bg:hover {
    background: #334155;
}

html.light .border-floor-muted.text-floor-muted {
    border-color: rgba(15, 23, 42, 0.35);
    color: #334155;
}

html.light .border-floor-muted.text-floor-muted:hover {
    background: #1e293b;
    color: #ffffff;
}

html.light .hover\:bg-white\/20:hover { background: rgba(15, 23, 42, 0.08); }

/* ---------- Footer ---------- */
html.light footer,
html.light .footer {
    border-color: rgba(15, 23, 42, 0.10);
}

html.light footer .absolute.inset-0,
html.light .footer .absolute.inset-0 {
    background: linear-gradient(to bottom, rgba(238, 242, 247, 0.55), rgba(219, 227, 240, 0.85));
}

/* ---------- Logos: white logo would vanish on light glass ---------- */
html.light nav img.brightness-0,
html.light footer img.brightness-0 {
    filter: brightness(0);
    opacity: 0.85;
}

/* ---------- Mobile Overflow Fixes ---------- */
.comparison-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.esd-diagram-wrapper {
    overflow: hidden;
}

@media (max-width: 767px) {
    .esd-diagram-wrapper .relative {
        transform: perspective(1000px) rotateX(55deg) rotateZ(-45deg) scale(0.65) !important;
    }
}

/* ---------- Blog category filter: swipeable single row on mobile ---------- */
.category-scroll {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.category-scroll::-webkit-scrollbar {
    display: none;
}
@media (max-width: 767px) {
    .category-scroll {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ---------- Controls ---------- */
html.light .theme-toggle { color: #1a2433; }
html.light .theme-toggle:hover { background: rgba(15, 23, 42, 0.07); }
html.light .burger-line { background: #1a2433; }