/* aarna.pro shared overrides — hand-authored, same-origin, append-only.
   Loaded after the theme's compiled main.css on every public page (home, interior, auth).
   Purpose: one display face across the two theme halves, one button + accent treatment,
   owned CSS-gradient decoratives in place of theme stock rasters, and JS-off resilience. */

/* --- Display typeface (Sora), vendored same-origin so interior pages match the home face --- */
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/site/shared/fonts/sora-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Sora";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/site/shared/fonts/sora-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/site/shared/fonts/spacegrotesk-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/static/site/shared/fonts/spacegrotesk-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: "Sora", "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --badge-accent: var(--color-primary-500, #864ffe);
  /* One brand purple across home and interior pages. The home bundle ships no --color-primary-*
     scale and a legacy --color-opai-purple in a slightly different hue; define the scale here and
     alias opai to it so every surface renders the same accent. This file loads after both theme
     bundles, so these definitions win. */
  --color-primary-50: #f4f2fe;
  --color-primary-500: #864ffe;
  --color-primary-600: #7c31f6;
  --color-opai-purple: var(--color-primary-500);
}

/* Interior heading classes pick up the display face, so interior heros read like the home hero
   without regenerating the compiled theme bundle. */
.text-heading-1,
.text-heading-2,
.text-heading-3,
.text-heading-4,
.text-heading-5 {
  font-family: var(--font-display);
}

/* --- Button normalization: one proportional treatment, drop the home CTAs' mono + uppercase --- */
.button-inner.font-ibm-plex-mono,
.button-inner.font-ibm-plex-mono .button-text {
  font-family: var(--font-body);
  text-transform: none;
  letter-spacing: normal;
}
.button-inner.font-ibm-plex-mono .button-text::first-letter {
  text-transform: none;
}

/* --- Brand accent: fold scattered theme accent colours onto aarna purple ---
   (a genuine success state keeps its own colour via the .is-operational escape hatch). */
.text-ns-green:not(.is-operational),
.text-ns-yellow:not(.is-operational),
.text-ns-cyan:not(.is-operational) {
  color: var(--badge-accent);
}
.bg-ns-green:not(.is-operational),
.bg-ns-yellow:not(.is-operational),
.bg-ns-cyan:not(.is-operational) {
  background-color: var(--badge-accent);
}

