/* Digitexc animation layer — consumed by digitexc-anim.js (v1.0) */

/* Scroll progress bar (hidden until GSAP scales it) */
.anim-progress {
  position: fixed; top: 48px; left: 0; right: 0; height: 2px;
  z-index: 7999; pointer-events: none;
  background: linear-gradient(90deg, var(--cds-interactive), #78a9ff);
  transform: scaleX(0); transform-origin: 0 50%;
}

/* Hero ambient layers (static without JS; GSAP adds motion) */
.hero-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-fx__grid {
  position: absolute; inset: -60px;
  background-image:
    linear-gradient(rgba(120,169,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,169,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 40%, #000 30%, transparent 75%);
}
.hero-fx__glow { position: absolute; border-radius: 50%; }
.hero-fx__glow--1 {
  width: 56vw; height: 56vw; top: -18vw; left: -14vw;
  background: radial-gradient(circle, rgba(69,137,255,.16), transparent 70%);
}
.hero-fx__glow--2 {
  width: 44vw; height: 44vw; bottom: -16vw; right: -10vw;
  background: radial-gradient(circle, rgba(120,169,255,.10), transparent 70%);
}
.hero .cds--grid { position: relative; z-index: 1; }

/* H1 strong: Carbon-blue gradient text (swept in by GSAP via background-position) */
.hero__title strong {
  background: linear-gradient(90deg, #4589ff, #78a9ff, #d0e2ff, #4589ff);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* Blueprint schematic dividers */
.schematic-divider {
  width: min(1140px, 92%); margin: 0 auto; display: block;
  color: var(--cds-interactive); opacity: .55;
}
.schematic-divider svg { width: 100%; height: auto; display: block; overflow: visible; }
.schematic-divider--flip { transform: scaleX(-1); }

/* Active nav state (toggled by ScrollTrigger) */
.cds--header__menu-item--active {
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--cds-interactive);
}

/* Card hover sheen (CSS-only; JS opts cards in by adding .tilt-card) */
.tilt-card { will-change: transform; }
.tilt-card::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.06) 50%, transparent 60%);
  transition: opacity .4s;
}
.tilt-card:hover::after { opacity: 1; }

/* GSAP drives transform on these (scroll reveals + tilt): a CSS transform
   transition poisons from() tweens — the end value is read from computed
   style at first render while the transition keeps it lagging at the start
   value, so the tween "completes" without ever moving. Keep the color
   transitions, drop transform. */
.cds--tile {
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.flagship-card {
  transition: border-color 0.2s ease;
}

/* Reduced motion: progress bar has no purpose without animation */
@media (prefers-reduced-motion: reduce) { .anim-progress { display: none; } }