@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── Space Grotesk (self-hosted variable display face: technical, geometric) ── */
@font-face {
  font-family: "Space Grotesk";
  src: url("./fonts/SpaceGrotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  font-style: normal;
}

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-ink text-mist font-body antialiased;
  }
  html,
  body {
    /* `clip` (not `hidden`) — `hidden` turns body into a scroll container and
       silently breaks every position:sticky descendant. `clip` keeps sticky. */
    overflow-x: clip;
  }
  h1, h2, h3, h4 {
    @apply font-display;
  }
  ::selection {
    background: #ff5b1f;
    color: #fff;
  }
  :focus-visible {
    outline: 2px solid #ff5b1f;
    outline-offset: 2px;
  }
  ::-webkit-scrollbar {
    width: 10px;
  }
  ::-webkit-scrollbar-track {
    background: #f3f5f8;
  }
  ::-webkit-scrollbar-thumb {
    background: #c6ceda;
    border: 2px solid #f3f5f8;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: #0a1f44;
  }
}

@layer utilities {
  .container-x {
    @apply mx-auto max-w-[1320px] px-5 md:px-10;
  }
  .bg-grid {
    background-image:
      linear-gradient(rgba(10, 31, 68, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(10, 31, 68, 0.05) 1px, transparent 1px);
    background-size: 54px 54px;
  }
  .font-tech {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
  }

  /* Native dropdown options: always dark text on white, on every OS/browser.
   * (Chromium/Windows paints popup options with the select's inherited color on a
   * light popup — dark selects otherwise render white-on-white, invisible.) */
  select option,
  select optgroup {
    background-color: #ffffff;
    color: #14151A;
  }
}

/* Editorial marquee */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 55s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* Hero diagram data-flow */
@keyframes dashflow {
  to { stroke-dashoffset: -24; }
}
.dash-flow {
  animation: dashflow 1.6s linear infinite;
}
@keyframes hubpulse {
  0%, 100% { opacity: 0.25; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.1); }
}
.hub-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: hubpulse 3.2s ease-in-out infinite;
}
@keyframes spokepulse {
  0%, 100% { opacity: 0; }
  15% { opacity: 1; }
  45% { opacity: 0; }
}
.spoke-pulse {
  animation: spokepulse 3s ease-in-out infinite;
}

/* Blog article typography */
.prose-avio h2 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: #0a1f44;
  font-size: 1.45rem;
  margin: 2.6rem 0 1rem;
  letter-spacing: -0.01em;
}
.prose-avio p {
  color: rgba(20, 21, 26, 0.72);
  line-height: 1.8;
  margin: 1.1rem 0;
  font-size: 0.95rem;
}
.prose-avio strong {
  color: #0a1f44;
}
.prose-avio ul {
  margin: 1.2rem 0;
  padding-left: 0;
  list-style: none;
}
.prose-avio li {
  color: rgba(20, 21, 26, 0.72);
  line-height: 1.7;
  font-size: 0.95rem;
  padding-left: 1.4rem;
  position: relative;
  margin: 0.6rem 0;
}
.prose-avio li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: #ff5b1f;
}

/* Dark grid for navy anchor sections */
.bg-grid-dark {
  background-image:
    linear-gradient(rgba(0, 194, 209, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 194, 209, 0.06) 1px, transparent 1px);
  background-size: 54px 54px;
}

/* Footer links */
.footer-link {
  font-size: 13px;
  color: rgba(236, 237, 239, 0.62);
  transition: color 0.2s ease;
}
.footer-link:hover {
  color: #00c2d1;
}

/* Button sheen sweep (primary CTAs) */
.btn-ember {
  position: relative;
  overflow: hidden;
}
.btn-ember::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 55%;
  transform: translateX(-160%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.26), transparent);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.btn-ember:hover::after {
  transform: translateX(330%) skewX(-18deg);
}

/* Skeleton shimmer */
.skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(10, 31, 68, 0.07);
}
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* Sonner toast polish */
[data-sonner-toast] {
  background: #ffffff !important;
  border: 1px solid rgba(10, 31, 68, 0.12) !important;
  color: #14151a !important;
  border-radius: 2px !important;
  font-family: "Manrope", sans-serif;
}

