/* ==========================================================================
   Agnirath Aerospace - Global Theme & Interaction Enhancements
   ========================================================================== */

/* Typography & Base */
html {
  scroll-behavior: smooth;
  font-family:
    "DM Sans", var(--font-body, system-ui, -apple-system, sans-serif);
  background-color: rgb(9, 10, 12);
  color: #ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Montserrat", var(--font-primary, system-ui, sans-serif);
}

/* Content Visibility: Ensure all pictures, media, and animation wrappers are 100% visible */
[data-animation-role="image"],
[data-animation-role="block-element"],
.transition,
.transition--fade,
.transition--root-hidden,
.transition.transition--fade.transition--root-hidden,
.transition.transition--fade.transition--root-hidden
  [data-animation-role="image"],
.transition.transition--fade.transition--root-hidden
  [data-animation-role="block-element"],
.transition.transition--fade:not(.transition--root-hidden),
.transition.transition--slide:not(.transition--root-hidden),
.transition.transition--scale:not(.transition--root-hidden),
.image,
.image--grid,
.image-wrapper,
.image__image,
.layout-element__component--GridImage,
.layout-element__component--GridImage img,
[data-animation-state="active"] {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Header & Navigation Polish */
.block-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(9, 10, 12, 0.85) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Unified Brand Logo Sizing Across ALL Pages (Home, Programs, Projects, About, Contact, Blog) */
#siteNavbar img[alt*="Agnirath"],
#siteNavbar a[aria-label*="Agnirath"] img,
.block-header-logo__image,
.block-header-logo img,
header a[href="/"] img {
  width: 250px !important;
  max-width: 250px !important;
  height: 22px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  object-fit: contain !important;
  display: block !important;
}

.block-header-logo {
  width: 250px !important;
  max-width: 250px !important;
  height: 22px !important;
  max-height: 22px !important;
  display: flex !important;
  align-items: center !important;
}

@media (max-width: 768px) {
  #siteNavbar img[alt*="Agnirath"],
  #siteNavbar a[aria-label*="Agnirath"] img,
  .block-header-logo__image,
  .block-header-logo img,
  header a[href="/"] img {
    width: 160px !important;
    max-width: 160px !important;
    height: 14px !important;
    max-height: 14px !important;
    min-height: 14px !important;
  }

  .block-header-logo {
    width: 160px !important;
    max-width: 160px !important;
    height: 14px !important;
    max-height: 14px !important;
  }
}

.block-header-item__link {
  transition:
    color 0.25s ease,
    transform 0.25s ease;
}

.block-header-item__link:hover {
  color: rgb(239, 13, 51) !important;
  transform: translateY(-1px);
}

/* Interactive Buttons */
button,
.grid-button,
a[class*="GridButton"],
a[class*="grid-button"] {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer;
}

button:hover,
.grid-button:hover,
a[class*="GridButton"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(239, 13, 51, 0.35);
}

/* Images & Media */
img {
  max-width: 100%;
  height: auto;
}

/* Hero & Section Background Media (Video / GIF / Image) */
.block-background__image,
.block-background__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0;
  pointer-events: none;
}

.block {
  position: relative;
  display: grid !important;
}

.block > .block-background,
.block > .block-layout {
  grid-area: 1 / 1 / -1 / -1 !important;
  grid-column: 1 !important;
  grid-row: 1 !important;
}

.block-background {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  z-index: 0 !important;
}

.block-layout {
  position: relative !important;
  z-index: 2 !important;
}

.block-background__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* Mobile Responsiveness Improvements */
@media (max-width: 768px) {
  .block-header {
    padding: 12px 16px !important;
  }
}

/* ==========================================================================
   Interactive Pebble Images - Hover Pop-Up & Red Glow (Home & Projects)
   ========================================================================== */
