/* RAD INTEL — V2 premium layer
   Tokens per RAD Design DNA (canonical hex). Additive skin over the mirrored site:
   no layout changes, no scroll-hijack, reduced-motion safe. */

:root {
  --rad-white: #eee9e2;
  --rad-green: #d4e05f;
  --rad-grey: #4c4c4c;
  --rad-blue-med: #00667f;
  --rad-blue-dark: #193d5b;
  --rad-purple-dark: #3c2a5f;
  --v2-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---- micro-finish ---- */
::selection { background: var(--rad-green); color: #14110c; }
html { scrollbar-color: rgba(25,61,91,.55) transparent; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(25,61,91,.45); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(25,61,91,.75); border: 2px solid transparent; background-clip: content-box; }
:focus-visible { outline: 2px solid var(--rad-blue-med); outline-offset: 2px; border-radius: 4px; }

/* ---- nav: glass on scroll (class set by v2.js) ---- */
.v2-nav-glass {
  backdrop-filter: blur(14px) saturate(1.15);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  background-color: rgba(238, 233, 226, .82) !important;
  box-shadow: 0 1px 0 rgba(25, 61, 91, .12), 0 8px 28px -18px rgba(25, 61, 91, .35);
  transition: background-color .35s var(--v2-ease), box-shadow .35s var(--v2-ease);
}

/* ---- buttons / CTA ---- */
a[href], button { transition: transform .28s var(--v2-ease), box-shadow .28s var(--v2-ease), background-color .28s var(--v2-ease), color .28s var(--v2-ease); }
.v2-cta {
  position: relative;
  isolation: isolate;
}
.v2-cta:hover { transform: translateY(-1px); box-shadow: 0 10px 30px -12px rgba(25, 61, 91, .55); }
/* sonar pulse ring behind the primary CTA — Rad Green, sparing, on interval */
.v2-cta::after {
  content: "";
  position: absolute; inset: -2px;
  border-radius: inherit;
  border: 1.5px solid var(--rad-green);
  opacity: 0;
  z-index: -1;
  pointer-events: none;
}
.v2-cta.v2-pulse::after { animation: v2-sonar 2.8s var(--v2-ease); }
@keyframes v2-sonar {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/* ---- cards: lift + hairline ring + slow image zoom ---- */
.v2-card { transition: transform .45s var(--v2-ease), box-shadow .45s var(--v2-ease); will-change: transform; }
.v2-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 0 rgba(25,61,91,.10), 0 24px 48px -24px rgba(25, 61, 91, .45);
}
.v2-card img, .v2-card video { transition: transform 1.1s var(--v2-ease); }
.v2-card:hover img, .v2-card:hover video { transform: scale(1.028); }
.v2-card { overflow: hidden; }

/* ---- hero video treatment: cinematic scrims + canvas overlay slot ---- */
.v2-hero-wrap { position: relative; }
.v2-hero-wrap::before,
.v2-hero-wrap::after {
  content: ""; position: absolute; left: 0; right: 0; z-index: 12; pointer-events: none;
}
.v2-hero-wrap::before { top: 0; height: 22%; background: linear-gradient(to bottom, rgba(0,0,0,.34), transparent); }
.v2-hero-wrap::after { bottom: 0; height: 30%; background: linear-gradient(to top, rgba(25,61,91,.42), transparent); }
.v2-net {
  /* canvas is a replaced element: inset alone won't stretch it */
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 13; pointer-events: none;
  opacity: .5; mix-blend-mode: screen;
}
/* video sharpness helper: hint compositor + hairline contrast pop */
.v2-hero-wrap video { filter: contrast(1.045) saturate(1.05) brightness(1.01); transform: translateZ(0); }

/* ---- Accenture-style flowing swarm hero ---- */
/* deepen the ground so the RAD particle swarm reads as light on near-black */
.v2-hero-deep video { filter: contrast(1.16) saturate(1.05) brightness(.66); }
.v2-hero-deep::before { height: 34%; background: linear-gradient(to bottom, rgba(6,9,20,.72), transparent); }
.v2-hero-deep::after  { height: 50%; background: linear-gradient(to top, rgba(10,8,26,.78), rgba(10,8,26,.18) 62%, transparent); }
.v2-hero-deep { box-shadow: inset 0 0 260px 90px rgba(7,10,24,.66); }
.v2-flow {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 13; pointer-events: none;
  opacity: 1; mix-blend-mode: screen;
}
/* play / pause control, bottom-left, like the reference */
.v2-heroctl {
  position: absolute; left: 22px; bottom: 22px; z-index: 22;
  width: 42px; height: 42px; border-radius: 999px; cursor: pointer;
  background: rgba(238,233,226,.10); border: 1px solid rgba(238,233,226,.35);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--v2-ease), border-color .3s var(--v2-ease), transform .3s var(--v2-ease);
}
.v2-heroctl:hover { background: rgba(212,224,95,.18); border-color: var(--rad-green); transform: scale(1.06); }
.v2-ico-pause { display: inline-block; width: 12px; height: 13px; position: relative; }
.v2-ico-pause::before, .v2-ico-pause::after {
  content: ""; position: absolute; top: 0; width: 3.5px; height: 13px; border-radius: 1px; background: var(--rad-white);
}
.v2-ico-pause::before { left: 1px; } .v2-ico-pause::after { right: 1px; }
.v2-heroctl:hover .v2-ico-pause::before, .v2-heroctl:hover .v2-ico-pause::after { background: var(--rad-green); }
.v2-ico-play {
  display: inline-block; width: 0; height: 0; margin-left: 2px;
  border-top: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 12px solid var(--rad-white);
}
.v2-heroctl:hover .v2-ico-play { border-left-color: var(--rad-green); }

/* keep the home hero headline on ONE line (V2 only, desktop). The flex column
   caps the h1 box and forces a wrap; max-content + nowrap lets it size to the
   text and the centered flex parent re-centers it. Wraps normally below 900px. */
@media (min-width: 900px) {
  .v2-dots-host h1.text-title-x-large {
    white-space: nowrap !important;   /* one line */
    max-width: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
    margin: 0 !important;             /* no auto margins: let justify-center center it */
    text-align: center !important;
  }
}

/* eyebrow accent hairline above the light-band headline */
.v2-kicker {
  width: 54px; height: 3px; border-radius: 2px; margin: 0 auto 18px;
  background: linear-gradient(90deg, var(--rad-green), rgba(212,224,95,0));
}
@media (prefers-reduced-motion: no-preference) {
  .v2-kicker { animation: v2-kickergrow 1s var(--v2-ease) both; }
  @keyframes v2-kickergrow { from { width: 0; opacity: 0; } to { width: 54px; opacity: 1; } }
}

/* ---- dot field behind light headline sections ---- */
.v2-dots-host { position: relative; }
.v2-dots-host > *:not(.v2-dots) { position: relative; z-index: 1; }
.v2-dots {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: .3;
  -webkit-mask-image: radial-gradient(ellipse 55% 70% at 50% 55%, transparent 28%, #000 78%);
  mask-image: radial-gradient(ellipse 55% 70% at 50% 55%, transparent 28%, #000 78%);
}

/* ---- scroll reveals (natural scroll, scrub from viewport position) ---- */
@media (prefers-reduced-motion: no-preference) {
  .v2-reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--v2-ease), transform .7s var(--v2-ease); }
  .v2-reveal.v2-in { opacity: 1; transform: none; }
  .v2-stagger > .v2-reveal:nth-child(2) { transition-delay: .08s; }
  .v2-stagger > .v2-reveal:nth-child(3) { transition-delay: .16s; }
  .v2-stagger > .v2-reveal:nth-child(4) { transition-delay: .24s; }
  .v2-stagger > .v2-reveal:nth-child(5) { transition-delay: .32s; }
  .v2-stagger > .v2-reveal:nth-child(6) { transition-delay: .40s; }
  /* hero copy entrance */
  .v2-hero-copy { animation: v2-enter 1.05s var(--v2-ease) both; }
  @keyframes v2-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
}

/* ---- image polish: gentle fade-in when loaded (class from v2.js) ---- */
@media (prefers-reduced-motion: no-preference) {
  img.v2-fade { opacity: 0; transition: opacity .5s var(--v2-ease); }
  img.v2-fade.v2-loaded { opacity: 1; }
}

/* ---- V2 badge (bottom-right so it never collides with the hero play/pause) ---- */
.v2-badge {
  position: fixed; bottom: 14px; right: 14px; z-index: 9999;
  font: 600 10.5px/1 system-ui, sans-serif; letter-spacing: .12em;
  color: var(--rad-white); background: rgba(25,61,91,.85);
  border: 1px solid rgba(212,224,95,.5);
  padding: 6px 9px; border-radius: 999px;
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ---- themed header entrance: signal resolving (blur -> clarity + rise) ---- */
@media (prefers-reduced-motion: no-preference) {
  .v2-hd { opacity: 0; }
  .v2-hd-in { animation: v2-hdin .95s var(--v2-ease) both; }
  @keyframes v2-hdin {
    0%   { opacity: 0; transform: translateY(20px); filter: blur(7px); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: none; filter: blur(0); }
  }
}

/* ---- matrix rain overlay on the code-block art ---- */
.v2-mx { position: absolute; z-index: 1; pointer-events: none; }

/* ---- mobile optimization ---- */
@media (max-width: 768px) {
  /* heavy ambient canvases off: save CPU/battery, keep the videos */
  .v2-flow, .v2-dots, .v2-mqdots, .v2-mx, .v2-net { display: none !important; }
  .v2-hero-deep video { filter: contrast(1.1) saturate(1.05) brightness(.74); }
  .v2-hero-deep { box-shadow: inset 0 0 120px 30px rgba(7,10,24,.5); }
  .v2-heroctl { left: 12px; bottom: 12px; width: 38px; height: 38px; }
  .v2-badge { bottom: 10px; right: 10px; font-size: 9.5px; padding: 5px 8px; }
  .v2-mqband { padding-top: 20px !important; padding-bottom: 20px !important; }
  .v2-mqkicker { margin-bottom: 14px; letter-spacing: .18em; }
  .v2-dots-host h1.text-title-x-large { white-space: normal !important; }
}
@media (hover: none) {
  .v2-card:hover { transform: none; box-shadow: none; }
  .v2-card:hover img, .v2-card:hover video { transform: none; }
}

/* ---- dressed-up client-logo carousel ---- */
.v2-mqband {
  position: relative; overflow: hidden;
  padding-top: 30px !important; padding-bottom: 30px !important;
  /* deepen the flat teal into the brand blue->teal ground */
  background: linear-gradient(120deg, #0f3247 0%, #00667f 52%, #0f3247 100%) !important;
  border-top: 1px solid rgba(212,224,95,.28);
  border-bottom: 1px solid rgba(212,224,95,.28);
}
.v2-mqband > *:not(.v2-mqdots) { position: relative; z-index: 2; }
.v2-mqdots {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  pointer-events: none; opacity: .12;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}
.v2-mqkicker {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  font: 700 11px/1 "Aptos", system-ui, sans-serif; letter-spacing: .22em;
  color: rgba(238,233,226,.72); margin-bottom: 20px; text-transform: uppercase;
}
.v2-mqkicker .v2-node {
  width: 7px; height: 7px; border-radius: 50%; background: var(--rad-green);
  box-shadow: 0 0 0 0 rgba(212,224,95,.6);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-mqkicker .v2-node { animation: v2-nodepulse 2.4s var(--v2-ease) infinite; }
  @keyframes v2-nodepulse { 0%{box-shadow:0 0 0 0 rgba(212,224,95,.55);} 70%{box-shadow:0 0 0 8px rgba(212,224,95,0);} 100%{box-shadow:0 0 0 0 rgba(212,224,95,0);} }
}
/* logos: unify to warm-white, lift on hover; whole band eases when paused */
.v2-mqband .animate-marquee img {
  filter: brightness(0) invert(1) opacity(.82);
  transition: filter .35s var(--v2-ease), transform .35s var(--v2-ease);
}
.v2-mqband .animate-marquee > *:hover img {
  filter: brightness(0) invert(1) opacity(1);
  transform: translateY(-2px) scale(1.04);
}
.v2-mqband .animate-marquee { transition: none; }

/* hero carousel dots (Embla engine is replaced by our controller) */
.v2-dot-on{background:var(--rad-green,#d4e05f)!important;border-color:var(--rad-green,#d4e05f)!important;opacity:1!important;transform:scale(1.25)}