/* Spotlight card glow (cursor-tracked) */
.spot-card { position: relative; overflow: hidden; }
.spot-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 194, 209, 0.12), transparent 65%);
}
.spot-card:hover::before { opacity: 1; }
.spot-card--dark::before {
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(0, 194, 209, 0.16), transparent 65%);
}

/* Skeleton shimmer */
.skeleton { position: relative; overflow: hidden; background: #E8EDF3; border-radius: 2px; }
.skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Aurora ambient layer (dark heroes) */
.aurora { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aurora span {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.5;
  animation: aurora-drift 14s ease-in-out infinite alternate;
}
.aurora span:nth-child(1) { background: rgba(0, 194, 209, 0.2); width: 45vw; height: 45vw; left: -10%; top: -20%; }
.aurora span:nth-child(2) { background: rgba(255, 91, 31, 0.14); width: 38vw; height: 38vw; right: -8%; top: 20%; animation-delay: -4s; animation-duration: 18s; }
.aurora span:nth-child(3) { background: rgba(10, 31, 68, 0.55); width: 50vw; height: 50vw; left: 25%; bottom: -30%; animation-delay: -8s; animation-duration: 16s; }
@keyframes aurora-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(4%, -4%) scale(1.08); }
}

/* Visible keyboard focus (WCAG 2.4.7) */
:focus-visible { outline: 2px solid #00C2D1; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .aurora span, .skeleton::after { animation: none !important; }
}

/* Film grain overlay (dark anchors: hero, footer, page heroes) */
.grain {
  position: absolute;
  inset: 0;
  opacity: 0.05;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* Orbit motif (echoes the logo swoosh) */
.hero-orbit {
  position: absolute;
  border: 1px solid rgba(0, 194, 209, 0.16);
  border-radius: 50%;
  pointer-events: none;
}

/* Reduced motion */
@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;
  }
}

/* ── OEM logo ticker + CTA benefit ticker ── */
@keyframes logo-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.logo-marquee-track { animation: logo-scroll 42s linear infinite; }
.logo-marquee-track:hover { animation-play-state: paused; }
.ticker-track { animation: logo-scroll 26s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track, .ticker-track { animation: none !important; }
}

/* ── Network Ops Console ── */
@keyframes ops-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.ops-cursor { animation: ops-blink 1.1s steps(1) infinite; color: #00C2D1; }
@keyframes ops-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.ops-line { animation: ops-in 0.4s ease-out both; }
@keyframes ops-scan {
  from { top: -10%; }
  to { top: 110%; }
}
.ops-scan { animation: ops-scan 7s linear infinite; }

/* ── Spinning orbital badge ── */
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin-slow { animation: spin-slow 18s linear infinite; }

/* ── Outlined / scroll-fill numerals ── */
.num-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.4);
}
.num-outline-ink {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(20, 21, 26, 0.3);
}
.giant-num {
  color: transparent;
  -webkit-text-stroke: 1px rgba(20, 21, 26, 0.16);
  font-weight: 700;
  line-height: 0.8;
  font-size: clamp(12rem, 24vw, 26rem);
  letter-spacing: -0.04em;
}
.text-outline-white {
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.55);
}

/* Dark prose variant — dark reading experience on blog posts */
.prose-avio--dark h2,
.prose-avio--dark h3 {
  color: #ffffff;
}
.prose-avio--dark p,
.prose-avio--dark li {
  color: rgba(255, 255, 255, 0.68);
}
.prose-avio--dark strong {
  color: #ffffff;
}
.prose-avio--dark a {
  color: #00c2d1;
}
.prose-avio--dark blockquote {
  border-color: rgba(0, 194, 209, 0.45);
  color: rgba(255, 255, 255, 0.8);
}
.prose-avio--dark code {
  background: rgba(255, 255, 255, 0.08);
  color: #7ddbe6;
}
.prose-avio--dark li::before {
  background: #00c2d1;
}