#zxxw7X .image-wrapper--mobile,
#z9HE7u .image-wrapper--mobile,
#z87_Ep .image-wrapper--mobile,
#zjQAOK .image-wrapper--mobile,
#zHYbaz .image-wrapper--mobile {
  display: none !important;
  visibility: hidden !important;
}

#zxxw7X .image-wrapper--desktop,
#z9HE7u .image-wrapper--desktop,
#z87_Ep .image-wrapper--desktop,
#zjQAOK .image-wrapper--desktop,
#zHYbaz .image-wrapper--desktop {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
}

/* Ensure layout containers allow glow overflow and never clip */
.layout-element:has(#zxxw7X),
.layout-element:has(#z9HE7u),
.layout-element:has(#z87_Ep),
.layout-element:has(#zjQAOK),
.layout-element:has(#zHYbaz) {
  overflow: visible !important;
}

#zxxw7X,
#z9HE7u,
#z87_Ep,
#zjQAOK,
#zHYbaz {
  display: block !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, 0.6)) !important;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.4s ease !important;
  cursor: pointer !important;
}

#zxxw7X:hover,
#z9HE7u:hover,
#z87_Ep:hover,
#zjQAOK:hover,
#zHYbaz:hover,
.layout-element:hover > #zxxw7X,
.layout-element:hover > #z9HE7u,
.layout-element:hover > #z87_Ep,
.layout-element:hover > #zjQAOK,
.layout-element:hover > #zHYbaz {
  transform: translateY(-8px) scale(1.03) !important;
  filter: drop-shadow(0 0 25px rgba(239, 13, 51, 0.55))
    drop-shadow(0 18px 36px rgba(239, 13, 51, 0.4))
    drop-shadow(0 14px 30px rgba(0, 0, 0, 0.7)) !important;
  z-index: 10 !important;
}

#zxxw7X .image-wrapper--desktop,
#z9HE7u .image-wrapper--desktop,
#z87_Ep .image-wrapper--desktop,
#zjQAOK .image-wrapper--desktop,
#zHYbaz .image-wrapper--desktop {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M168.562 42.5672C184.281 55.141 200 76.1523 200 99.8108C200 123.635 184.127 150.271 157.312 171.283C130.497 192.294 92.8952 207.68 62.9983 195.934C33.1014 184.187 11.064 145.473 3.2045 104.278C-4.655 63.2477 1.81753 19.9014 24.009 5.83869C46.2005 -8.38948 84.111 6.66591 110.772 16.2617C137.432 25.8574 152.997 29.9935 168.562 42.5672Z' fill='%23727586'/%3E%3C/svg%3E") !important;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' preserveAspectRatio='none' viewBox='0 0 200 200' fill='none'%3E%3Cpath d='M168.562 42.5672C184.281 55.141 200 76.1523 200 99.8108C200 123.635 184.127 150.271 157.312 171.283C130.497 192.294 92.8952 207.68 62.9983 195.934C33.1014 184.187 11.064 145.473 3.2045 104.278C-4.655 63.2477 1.81753 19.9014 24.009 5.83869C46.2005 -8.38948 84.111 6.66591 110.772 16.2617C137.432 25.8574 152.997 29.9935 168.562 42.5672Z' fill='%23727586'/%3E%3C/svg%3E") !important;
  -webkit-mask-size: 100% 100% !important;
  mask-size: 100% 100% !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  border-radius: 0 !important;
  overflow: visible !important;
  aspect-ratio: 5 / 4 !important;
}

#zxxw7X img,
#z9HE7u img,
#z87_Ep img,
#zjQAOK img,
#zHYbaz img {
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  position: relative !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  image-rendering: -webkit-optimize-contrast !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Fullscreen Cinematic Hero Video Background & Layout Center
   ========================================================================== */
#heroSection {
  position: relative !important;
  width: 100% !important;
  min-height: 100vh !important;
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 72px 16px 85px 16px !important;
  box-sizing: border-box !important;
  background-color: #07080b !important;
}

