/*
 * Hero FX — fixed Spline scene (js/hero-spline.js) + button contour glow
 */

/* inherits:true so JS-driven --btn-angle on :root reaches ::before/::after */
@property --btn-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: true;
}

/* === Fixed Spline — always viewport-centered while scrolling === */
.hero-spline {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none !important;
  overflow: hidden;
  background: #07080A;
  opacity: 1;
}
.hero-spline.is-ready {
  opacity: 1;
}
/* Never dim / hide on scroll — stays as full-bleed center background */
.hero-spline,
.hero-spline *,
.hero-spline spline-viewer {
  pointer-events: none !important;
  cursor: default !important;
}
.hero-spline spline-viewer {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
}
.hero-spline a[href*="spline"],
.hero-spline a[href*="Spline"] {
  display: none !important;
}

.hero-webgl {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
}

.page-home {
  background: var(--color-canvas, #0B0E14);
}

.page-home .site-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
}
.page-home .main,
.page-home .site-foot {
  position: relative;
  z-index: 1;
}

/*
 * Uniform translucent sections — Spline stays visible as fixed center backdrop
 * while scrolling (no zebra bands: one color + one opacity everywhere).
 */
.page-home .section,
.page-home .section--surface,
.page-home .section--dense,
.page-home .section--airy,
.page-home .section--cta {
  background: rgba(11, 14, 20, 0.9);
  border-top: none;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.page-home .site-foot {
  background: rgba(11, 14, 20, 0.94);
  border-top: 1px solid var(--color-border-subtle);
}
.page-home .hero {
  background: transparent;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-bottom: none;
}

.hero__fx-fallback {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 65% 50% at 50% 40%,
      rgba(224, 24, 56, 0.35) 0%,
      rgba(80, 10, 20, 0.15) 40%,
      transparent 70%),
    #07080A;
}
.page-home.has-webgl .hero__fx-fallback {
  display: none;
}

.hero__fx-vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 42%,
    transparent 30%,
    rgba(7, 8, 10, 0.35) 100%);
}
.hero .hero__inner {
  position: relative;
  z-index: 2;
}

/* Hero copy entrance */
.hero__copy .kicker,
.hero__copy .hero__title,
.hero__copy .hero__sub,
.hero__copy .hero__cta,
.hero__copy .hero__trust-strip {
  animation: hero-fade-up 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
.hero__copy .kicker { animation-delay: 40ms; }
.hero__copy .hero__title { animation-delay: 120ms; }
.hero__copy .hero__sub { animation-delay: 200ms; }
.hero__copy .hero__cta { animation-delay: 280ms; }
.hero__copy .hero__trust-strip { animation-delay: 360ms; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__copy .kicker,
  .hero__copy .hero__title,
  .hero__copy .hero__sub,
  .hero__copy .hero__cta,
  .hero__copy .hero__trust-strip {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ================================================================== */
/* Button contour glow — ring painted ABOVE fill (no z-index:-1)      */
/* Angle driven by /js/btn-fx.js → --btn-angle on :root                */
/* Secondary: NO cyan wash / blur fill                                 */
/* ================================================================== */

.btn {
  position: relative;
  overflow: visible;
  isolation: auto;
}

.btn--primary {
  border: 2px solid transparent;
  background-color: transparent;
  background-image:
    linear-gradient(180deg, #E84545 0%, #C81E1E 100%),
    conic-gradient(
      from var(--btn-angle),
      rgba(160, 30, 30, 0.9) 0deg,
      rgba(160, 30, 30, 0.9) 250deg,
      rgba(255, 180, 180, 0.55) 300deg,
      #ffffff 330deg,
      rgba(255, 220, 220, 0.9) 350deg,
      rgba(160, 30, 30, 0.9) 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.18) inset,
    0 8px 24px -8px rgba(232, 69, 69, 0.45),
    0 0 20px -2px rgba(255, 140, 140, 0.4);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

.btn--primary::before,
.btn--primary::after {
  content: none;
  display: none;
}

.btn--primary:hover,
.btn--primary:focus-visible {
  /* Override components.css shorthand that would kill the dual background */
  background-color: transparent;
  background-image:
    linear-gradient(180deg, #F05555 0%, #D42828 100%),
    conic-gradient(
      from var(--btn-angle),
      rgba(180, 40, 40, 0.95) 0deg,
      rgba(180, 40, 40, 0.95) 240deg,
      rgba(255, 200, 200, 0.7) 295deg,
      #ffffff 325deg,
      rgba(255, 240, 240, 1) 345deg,
      rgba(180, 40, 40, 0.95) 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 12px 28px -8px rgba(232, 69, 69, 0.55),
    0 0 26px 0 rgba(255, 160, 160, 0.5);
}
.btn--primary:active {
  transform: scale(0.98);
}

/* Secondary: contour only, neutral — NO cyan fill / blur wash */
.btn--secondary {
  border: 2px solid transparent;
  background-color: transparent;
  background-image:
    linear-gradient(rgba(12, 14, 18, 0.82), rgba(12, 14, 18, 0.82)),
    conic-gradient(
      from var(--btn-angle),
      rgba(232, 238, 247, 0.18) 0deg,
      rgba(232, 238, 247, 0.18) 250deg,
      rgba(255, 255, 255, 0.45) 300deg,
      #ffffff 330deg,
      rgba(255, 255, 255, 0.85) 350deg,
      rgba(232, 238, 247, 0.18) 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  box-shadow: none;
  transition:
    transform 180ms ease,
    background 180ms ease;
}

.btn--secondary::before,
.btn--secondary::after {
  content: none;
  display: none;
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background-color: transparent;
  background-image:
    linear-gradient(rgba(18, 20, 26, 0.9), rgba(18, 20, 26, 0.9)),
    conic-gradient(
      from var(--btn-angle),
      rgba(232, 238, 247, 0.28) 0deg,
      rgba(232, 238, 247, 0.28) 240deg,
      rgba(255, 255, 255, 0.55) 295deg,
      #ffffff 325deg,
      #ffffff 350deg,
      rgba(232, 238, 247, 0.28) 360deg
    );
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-color: transparent;
  transform: translateY(-1px);
}

/* Cards: subtle contour on hover only — neutral, not cyan wash */
.panel,
.service-card,
.infra-col,
.infra-visual,
.ai-block__visual--hero,
.ai-block__visual--schema {
  position: relative;
}

.panel::before,
.service-card::before,
.infra-col::before,
.infra-visual::before,
.ai-block__visual--hero::before,
.ai-block__visual--schema::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(
    from var(--btn-angle),
    transparent 0deg,
    transparent 290deg,
    rgba(255, 255, 255, 0.45) 340deg,
    rgba(255, 180, 180, 0.35) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}

.panel:hover::before,
.service-card:hover::before,
.infra-col:hover::before,
.infra-visual:hover::before,
.ai-block__visual--hero:hover::before,
.ai-block__visual--schema:hover::before,
.panel:focus-within::before,
.service-card:focus-within::before {
  opacity: 1;
}

.panel::after,
.service-card::after,
.infra-col::after,
.infra-visual::after,
.ai-block__visual--hero::after,
.ai-block__visual--schema::after {
  content: none;
  display: none;
}