/**
 * Global Ambient 3D Particle Constellation + Clean Minimalist Card Hover
 * Preserves 100% of the layout on every page with simple, refined interactions.
 */

/* Hero Containers across all pages */
.v5-hero,
.ph-hero,
.page-stack > .section-block:first-of-type,
.page-stack > section:first-of-type {
  position: relative;
}

/* Ambient 3D Depth Particle Constellation Canvas */
.v5-hero-ambient-3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure foreground content sits crisply in front of 3D canvas */
.v5-hero-copy,
.v5-metrics-card,
.ph-hero > div,
.ph-card,
.page-stack > .section-block:first-of-type > *,
.section-heading {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   Clean & Simple Hero Card Hover
   ========================================================================== */

.v5-metrics-card {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}

.v5-metrics-card:hover {
  transform: translateY(-4px);
  border-color: rgba(242, 95, 58, 0.3);
  box-shadow: 0 28px 70px rgba(13, 43, 40, 0.45);
}

/* Smooth, subtle mouse spotlight sheen */
.v5-card-spotlight {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background: radial-gradient(
    circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255, 255, 255, 0.07),
    transparent 65%
  );
  z-index: 1;
}

.v5-metrics-card:hover .v5-card-spotlight {
  opacity: 1;
}

/* Content Elements Inside Card */
.v5-metrics-header,
.v5-metrics-grid,
.v5-progress-list {
  position: relative;
  z-index: 2;
}

/* Clean Metric Box Hover */
.v5-metric-box {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 12px;
  padding: 16px 18px;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.25s ease,
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.v5-metric-box:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(242, 95, 58, 0.4);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

.v5-metric-box strong {
  transition: color 0.25s ease;
}

.v5-metric-box:hover strong {
  color: #ffffff;
}

/* Progress lines are untouchable (no hover effects, pointer-events none) */
.v5-progress-list,
.v5-progress-row,
.v5-progress-track,
.v5-progress-fill {
  pointer-events: none !important;
  user-select: none;
  cursor: default !important;
}


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .v5-metrics-card,
  .v5-metric-box {
    transition: none !important;
    transform: none !important;
  }
}



/* Hide pill badge across all pages */
.v5-hero-badge,
.ph-badge {
  display: none !important;
}

/* Remove eyebrow and decorative dashes from every card and page */
.eyebrow,
.eyebrow:before,
.ph-eyebrow,
.v5-cta-eyebrow,
.dark-band-card strong:before {
  display: none !important;
}

/* ==========================================================================
   Smooth Page Transitions (Seamless Unified Cross-Fade)
   ========================================================================== */

html {
  background-color: #081614;
}

/* Modern Native Cross-Document View Transitions (Chrome 126+, Safari 18.2+, Edge) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  ::view-transition {
    background-color: #081614;
  }

  ::view-transition-group(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
  }

  ::view-transition-old(root) {
    animation: 160ms ease-out both v5PageFadeOut;
  }

  ::view-transition-new(root) {
    animation: 200ms ease-in both v5PageFadeIn;
  }

  @keyframes v5PageFadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

  @keyframes v5PageFadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* Progressive Enhancement Fallback for Browsers without View Transitions */
@supports not (view-transition-name: test) {
  @media (prefers-reduced-motion: no-preference) {
    #app {
      animation: v5FallbackPageIn 0.2s ease-in both;
    }

    @keyframes v5FallbackPageIn {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }

    html.v5-page-transitioning-out #app {
      opacity: 0 !important;
      transition: opacity 0.16s ease-out !important;
    }
  }
}