.hero-media-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.hero-video {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  width: 100% !important;
  height: 100% !important;
  transform: translate(-50%, -50%) scale(1.04) !important;
  object-fit: cover !important;
  object-position: center !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: brightness(1.3) contrast(1) saturate(1) !important;
}

.hero-media-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: radial-gradient(
    circle at center,
    rgba(7, 8, 11, 0.02) 0%,
    rgba(7, 8, 11, 0.22) 60%,
    rgba(7, 8, 11, 0.6) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

.hero-mesh-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    180deg,
    rgba(7, 8, 11, 0.35) 0%,
    rgba(7, 8, 11, 0) 30%,
    rgba(7, 8, 11, 0.15) 75%,
    #07080b 100%
  ) !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

#heroFloatingContent {
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: 0 !important;
}

/* ==========================================================================
   Vibrant Colorful Buttons & Interactive Pop-Up Model on Hover
   ========================================================================== */
.btn-colorful-red,
.btn-primary-neon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(
    135deg,
    #ef0d33 0%,
    #ff2a4b 50%,
    #f97316 100%
  ) !important;
  box-shadow:
    0 0 25px rgba(239, 13, 51, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.btn-colorful-red:hover,
.btn-primary-neon:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 45px rgba(239, 13, 51, 0.9),
    0 16px 36px rgba(239, 13, 51, 0.5) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-colorful-cyan {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(
    135deg,
    #0284c7 0%,
    #0ea5e9 40%,
    #6366f1 100%
  ) !important;
  box-shadow:
    0 0 25px rgba(14, 165, 233, 0.5),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.btn-colorful-cyan:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 45px rgba(14, 165, 233, 0.85),
    0 16px 36px rgba(99, 102, 241, 0.5) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

.btn-colorful-purple {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 13px 28px !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em !important;
  color: #ffffff !important;
  text-decoration: none !important;
  background: linear-gradient(
    135deg,
    #7c3aed 0%,
    #c026d3 35%,
    #f43f5e 70%,
    #f59e0b 100%
  ) !important;
  box-shadow:
    0 0 25px rgba(217, 70, 239, 0.65),
    0 0 15px rgba(245, 158, 11, 0.4),
    0 8px 24px rgba(0, 0, 0, 0.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative !important;
  overflow: visible !important;
  cursor: pointer !important;
}

.btn-colorful-purple:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow:
    0 0 45px rgba(217, 70, 239, 0.95),
    0 0 25px rgba(245, 158, 11, 0.7),
    0 16px 36px rgba(244, 63, 94, 0.6) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

/* Pop-up Model / Preview Card that appears when cursor touches/hovers the button */
.btn-interactive-group {
  position: relative !important;
  display: inline-block !important;
}

.btn-hover-popup {
  position: absolute !important;
  bottom: calc(100% + 14px) !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(8px) scale(0.92) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 290px !important;
  background: rgba(14, 17, 23, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 18px !important;
  padding: 16px !important;
  text-align: left !important;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(239, 13, 51, 0.35) !important;
  border: 1px solid rgba(239, 13, 51, 0.45) !important;
  transition:
    opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.3s !important;
  z-index: 60 !important;
}

.btn-hover-popup.popup-cyan {
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.85),
    0 0 35px rgba(14, 165, 233, 0.35) !important;
  border: 1px solid rgba(14, 165, 233, 0.45) !important;
}

/* Arrow down on popup model */
.btn-hover-popup::after {
  content: "" !important;
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  border-width: 8px 8px 0 8px !important;
  border-style: solid !important;
  border-color: rgba(14, 17, 23, 0.96) transparent transparent transparent !important;
}

/* Pop up model triggers on hover, focus, or active class */
.btn-interactive-group:hover .btn-hover-popup,
.btn-interactive-group:focus-within .btn-hover-popup,
.btn-hover-popup.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

/* Scroll To Explore Pill - Exactly at the Middle of the Page */
.hero-scroll-indicator {
  position: absolute !important;
  bottom: 14px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 25 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  color: #94a3b8 !important;
  transition: all 0.3s ease !important;
}

.hero-scroll-indicator:hover {
  color: #ffffff !important;
  transform: translateX(-50%) translateY(2px) !important;
}

.hero-scroll-mouse {
  width: 22px !important;
  height: 34px !important;
  border-radius: 9999px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  padding: 4px !important;
  margin-top: 4px !important;
  transition: border-color 0.3s ease !important;
}

.hero-scroll-indicator:hover .hero-scroll-mouse {
  border-color: #ef0d33 !important;
  box-shadow: 0 0 15px rgba(239, 13, 51, 0.6) !important;
}

.hero-scroll-dot {
  width: 4px !important;
  height: 7px !important;
  border-radius: 9999px !important;
  background-color: #ef0d33 !important;
  animation: scrollDotPulse 1.8s infinite ease-in-out !important;
}

@keyframes scrollDotPulse {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(6px);
    opacity: 0.3;
  }

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

/* ==========================================================================
   Curvy Shapes, Soft Rounded Image Frames & Glowing Panels
   ========================================================================== */
.pebble-container {
  border-radius: 36px !important;
  overflow: hidden !important;
  transition:
    transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease !important;
}

.pebble-mask {
  border-radius: 30px !important;
  overflow: hidden !important;
}

.pebble-mask img {
  border-radius: 30px !important;
  object-fit: cover !important;
}

.glass-panel {
  background: rgba(14, 17, 23, 0.75) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 28px !important;
}

.glass-panel-glow-red {
  border-color: rgba(239, 13, 51, 0.3) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(239, 13, 51, 0.15) !important;
}

.glass-panel-glow-emerald {
  border-color: rgba(16, 185, 129, 0.3) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(16, 185, 129, 0.15) !important;
}

.glass-panel-glow-purple {
  border-color: rgba(168, 85, 247, 0.3) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(168, 85, 247, 0.15) !important;
}

.glass-panel-glow-cyan {
  border-color: rgba(14, 165, 233, 0.3) !important;
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(14, 165, 233, 0.15) !important;
}

.telemetry-glass-card {
  background: rgba(10, 14, 22, 0.35) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.3s ease !important;
}

.telemetry-glass-card:hover {
  background: rgba(15, 20, 30, 0.45) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  transform: translateY(-2px);
}

/* ==========================================================================
   Blog Feature Globally Disabled
   ========================================================================== */
[data-nav="blog"],
[data-mobile-nav="blog"],
header a[href*="/blog"],
nav a[href*="/blog"],
footer a[href*="/blog"],
#homeBlogSection,
.home-blog-section {
  display: none !important;
}

.faq-stack-card {
  border-radius: 24px !important;
  background: rgba(14, 17, 23, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  padding: 20px 24px !important;
  margin-bottom: 10px !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  transition: all 0.3s ease !important;
}

.image-caption-card {
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  padding: 12px 18px !important;
  margin-top: 10px !important;
}

/* ==========================================================================
   Program & Subpage Hero Background, Cosmic Grid, and Micro-Animations
   ========================================================================== */

/* Subpage Hero Typography & Multi-Color Gradient */
.subpage-hero-title {
  font-family: "Montserrat", system-ui, sans-serif !important;
  font-size: clamp(2.2rem, 3.8vw + 0.8rem, 3.6rem) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  color: #ffffff !important;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8) !important;
}

.gradient-text-multi {
  background: linear-gradient(
    135deg,
    #ef0d33 0%,
    #ff4d6d 30%,
    #f97316 65%,
    #06b6d4 100%
  ) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
  filter: drop-shadow(0 0 35px rgba(239, 13, 51, 0.45)) !important;
}

/* Cosmic Tech Grid */
.cosmic-grid {
  background-image:
    radial-gradient(
      circle at center,
      rgba(255, 255, 255, 0.12) 1px,
      transparent 1px
    ),
    linear-gradient(to right, rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.035) 1px, transparent 1px) !important;
  background-size:
    32px 32px,
    64px 64px,
    64px 64px !important;
  background-position: center center !important;
}

/* Pulsing Status Beacon */
.pulsing-beacon {
  display: inline-block !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 9999px !important;
  background-color: #ef0d33 !important;
  box-shadow: 0 0 10px #ef0d33 !important;
  animation: beaconPulse 1.8s infinite ease-in-out !important;
}

@keyframes beaconPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 0 10px #ef0d33;
  }

  50% {
    transform: scale(1.4);
    opacity: 0.55;
    box-shadow:
      0 0 20px #ef0d33,
      0 0 35px rgba(239, 13, 51, 0.6);
  }
}

/* Ken Burns Subtle Cinematic Zoom Animation */
@keyframes kenBurnsSlow {
  0% {
    transform: scale(1.02) translate(0, 0);
  }

  50% {
    transform: scale(1.08) translate(-1%, -1%);
  }

  100% {
    transform: scale(1.02) translate(0, 0);
  }
}

.animate-ken-burns {
  animation: kenBurnsSlow 24s ease-in-out infinite alternate !important;
}

/* Futuristic Scanning Laser Horizon */
.laser-scanner {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 1.5px !important;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(239, 13, 51, 0) 10%,
    rgba(239, 13, 51, 0.85) 50%,
    rgba(6, 182, 212, 0.85) 75%,
    transparent 100%
  ) !important;
  box-shadow:
    0 0 18px rgba(239, 13, 51, 0.9),
    0 0 30px rgba(6, 182, 212, 0.6) !important;
  animation: scanLaser 7s ease-in-out infinite !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

@keyframes scanLaser {
  0% {
    top: 0%;
    opacity: 0;
  }

  15% {
    opacity: 0.9;
  }

  85% {
    opacity: 0.9;
  }

  100% {
    top: 100%;
    opacity: 0;
  }
}

/* 5-Step Journey Illuminated Connecting Pipeline */
.journey-pipeline-track {
  position: absolute;
  top: 56px;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(
    90deg,
    rgba(239, 13, 51, 0.35) 0%,
    rgba(6, 182, 212, 0.35) 25%,
    rgba(16, 185, 129, 0.35) 50%,
    rgba(168, 85, 247, 0.35) 75%,
    rgba(249, 115, 22, 0.35) 100%
  );
  z-index: 1;
  pointer-events: none;
}

.journey-pipeline-beam {
  position: absolute;
  top: -2px;
  left: 0%;
  width: 140px;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(
    90deg,
    transparent,
    #ef0d33,
    #06b6d4,
    #10b981,
    transparent
  );
  box-shadow:
    0 0 16px rgba(239, 13, 51, 0.9),
    0 0 25px rgba(6, 182, 212, 0.8);
  animation: journeyBeam 5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes journeyBeam {
  0% {
    left: 0%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    left: calc(100% - 140px);
    opacity: 0;
  }
}

/* Step Badges and Caption Box Styling */
.image-caption-box {
  padding-top: 10px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  width: 100% !important;
  text-align: center !important;
}

.image-name-badge {
  display: inline-block !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  padding: 4px 12px !important;
  border-radius: 9999px !important;
  margin-bottom: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  transition: all 0.3s ease !important;
}

.image-name-badge-red {
  background: rgba(239, 13, 51, 0.18) !important;
  color: #ff4d6d !important;
  border-color: rgba(239, 13, 51, 0.45) !important;
  box-shadow: 0 0 14px rgba(239, 13, 51, 0.25) !important;
}

.image-name-badge-cyan {
  background: rgba(6, 182, 212, 0.18) !important;
  color: #22d3ee !important;
  border-color: rgba(6, 182, 212, 0.45) !important;
  box-shadow: 0 0 14px rgba(6, 182, 212, 0.25) !important;
}

.image-name-badge-emerald {
  background: rgba(16, 185, 129, 0.18) !important;
  color: #34d399 !important;
  border-color: rgba(16, 185, 129, 0.45) !important;
  box-shadow: 0 0 14px rgba(16, 185, 129, 0.25) !important;
}

.image-name-badge-purple {
  background: rgba(168, 85, 247, 0.18) !important;
  color: #c084fc !important;
  border-color: rgba(168, 85, 247, 0.45) !important;
  box-shadow: 0 0 14px rgba(168, 85, 247, 0.25) !important;
}

.image-name-badge-orange {
  background: rgba(249, 115, 22, 0.18) !important;
  color: #fb923c !important;
  border-color: rgba(249, 115, 22, 0.45) !important;
  box-shadow: 0 0 14px rgba(249, 115, 22, 0.25) !important;
}

/* Step Interactive Card Glow & Radar Ping */
.step-card {
  position: relative !important;
  background: rgba(14, 17, 23, 0.72) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 28px !important;
  padding: 24px 18px !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
}

.step-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow:
    0 20px 45px rgba(0, 0, 0, 0.8),
    0 0 35px rgba(239, 13, 51, 0.25) !important;
}

.step-icon-wrapper {
  position: relative !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 16px auto !important;
  transition: all 0.35s ease !important;
}

.step-card:hover .step-icon-wrapper {
  transform: scale(1.1) rotate(2deg) !important;
}

.step-icon-wrapper::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 26px;
  border: 1px dashed rgba(255, 255, 255, 0.15);
  animation: spinSlow 20s linear infinite;
  pointer-events: none;
}

