/**
 * INOVIFI Core - 60fps Hardware-Accelerated Animation System
 * Zero Purple | Fallback Safety (.js-ready guard) | Mobile Optimized
 */

/* ==========================================================================
   1. GLOBAL MOBILE SAFETY & HARDWARE ACCELERATION
   ========================================================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw;
}

.will-animate {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ==========================================================================
   2. FALLBACK SAFETY & SCROLL REVEALS
   Zero Layout Shifts | Hero & First Viewport Always 100% Visible
   ========================================================================== */
.inovifi-reveal,
[data-animate],
.reveal-on-scroll {
  opacity: 1;
  transform: none;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hero and page banner sections are ALWAYS 100% visible from frame 1 */
.hero-section,
.page-banner-section,
.hero-section.inovifi-reveal,
.page-banner-section.inovifi-reveal,
.elementor-top-section:first-child .inovifi-reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

/* Only below-the-fold elements that are not yet revealed fade in gracefully */
body.js-ready:not(.elementor-editor-active):not(.elementor-editor-preview) .inovifi-reveal:not(.is-revealed):not(.hero-section):not(.page-banner-section),
body.js-ready:not(.elementor-editor-active):not(.elementor-editor-preview) [data-animate]:not(.is-revealed):not(.hero-section):not(.page-banner-section),
body.js-ready:not(.elementor-editor-active):not(.elementor-editor-preview) .reveal-on-scroll:not(.is-revealed):not(.hero-section):not(.page-banner-section) {
  opacity: 0;
  transform: translateY(24px);
}

body.js-ready .inovifi-reveal.is-revealed,
body.js-ready [data-animate].is-revealed,
body.js-ready .reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Explicit 100% visibility override inside Elementor visual builder */
.elementor-editor-active .inovifi-reveal,
.elementor-editor-preview .inovifi-reveal,
body.elementor-editor-active .inovifi-reveal,
body.elementor-editor-preview .inovifi-reveal,
body[class*="elementor-editor"] .inovifi-reveal,
.elementor-editor-active [data-animate],
.elementor-editor-preview [data-animate],
body.elementor-editor-active [data-animate],
body.elementor-editor-preview [data-animate],
body[class*="elementor-editor"] [data-animate],
.elementor-editor-active .reveal-on-scroll,
.elementor-editor-preview .reveal-on-scroll,
body.elementor-editor-active .reveal-on-scroll,
body.elementor-editor-preview .reveal-on-scroll,
body[class*="elementor-editor"] .reveal-on-scroll {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* Staggered Delay Utilities */
.reveal-delay-100 { transition-delay: 0.1s !important; }
.reveal-delay-200 { transition-delay: 0.2s !important; }
.reveal-delay-300 { transition-delay: 0.3s !important; }
.reveal-delay-400 { transition-delay: 0.4s !important; }
.reveal-delay-500 { transition-delay: 0.5s !important; }

/* Scale & Slide Variants */
body.js-ready [data-animate="scale-in"] {
  transform: scale(0.94);
}
body.js-ready [data-animate="scale-in"].is-revealed {
  transform: scale(1);
}

body.js-ready [data-animate="slide-right"] {
  transform: translateX(-32px);
}
body.js-ready [data-animate="slide-right"].is-revealed {
  transform: translateX(0);
}

/* ==========================================================================
   3. CIRCUIT GRID DATA PULSES & SHIMMER (Official Silicon & Microchip Tech)
   ========================================================================== */
@keyframes circuitPulse {
  0%, 100% {
    opacity: 0.35;
    filter: drop-shadow(0 0 2px rgba(197, 255, 0, 0.3));
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(197, 255, 0, 0.85));
  }
}

.circuit-pulse {
  animation: circuitPulse 4s ease-in-out infinite;
}

@keyframes badgeShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.badge-shimmer {
  background: linear-gradient(90deg, rgba(82, 0, 255, 0.14) 0%, rgba(197, 255, 0, 0.28) 50%, rgba(82, 0, 255, 0.14) 100%);
  background-size: 200% 100%;
  animation: badgeShimmer 5s infinite linear;
}

@keyframes dataStream {
  0% { transform: translateY(-100%); opacity: 0; }
  50% { opacity: 0.9; }
  100% { transform: translateY(100%); opacity: 0; }
}

.data-stream-line {
  position: absolute;
  top: 0;
  width: 2px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--brand-volt, #C5FF00), transparent);
  animation: dataStream 3.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* ==========================================================================
   4. HERO ARCHITECTURE SWITCHER ANIMATIONS
   ========================================================================== */
.arch-tab-btn {
  position: relative;
  transition: all 0.25s ease;
}

.arch-tab-btn.active {
  color: #fff;
  background: rgba(82, 0, 255, 0.24);
  border-color: rgba(197, 255, 0, 0.55);
}

.arch-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 15%;
  right: 15%;
  height: 2px;
  background: var(--brand-volt, #C5FF00);
  box-shadow: 0 0 10px rgba(197, 255, 0, 0.85);
  border-radius: 2px;
}

.arch-pane {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.arch-pane.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Progress bar inside architecture switcher */
.arch-progress-track {
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 1rem;
}

.arch-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-indigo, #5200FF), var(--brand-volt, #C5FF00));
  transition: width 0.3s ease;
}

/* Live blinking telemetry indicator */
@keyframes telemetryBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

.telemetry-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-volt, #C5FF00);
  box-shadow: 0 0 10px rgba(197, 255, 0, 0.85);
  display: inline-block;
  animation: telemetryBlink 2s ease-in-out infinite;
}

/* ==========================================================================
   5. COMPREHENSIVE MOBILE ANIMATION HARDENING & PERFORMANCE GUARDS
   ========================================================================== */

/* --- A. Respect User Preference: Reduced Motion (WCAG AA) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure reveal elements are visible without animation */
  .inovifi-reveal,
  [data-animate],
  .reveal-on-scroll {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Stop decorative pulses */
  .circuit-pulse,
  .badge-pulse-emerald,
  .data-stream-line,
  .pipeline-pulse,
  .badge-shimmer,
  .telemetry-dot {
    animation: none !important;
  }

  /* Stop marquee scrolling */
  .marquee-track {
    animation: none !important;
  }
}

/* --- B. Mobile Layout Fixes for Hero Arch Tabs (768px) --- */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  .arch-tabs-nav {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.35rem;
    padding-bottom: 0.5rem;
    scrollbar-width: none;
  }

  .arch-tabs-nav::-webkit-scrollbar {
    display: none;
  }

  .arch-tab-btn {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 0.65rem 0.85rem;
    font-size: 0.75rem;
    min-width: 100px;
    /* Ensure accessible touch target */
    min-height: 44px;
  }

  .hero-trust-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }

  /* Disable CPU-heavy transform on mobile for scroll reveals */
  .inovifi-reveal,
  [data-animate],
  .reveal-on-scroll {
    /* Simpler transition on mobile saves battery and avoids jank */
    transition: opacity 0.4s ease !important;
    transform: none !important;
  }

  body.js-ready:not(.elementor-editor-active) .inovifi-reveal:not(.is-revealed):not(.hero-section):not(.page-banner-section) {
    opacity: 0;
    transform: none !important; /* No Y-shift on mobile - avoids layout shift */
  }
}

/* --- C. Small Mobile (575px) --- */
@media (max-width: 575px) {
  .arch-panes-wrap {
    min-height: 260px;
  }

  .arch-code-window {
    font-size: 0.72rem;
    padding: 0.75rem 0.85rem;
  }

  .arch-telemetry-grid {
    grid-template-columns: 1fr !important;
  }

  .arch-progress-track {
    margin-top: 0.5rem;
  }

  /* Data stream lines are decorative - hide on smallest screens */
  .data-stream-line {
    display: none;
  }

  /* Reduce will-change footprint on small devices */
  .will-animate {
    will-change: auto;
  }
}

/* --- D. GPU Compositing Safety: Prevent Stacking Context Overflow --- */
/* Elements using will-change must be direct children of a positioned ancestor */
.hero-arch-showcase,
.mobile-drawer,
.modal-overlay,
.drawer-backdrop {
  contain: layout style;
}

/* Prevent overflow from animated data streams breaking container edges */
.hero-section,
.page-banner-section,
.terminal-card,
.arch-panes-wrap {
  overflow: hidden;
}