/* ==========================================================================
   OpusCode polish layer — sits on top of the existing site styles.
   Colours follow DESIGN.md. Motion lives in polish.js (GSAP + Lenis).
   ========================================================================== */

:root {
  --oc-primary: #343ced;
  --oc-violet: #8b5cf6;
  --oc-signal: #d8fd49;
  --oc-ink: #0a0227;
  --oc-body: #56536b;
  --oc-muted: #68657f;
  --oc-ease: cubic-bezier(.22, 1, .36, 1);
  --oc-spring: cubic-bezier(.34, 1.4, .64, 1);
}

/* ---------- fixes ---------- */
/* hamburger was visible on desktop (inline display beat md:hidden) */
/* nav: hamburger below 1024px (desktop links did not fit at tablet width) */
@media (min-width: 1024px) { #nav-ham-btn { display: none !important; } }
@media (max-width: 1023px) { #nav-pill nav > .hidden.md\:flex { display: none !important; } }

/* readable body copy on light sections (#828282 failed WCAG AA) */
.text-\[\#828282\] { color: var(--oc-muted) !important; }
p.text-base.text-\[\#828282\] { color: var(--oc-body) !important; }

/* balanced headings, no orphans */
h1, h2 { text-wrap: balance; }
p { text-wrap: pretty; }

:focus-visible { outline: 2px solid var(--oc-primary); outline-offset: 3px; border-radius: 6px; }
.dark-bg :focus-visible, #industries :focus-visible, #platform :focus-visible, #leadgen :focus-visible { outline-color: var(--oc-signal); }

/* press feedback on every button-like control (uses `scale`, so it never fights GSAP transforms) */
.shiny-btn, button, [role="button"] { transition: scale .18s var(--oc-spring); }
.shiny-btn:active, button:active { scale: .97; }

/* ---------- heading highlight: coloured words + an underline that draws in ---------- */
.ph-kw > svg, .ph-kw .ph-svg, .ph-kw .ph-cur { display: none !important; }
.ph-kw {
  color: var(--hl, var(--oc-primary)); display: inline !important; position: relative;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0% .085em no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size 1.1s var(--oc-ease);
}
.ph-kw.is-lit, html:not(.js-anim):not(.gsap-on) .ph-kw { background-size: 100% .085em; }

/* ---------- smooth scroll (Lenis) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- scroll progress ---------- */
.oc-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--oc-primary), var(--oc-violet));
  transform: scaleX(0); transform-origin: left center;
}

/* ---------- hero ---------- */
/* hero entrance: pure CSS so it starts on first paint (no wait for scripts = fast LCP).
   fill-mode backwards: releases the transform afterwards so GSAP tilt/parallax can take over. */
@keyframes oc-rise { from { transform: translateY(22px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oc-lift { from { transform: translateY(18px); } to { transform: none; } }
@keyframes oc-mask { from { clip-path: inset(0 0 100% 0); transform: translateY(28px); } to { clip-path: inset(0 0 -20% 0); transform: none; } }
@keyframes oc-card { from { transform: perspective(1400px) translateY(70px) rotateX(14deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes oc-fade { from { opacity: 0; } to { opacity: 1; } }
.hero-grid > div:first-child > :nth-child(1) { animation: oc-rise .8s cubic-bezier(.22,1,.36,1) backwards; }
.hero-grid h1 { animation: oc-mask 1.1s cubic-bezier(.22,1,.36,1) .12s backwards; }
.hero-grid h1 + p { animation: oc-lift .9s cubic-bezier(.22,1,.36,1) .35s backwards; }
.hero-grid > div:first-child > :nth-child(n+4) { animation: oc-rise .9s cubic-bezier(.22,1,.36,1) .5s backwards; }
#hero-monitor { animation: oc-card 1.4s cubic-bezier(.22,1,.36,1) .25s backwards; }
#hero-monitor .hero-float-badge { animation: oc-rise .8s cubic-bezier(.22,1,.36,1) 1s backwards; }
#fi-container { animation: oc-fade 1.4s ease .5s backwards; }
#hero-monitor { perspective: 1400px; }
#hero-monitor > div:first-child { transform-origin: 50% 60%; will-change: transform; }
#hm-bar { transform-origin: left center; }
.fi-icon { transition: box-shadow .3s; }
@media (max-width: 1023px) { #fi-container { display: none; } }

/* thinking orbs */
canvas.orb { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ---------- tool logos: quiet monochrome, colour on hover ---------- */
#mq > div { transition: opacity .3s; }
#mq svg { fill: #2a2645 !important; transition: fill .3s; }
#mq > div > div { opacity: .55 !important; transition: opacity .3s; }
#mq > div:hover > div { opacity: 1 !important; }
#tools .overflow-hidden {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
#tools:hover .mq-t { animation-play-state: paused; }

/* ---------- spotlight cards: border lights up under the cursor ---------- */
.oc-spot { position: relative; isolation: isolate; }
.oc-spot::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; z-index: 2; pointer-events: none;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), var(--spot, rgba(52,60,237,.75)), transparent 65%);
  -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 .35s;
}
.oc-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), var(--spot-fill, rgba(52,60,237,.06)), transparent 70%);
  opacity: 0; transition: opacity .35s;
}
.oc-spot:hover::before, .oc-spot:hover::after { opacity: 1; }
.oc-spot--dark { --spot: rgba(216,253,73,.6); --spot-fill: rgba(216,253,73,.05); }

/* How-it-works cards lift */
#hiw .grid > div { transition: transform .45s var(--oc-spring), box-shadow .45s var(--oc-ease); }
#hiw .grid > div:hover { transform: translateY(-6px); box-shadow: 0 24px 56px -20px rgba(52,60,237,.35); }

/* ---------- depth on dark sections: soft glow + grain ---------- */
#industries, #platform, #leadgen, #process, #contact { position: relative; overflow-x: clip; }
body { overflow-x: clip; }
.oc-grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .07; mix-blend-mode: overlay;
  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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.oc-fx, #platform > .oc-fx, #leadgen > .oc-fx { position: absolute !important; inset: 0; overflow: hidden; pointer-events: none; z-index: 0 !important; }
.oc-glow {
  position: absolute !important; width: 640px; height: 640px; border-radius: 50%; pointer-events: none; z-index: 0 !important;
  background: radial-gradient(circle, rgba(52,60,237,.32), rgba(139,92,246,.12) 45%, transparent 70%);
  filter: blur(20px);
}
#industries > .max-w-7xl, #contact > .max-w-7xl { position: relative; z-index: 1; }

/* ---------- reveal: GSAP takes over from the old fade class ---------- */
.gsap-on .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.oc-split .oc-w { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .ph-kw { background-size: 100% .085em; transition: none; }
  .hero-grid *, .hero-grid h1, #hero-monitor, #fi-container { animation: none !important; }
  #hiw .grid > div, .shiny-btn, button { transition: none; }
}

/* ---------- Legion: dotted wave background ---------- */
#dotted-surface {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(0,0,0,.55) 62%, #000 85%);
  mask-image: linear-gradient(to bottom, transparent 0%, transparent 38%, rgba(0,0,0,.55) 62%, #000 85%);
}
#leadgen > :not(#dotted-surface):not(.oc-fx) { position: relative; z-index: 1; }
/* keep Legion copy crisp over the wave */
#legion-cards > div { background: rgba(14, 5, 53, .72) !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
#legion-stats { position: relative; isolation: isolate; }
#legion-stats::before {
  content: ""; position: absolute; inset: -48px -120px; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(8, 2, 40, .9), rgba(8, 2, 40, .55) 60%, transparent);
}