@keyframes spinSlow {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* =========================================================================
   Interactive & Futuristic Track Icon Animations (Robot, AI, Satellite)
   ========================================================================= */

.track-icon-box {
  position: relative !important;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: visible !important;
}

/* Pulsing ambient halo behind the icon */
.track-icon-box::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  opacity: 0.5;
  transition: all 0.4s ease;
  z-index: -1;
  pointer-events: none;
}

/* Revolving orbit dashed ring */
.track-icon-box::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 24px;
  border: 1.5px dashed rgba(255, 255, 255, 0.2);
  opacity: 0.4;
  animation: trackOrbitSpin 14s linear infinite;
  pointer-events: none;
  transition: all 0.4s ease;
}

@keyframes trackOrbitSpin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Track 1: Red Robotics Glow */
.track-icon-box-red {
  box-shadow:
    0 0 20px rgba(239, 13, 51, 0.25),
    inset 0 0 12px rgba(239, 13, 51, 0.15) !important;
}

.track-icon-box-red::before {
  background: radial-gradient(
    circle,
    rgba(239, 13, 51, 0.45) 0%,
    transparent 70%
  );
  animation: haloPulseRed 3s ease-in-out infinite alternate;
}

.track-icon-box-red::after {
  border-color: rgba(239, 13, 51, 0.45);
}