/* Theme eyebrow badges (pale cyan/green/yellow tints) → a soft aarna-purple pill. */
.badge-cyan,
.badge-cyan-v2,
.badge-green,
.badge-yellow-v2 {
  background-color: var(--color-primary-50, #f4f2fe) !important;
  color: var(--color-primary-600, #7c31f6) !important;
}

/* --- Owned CSS-gradient decoratives (replace theme stock rasters; named classes, never bg-[url(...]) --- */
.site-signup-bg {
  background-color: var(--color-primary-600, #7c31f6);
  background-image:
    radial-gradient(60% 80% at 15% 20%, rgba(134, 79, 254, 0.55), transparent 70%),
    radial-gradient(55% 70% at 90% 90%, rgba(60, 20, 120, 0.65), transparent 72%),
    linear-gradient(135deg, #3a1a7a 0%, #7c31f6 55%, #864ffe 100%);
  background-repeat: no-repeat;
  background-size: cover;
}
.footer-orb {
  position: absolute;
  left: 50%;
  top: -1320px;
  width: 1635px;
  height: 1635px;
  transform: translateX(-50%);
  pointer-events: none;
  border-radius: 9999px;
  background: radial-gradient(
    closest-side,
    rgba(134, 79, 254, 0.45),
    rgba(134, 79, 254, 0.14) 55%,
    transparent 78%
  );
}
.home-hero-aura {
  background-color: transparent;
  background-image:
    radial-gradient(45% 55% at 50% 42%, rgba(134, 79, 254, 0.22), transparent 70%),
    radial-gradient(38% 42% at 70% 60%, rgba(134, 79, 254, 0.12), transparent 72%);
  background-repeat: no-repeat;
}
.menu-accent {
  background: linear-gradient(135deg, #2a1660 0%, #7c31f6 60%, #864ffe 100%);
  border-radius: 16px;
}

/* --- Progressive enhancement (G1): reveal content by default; only hide for the scroll
   reveal once the init script has confirmed JS is live AND motion is allowed. With JS off
   or reduced-motion, every [data-ns-animate] block stays fully visible. --- */
[data-ns-animate] {
  opacity: 1;
}
html.wf-animate [data-ns-animate] {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  [data-ns-animate],
  html.wf-animate [data-ns-animate] {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* --- Floating header pill: restore the intended glass blur --- */
/* The theme markup asks for `backdrop-blur-lg`, but that utility isn't in the compiled
   bundle, so the fixed menubar had no blur and content scrolled hard behind it. Apply the
   blur to the pill directly (home already blurs via its own bundle; this unifies interior
   pages with it). */
.header-one {
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

/* --- Active marketing-nav state (set by aarna-nav-active.js) --- */
/* The current page's nav link, and its top-level dropdown trigger, are marked with
   aria-current="page" so the active section is visible in the bar and the mobile menu. */
header a[aria-current="page"] {
  color: var(--color-primary-600, #7c31f6);
  font-weight: 500;
}
.dark header a[aria-current="page"] {
  color: var(--color-primary-500, #864ffe);
}
/* Top-level dropdown triggers are pill-shaped; tint the active one so it reads in the
   collapsed desktop bar, where the matching leaf link is hidden inside the dropdown. */
header li.nav-item > a[aria-current="page"] {
  background-color: var(--color-primary-50, #f4f2fe);
  border-color: rgba(134, 79, 254, 0.25);
}
.dark header li.nav-item > a[aria-current="page"] {
  background-color: rgba(134, 79, 254, 0.16);
  border-color: rgba(134, 79, 254, 0.32);
}

/* --- Capability cards ("aarna-cap-card") ---
   A card gets a soft gradient keyed to its own accent (set per card via the inline --cap
   accent), a tinted hairline border, a hover lift with an image zoom, and a gentle idle glow.
   Scroll-in reveal stays on the theme's data-ns-animate. First used on the home "Observability
   for AI work" section; now the shared card face for interior grids (features, use cases,
   integrations) too, so every card grid across the site reads as one family. The card owns its
   own background in both themes (no bg-white underneath), so the dark rules below need no
   !important and this one file carries the whole component onto every page that loads it. */
.aarna-cap-card {
  position: relative;
  isolation: isolate;
  background: linear-gradient(165deg, #ffffff 0%, color-mix(in srgb, var(--cap, #864ffe) 9%, #ffffff) 100%);
  border: 1px solid color-mix(in srgb, var(--cap, #864ffe) 18%, rgba(17, 23, 28, 0.06));
  box-shadow: 0 1px 2px rgba(17, 23, 28, 0.04);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s cubic-bezier(.2, .7, .2, 1),
    border-color .5s ease;
}
.aarna-cap-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: radial-gradient(130% 85% at 50% -12%, color-mix(in srgb, var(--cap, #864ffe) 20%, transparent), transparent 68%);
  pointer-events: none;
}
.aarna-cap-card > * {
  position: relative;
  z-index: 1;
}
.aarna-cap-card img {
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
  will-change: transform;
}
@media (hover: hover) {
  .aarna-cap-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px -24px color-mix(in srgb, var(--cap, #864ffe) 42%, transparent);
    border-color: color-mix(in srgb, var(--cap, #864ffe) 32%, transparent);
  }
  .aarna-cap-card:hover img {
    transform: scale(1.04);
  }
}
/* Dark surface. Lives here (loaded site-wide) rather than in the home-only dark layer, so the
   component carries its own dark treatment onto interior pages too. */
html.dark .aarna-cap-card {
  background: linear-gradient(165deg, #191d2a 0%, color-mix(in srgb, var(--cap, #864ffe) 15%, #191d2a) 100%);
  border-color: color-mix(in srgb, var(--cap, #864ffe) 28%, rgba(244, 244, 241, 0.08));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
html.dark .aarna-cap-card::before {
  background: radial-gradient(130% 85% at 50% -12%, color-mix(in srgb, var(--cap, #864ffe) 32%, transparent), transparent 70%);
}
@media (hover: hover) {
  html.dark .aarna-cap-card:hover {
    box-shadow: 0 24px 50px -22px color-mix(in srgb, var(--cap, #864ffe) 52%, transparent);
    border-color: color-mix(in srgb, var(--cap, #864ffe) 42%, transparent);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .aarna-cap-card::before {
    animation: aarna-cap-glow 7s ease-in-out infinite;
  }
  @keyframes aarna-cap-glow {
    0%, 100% { opacity: .7; }
    50% { opacity: 1; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .aarna-cap-card,
  .aarna-cap-card img {
    transition: none;
  }
}

/* --- Owned decorative glow behind the dark CTA / status cards ---
   Replaces the theme's stock raster orb (ns-img-499/498) on the 404, status and about CTA
   cards with a soft, owned radial brand-purple glow. The --ok variant goes teal for a
   successful status. These cards are dark in both themes, so one treatment works for both. */
.aarna-deco-orb {
  background: radial-gradient(
    closest-side,
    rgba(134, 79, 254, 0.42),
    rgba(134, 79, 254, 0.14) 55%,
    transparent 78%
  );
  border-radius: 9999px;
}
.aarna-deco-orb--ok {
  background: radial-gradient(
    closest-side,
    rgba(90, 184, 150, 0.42),
    rgba(90, 184, 150, 0.14) 55%,
    transparent 78%
  );
}

/* A softer in-card bloom: replaces the stock raster gradient overlays tucked behind content
   on light and dark cards (contact, documentation, pricing, about, faq). Subtle brand-purple
   depth, owned and able to retint, in place of a fixed PNG. */
.aarna-deco-bloom {
  background: radial-gradient(
    closest-side,
    rgba(134, 79, 254, 0.2),
    rgba(134, 79, 254, 0.07) 55%,
    transparent 78%
  );
  border-radius: 9999px;
}