/* ==========================================================================
   LIGHT THEME OVERRIDES — NEW TECH INDUCTION (index.html)
   Loaded AFTER vinayak-style.css. Converts dark surfaces to premium light.
   ========================================================================== */

/* Modern crisp typography & remove muddy retro 3D shadows */
:root {
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}
.font-display {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  letter-spacing: -0.025em !important;
}
/* Premium 3D Text Styling for Titles */
.text-3d {
  text-shadow: 
    0 1px 0 #cbd5e1,
    0 2px 0 #94a3b8,
    0 3px 0 #64748b,
    0 4px 1px rgba(0, 0, 0, 0.08),
    0 5px 6px rgba(0, 0, 0, 0.15) !important;
}

.text-3d.text-white,
.text-white .text-3d {
  text-shadow: 
    0 1px 0 #475569,
    0 2px 0 #334155,
    0 3px 0 #1e293b,
    0 4px 1px rgba(0, 0, 0, 0.3),
    0 5px 8px rgba(0, 0, 0, 0.5) !important;
}

.text-3d .bg-clip-text,
.text-3d .text-transparent,
.text-3d [class*="bg-clip-text"],
.text-3d [class*="text-transparent"] {
  text-shadow: none !important;
  filter: drop-shadow(0 2px 0 #dc2626) drop-shadow(0 3px 0 #b91c1c) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25)) !important;
}

.text-3d .text-\[\#F3010C\],
.text-3d .text-red-600,
.text-3d .text-red-500 {
  text-shadow: 
    0 1px 0 #fca5a5,
    0 2px 0 #f87171,
    0 3px 0 #dc2626,
    0 4px 1px rgba(185, 28, 28, 0.15),
    0 4px 6px rgba(185, 28, 28, 0.25) !important;
}

.text-3d .text-\[\#C9A84C\],
.text-3d .text-amber-500 {
  text-shadow: 
    0 1px 0 #fef08a,
    0 2px 0 #fde047,
    0 3px 0 #d97706,
    0 4px 1px rgba(180, 83, 9, 0.15),
    0 4px 6px rgba(180, 83, 9, 0.25) !important;
}


/* ---------- 1. Header / Navigation ---------- */
.hero-glass-nav {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid #e8ebee !important;
  box-shadow: 0 6px 24px rgba(17, 17, 17, 0.06) !important;
}

.hero-glass-nav.scrolled {
  background: rgba(255, 255, 255, 0.97) !important;
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.1) !important;
}

.nav-link-dark { color: #232a31 !important; }
.nav-link-dark:hover { color: #F20D0D !important; text-shadow: none !important; }
.nav-link-dark.active { color: #F20D0D !important; text-shadow: none !important; }

.mega-menu-dark {
  background: #ffffff !important;
  border: 1px solid #e8ebee !important;
  box-shadow: 0 24px 50px rgba(17, 17, 17, 0.12) !important;
}

.mega-link-dark { color: #4b5563 !important; }
.mega-link-dark:hover {
  color: #111111 !important;
  background: rgba(242, 13, 13, 0.07) !important;
  text-shadow: none !important;
}

/* Hamburger button (was white on dark) */
#main-header button[onclick="openMobileNav()"] {
  background: #f3f5f7 !important;
  color: #111111 !important;
}
#main-header button[onclick="openMobileNav()"] svg { color: #111111 !important; }
#main-header button[onclick="openMobileNav()"]:hover { background: #e9ecef !important; }

/* Logo drop-shadow: tone down on light */
#main-header .brand img,
#main-header a img { filter: drop-shadow(0 2px 8px rgba(242, 13, 13, 0.14)) !important; }

/* ---------- 2. Hero scene ---------- */
.hero-3d-scene {
  background: linear-gradient(180deg, #ffffff 0%, #f5f7f8 100%) !important;
  color: #111111;
}

/* Full-bleed hero video: keep it full-cover behind everything, on all breakpoints.
   (vinayak-main.js writes an inline transform for parallax — the !important
   transform here only applies until JS takes over, which is what we want.) */
#hero-3d-cinematic #hero-bg-layer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transform: translateZ(0);
  will-change: transform;
}

/* On phones the copy sits over the video, so the veil is stronger */
@media (max-width: 1023px) {
  #hero-3d-cinematic .hero-veil:first-of-type {
    background: linear-gradient(180deg, rgba(255,255,255,.93) 0%, rgba(255,255,255,.9) 62%, rgba(255,255,255,.82) 100%) !important;
  }
  #hero-3d-cinematic .hero-veil:last-of-type {
    background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%, rgba(255,255,255,.75) 100%) !important;
  }
}

/* Clean, crisp video: Zero blur, pure 1080p hardware-accelerated decode */
#hero-3d-cinematic #hero-bg-layer,
#testbay-video,
.testbay-video {
  image-rendering: -webkit-optimize-contrast !important;
  image-rendering: crisp-edges !important;
  filter: none !important;
  -webkit-filter: none !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

#hero-sparks-canvas { display: none !important; }

/* ---------- 3b. Foundry Test Bay video band (clean + crisp) ---------- */
#test-bay { min-height: 62vh; }
@media (min-width: 768px) { #test-bay { min-height: 70vh; } }

.testbay-video {
  transform: none;
  animation: none;
  will-change: auto;
}

/* glass copy card micro-lift */
#test-bay .rounded-3xl { transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s cubic-bezier(.22,1,.36,1); }
#test-bay .rounded-3xl:hover { transform: translateY(-4px); box-shadow: 0 40px 80px rgba(17,17,17,0.4); }

/* spec chips: light hover pop */
#test-bay .tb-chip { transition: all .3s ease; cursor: default; }
#test-bay .tb-chip:hover { background: rgba(243,1,12,.55) !important; border-color: rgba(243,1,12,.75) !important; }

/* ---------- 3. Hero feature mini badges ---------- */
.feature-mini-badge {
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e8ebee !important;
  box-shadow: 0 4px 16px rgba(17, 17, 17, 0.05) !important;
}

.feature-mini-badge:hover {
  background: #ffffff !important;
  border-color: rgba(242, 13, 13, 0.4) !important;
  box-shadow: 0 12px 26px rgba(242, 13, 13, 0.14) !important;
}

.feature-mini-badge .icon-circle {
  background: #fff5f5 !important;
  box-shadow: 0 0 0 1px rgba(17, 17, 17, 0.04) !important;
}


/* ---------- 6. Hero video modal (stays dark — intentional video overlay) ---------- */
.hero-video-modal {
  background: rgba(10, 10, 12, 0.86) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ---------- 7. Mobile drawer ---------- */
#mobile-nav {
  background: #ffffff !important;
  border-right: 1px solid #e8ebee !important;
  color: #111111 !important;
}
#mobile-nav .mobile-link { color: #374151 !important; }
#mobile-nav .mobile-link:hover { color: #F3010C !important; }
#mobile-nav .mobile-sub { background: #f8fafb !important; }
#mobile-nav .mobile-sub-link { color: #4b5563 !important; }
#mobile-nav [class~="text-gray-200"] { color: #374151 !important; }
#mobile-nav [class~="text-gray-300"] { color: #6b7280 !important; }
#mobile-nav [class~="bg-black/50"] { background: #f8fafb !important; }
#mobile-nav [class~="border-white/10"] { border-color: #e8ebee !important; }
#mobile-nav .mobile-nav-head { color: #111111 !important; }
#mobile-nav a:hover, #mobile-nav button:hover { color: #F3010C !important; }
#mobile-nav a[class*="hover:text-white"]:hover { color: #F3010C !important; }
#mobile-nav a[class*="hover:bg-white/10"]:hover { background: #f3f5f7 !important; }

/* ---------- 8. LED readout keeps its industrial dark look ---------- */
.led-display-panel {
  box-shadow: 0 10px 30px rgba(17, 17, 17, 0.35), inset 0 0 10px rgba(0, 0, 0, 0.9) !important;
}

/* ---------- 9. Contact CTA section (light) ---------- */
#section-contact-cta { background: linear-gradient(120deg, #fff6f6 0%, #faf8f5 55%, #ffffff 100%) !important; }
#section-contact-cta .cta-eyebrow { color: #F3010C !important; }
#section-contact-cta .cta-title { color: #111111 !important; }
#section-contact-cta .cta-text { color: #4b5563 !important; }