/* Track 2: Cyan / AI Glow */
.track-icon-box-cyan {
  box-shadow:
    0 0 20px rgba(6, 182, 212, 0.25),
    inset 0 0 12px rgba(6, 182, 212, 0.15) !important;
}

.track-icon-box-cyan::before {
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.45) 0%,
    transparent 70%
  );
  animation: haloPulseCyan 3s ease-in-out infinite alternate;
}

.track-icon-box-cyan::after {
  border-color: rgba(6, 182, 212, 0.45);
}

/* Track 3: Purple / Satellite Cosmic Glow */
.track-icon-box-purple {
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.25),
    inset 0 0 12px rgba(168, 85, 247, 0.15) !important;
}

.track-icon-box-purple::before {
  background: radial-gradient(
    circle,
    rgba(168, 85, 247, 0.45) 0%,
    transparent 70%
  );
  animation: haloPulsePurple 3s ease-in-out infinite alternate;
}

.track-icon-box-purple::after {
  border-color: rgba(168, 85, 247, 0.45);
}

/* Hover effects when hovering over the card or the icon itself */
.group:hover .track-icon-box,
.track-icon-box:hover {
  transform: translateY(-4px) scale(1.06) !important;
}

.group:hover .track-icon-box-red,
.track-icon-box-red:hover {
  box-shadow:
    0 0 35px rgba(239, 13, 51, 0.65),
    inset 0 0 15px rgba(239, 13, 51, 0.3) !important;
  border-color: rgba(239, 13, 51, 0.6) !important;
}

.group:hover .track-icon-box-cyan,
.track-icon-box-cyan:hover {
  box-shadow:
    0 0 35px rgba(6, 182, 212, 0.65),
    inset 0 0 15px rgba(6, 182, 212, 0.3) !important;
  border-color: rgba(6, 182, 212, 0.6) !important;
}

.group:hover .track-icon-box-purple,
.track-icon-box-purple:hover {
  box-shadow:
    0 0 35px rgba(168, 85, 247, 0.65),
    inset 0 0 15px rgba(168, 85, 247, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.6) !important;
}

.group:hover .track-icon-box::after,
.track-icon-box:hover::after {
  opacity: 0.95;
  animation-duration: 6s;
}

/* -------------------------------------------------------------
   Continuous Individual Micro-Animations for the 3 Icons
   ------------------------------------------------------------- */
.track-icon-img {
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}

/* 1. Robot Icon: Gentle scanning hover & playful head-bob */
.track-icon-robot {
  animation: robotLevitate 3.6s ease-in-out infinite;
}

@keyframes robotLevitate {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateY(-4px) rotate(-3deg);
  }

  75% {
    transform: translateY(-2px) rotate(3deg);
  }
}

.group:hover .track-icon-robot,
.track-icon-box:hover .track-icon-robot {
  animation: robotWave 0.8s ease-in-out infinite alternate !important;
  filter: drop-shadow(0 0 12px rgba(239, 13, 51, 0.85)) !important;
}

@keyframes robotWave {
  0% {
    transform: scale(1.12) rotate(-8deg);
  }

  100% {
    transform: scale(1.12) rotate(8deg);
  }
}

/* 2. AI / Brain Icon: Neural Pulse & Frequency Expansion */
.track-icon-ai {
  animation: aiNeuralPulse 2.8s ease-in-out infinite;
}

@keyframes aiNeuralPulse {
  0%,
  100% {
    transform: scale(1);
    filter: drop-shadow(0 0 4px rgba(6, 182, 212, 0.4));
  }

  50% {
    transform: scale(1.08);
    filter: drop-shadow(0 0 14px rgba(6, 182, 212, 0.85));
  }
}

.group:hover .track-icon-ai,
.track-icon-box:hover .track-icon-ai {
  transform: scale(1.18) !important;
  filter: drop-shadow(0 0 18px rgba(6, 182, 212, 1)) !important;
  animation: aiNeuralFast 1.2s ease-in-out infinite alternate !important;
}

@keyframes aiNeuralFast {
  0% {
    transform: scale(1.12);
  }

  100% {
    transform: scale(1.22);
  }
}

/* 3. Satellite Icon: Orbital Float & Gyro Tilt */
.track-icon-satellite {
  animation: satelliteOrbitFloat 4.2s ease-in-out infinite;
}

@keyframes satelliteOrbitFloat {
  0%,
  100% {
    transform: translateY(0px) rotate(-10deg);
  }

  50% {
    transform: translateY(-6px) translateX(2px) rotate(4deg);
  }
}

.group:hover .track-icon-satellite,
.track-icon-box:hover .track-icon-satellite {
  transform: scale(1.18) rotate(15deg) !important;
  filter: drop-shadow(0 0 16px rgba(168, 85, 247, 0.95)) !important;
  animation: satelliteSignal 1.4s ease-in-out infinite alternate !important;
}

@keyframes satelliteSignal {
  0% {
    transform: scale(1.14) rotate(8deg);
  }

  100% {
    transform: scale(1.22) rotate(18deg);
  }
}

/* Halo Breathing Keyframes */
@keyframes haloPulseRed {
  0% {
    opacity: 0.3;
    transform: scale(0.92);
  }

  100% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes haloPulseCyan {
  0% {
    opacity: 0.3;
    transform: scale(0.92);
  }

  100% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

@keyframes haloPulsePurple {
  0% {
    opacity: 0.3;
    transform: scale(0.92);
  }

  100% {
    opacity: 0.7;
    transform: scale(1.08);
  }
}

/* ==========================================================================
   Universal Agnirath Top Bar Navigation & Active Underline Indicator
   ========================================================================== */
#siteNavbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
  height: 64px !important;
  background: rgba(7, 8, 11, 0.75) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  display: block !important;
  visibility: visible !important;
}

/* Suppress all legacy Zyro / Astro header components across all subpages */
.block-header,
header.block-header,
header[data-block-type="BlockNavigation"],
div[data-block-type="BlockNavigation"],
[data-block-type="BlockNavigation"],
astro-island:has([data-block-type="BlockNavigation"]),
astro-island:has(.block-header) {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-link-agnirath {
  font-family:
    "Montserrat",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: #cbd5e1 !important;
  text-decoration: none !important;
  position: relative !important;
  padding: 4px 0 !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
}

.nav-link-agnirath:hover {
  color: #ffffff !important;
}

.nav-link-agnirath:hover::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: #ef0d33 !important;
}

/* Active red mark under the currently opened section */
.nav-link-agnirath.active,
.nav-link-agnirath.is-active {
  color: #ffffff !important;
}

.nav-link-agnirath.active::after,
.nav-link-agnirath.is-active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 2.5px !important;
  background-color: #ef0d33 !important;
  box-shadow: 0 0 10px rgba(239, 13, 51, 0.75) !important;
}

/* ==========================================================================
   Full-Screen Expansive Layout for Modern & Ultra-Wide Desktop Displays
   ========================================================================== */
@media (min-width: 1280px) {
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: clamp(2rem, 4vw, 5.5rem) !important;
    padding-right: clamp(2rem, 4vw, 5.5rem) !important;
  }
}

@media (min-width: 1920px) {
  .max-w-7xl {
    max-width: 100% !important;
    padding-left: clamp(3rem, 6vw, 8rem) !important;
    padding-right: clamp(3rem, 6vw, 8rem) !important;
  }
} /* Animated Hamburger Styles */
button.open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg) !important;
}
button.open .hamburger-bar:nth-child(2) {
  opacity: 0 !important;
  transform: scale(0.5);
}
button.open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg) !important;
}

/* Page Opening Animation */
main {
  animation: pageLoadFade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

@keyframes pageLoadFade {
  0% {
    opacity: 0;
    transform: translateY(15px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

/* Global Responsive Overrides */
html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
  /* IMPORTANT: Body must never have transform, perspective, or filter applied directly */
  transform: none !important;
  filter: none !important;
  perspective: none !important;
  animation: none !important;
}

/* Scrolled Header FX */
#siteNavbar.scrolled {
  background: rgba(0, 0, 0, 0.85) !important;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9),
    rgba(239, 13, 51, 0.05)
  ) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.8) !important;
}
#siteNavbar.scrolled .h-16 {
  height: 3.5rem !important;
  transition: height 0.4s ease;
}
#siteNavbar .h-16 {
  transition: height 0.4s ease;
}

/* Magic Line overrides to let Anime.js handle it seamlessly */
#magicLine {
  transform-origin: center;
  box-shadow: 0 0 10px rgba(239, 13, 51, 0.8);
}