@import "./tokens.css";

/* ---------------------------------------------------------------
   Reset
   --------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* No visible scrollbar anywhere; scrolling works as normal. */
  scrollbar-width: none;
  /* Without this the fixed header covers the top of whatever section
     an anchor lands on. */
  scroll-padding-top: calc(var(--nav-h) + var(--space-s));
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

body {
  scrollbar-width: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  min-height: 100dvh;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.55;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

::selection {
  background: var(--blue);
  color: var(--on-blue);
}

/* ---------------------------------------------------------------
   Layout primitives
   --------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--wide {
  max-width: var(--width-wide);
}

.container--prose {
  max-width: var(--width-prose);
}

.section {
  position: relative;
  z-index: var(--z-content);
  padding-block: var(--section-y);
}

/* Two-column band: a sticky lead on the left, content on the right.
   Used by services, objections, FAQ, and the case-study body. */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-3xl);
  align-items: start;
}

.split__lead {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-xl));
}

@media (max-width: 900px) {
  .split {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .split__lead {
    position: static;
  }
}

/* ---------------------------------------------------------------
   Footer reveal
   The page carries an opaque background and slides up off a footer
   pinned behind it. See Footer.astro.
   --------------------------------------------------------------- */

main {
  position: relative;
  z-index: 1;
  background: var(--canvas);
}

body[data-footer-reveal] main {
  margin-bottom: var(--footer-h, 0px);
}

body[data-footer-reveal] .footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 300;
  padding: var(--space-2xs) var(--space-s);
  background: var(--blue);
  color: var(--on-blue);
  font-size: var(--step--1);
  text-decoration: none;
  border-radius: var(--radius-pill);
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ---------------------------------------------------------------
   Type primitives
   --------------------------------------------------------------- */

/* Glass pill badge, for the hero. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.section-title {
  /* Matched to the "What We Build" heading, with --step-5 as the floor so
     it stays readable on a narrow screen. White (the ink) on dark
     sections; light sections set --title-ink to the brand blue. */
  font-size: max(var(--step-5), min(var(--step-7), 4.6vw));
  color: var(--title-ink, var(--ink));
}

.section-lede {
  margin-top: var(--space-m);
  max-width: 52ch;
  font-size: var(--step-1);
  color: var(--ink-2);
}

.display {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------
   Controls
   --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 13px 30px;
  border-radius: var(--radius-pill);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring),
    background var(--dur-base) var(--ease-spring),
    border-color var(--dur-base) var(--ease-spring);
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn--primary {
  background: var(--blue);
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--on-blue);
  box-shadow: 0 0 35px rgba(0, 90, 230, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn--primary:hover {
  background: var(--blue-hover);
  box-shadow: 0 0 45px rgba(0, 102, 255, 0.8), 0 6px 20px rgba(0, 0, 0, 0.35);
}

/* The lit primary (the hero's and About's): brand blue lit from above,
   a lighter top, a deeper base, a bright inner edge and a soft
   highlight on its upper half. No border: on the deep base it read as a
   light line along the bottom. On hover a band of light sweeps across. */
.btn--lit {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  padding: 15px 31px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(150, 195, 255, 0.55), transparent 60%),
    linear-gradient(180deg, #1f74ff 0%, #005ae6 52%, #0047bd 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -2px 6px rgba(0, 20, 80, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 18px -10px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 1px rgba(0, 30, 100, 0.35);
}

.btn--lit:hover {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(170, 210, 255, 0.65), transparent 60%),
    linear-gradient(180deg, #2b7dff 0%, #0a63f0 52%, #004dc9 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 -2px 6px rgba(0, 20, 80, 0.35),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 20px -10px rgba(0, 0, 0, 0.85);
}

.btn--lit:active {
  box-shadow:
    inset 0 1px 3px rgba(0, 20, 80, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--lit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.28) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn--lit:hover::after {
  transform: translateX(120%);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* The lit secondary: the same raised build as .btn--lit, in dark
   glass, to sit beside it on a dark ground. A lighter top, a bright
   inner top edge and a soft highlight on the upper half give it the
   same lift; a faint rim, brightest along the top, keeps its edge on
   black, where a drop shadow can't show. */
.btn--lit-dark {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 0;
  padding: 15px 31px;
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #2b2e37 0%, #17191f 52%, #0c0d11 100%);
  color: #fff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 -2px 6px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 8px 18px -10px rgba(0, 0, 0, 0.8);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
}

.btn--lit-dark:hover {
  background:
    radial-gradient(120% 90% at 50% -20%, rgba(255, 255, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #343844 0%, #1c1f26 52%, #101116 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 0 0 1px rgba(255, 255, 255, 0.11),
    inset 0 -2px 6px rgba(0, 0, 0, 0.45),
    0 1px 2px rgba(0, 0, 0, 0.4),
    0 10px 20px -10px rgba(0, 0, 0, 0.85);
}

.btn--lit-dark:active {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.07),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.btn--lit-dark::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.16) 48%, transparent 66%);
  transform: translateX(-120%);
  pointer-events: none;
}

.btn--lit-dark:hover::after {
  transform: translateX(120%);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .btn--lit:hover::after,
  .btn--lit-dark:hover::after {
    transform: translateX(-120%);
    transition: none;
  }
}

/* Experiments: flat buttons (Buttons: Flat). The same pair on the
   page's own plane: solid brand blue, and a plain light outline; no
   shading, highlight, shadow or sweep. */
html[data-exp-buttons="flat"] .btn--lit {
  background: var(--blue);
  box-shadow: none;
  text-shadow: none;
}

html[data-exp-buttons="flat"] .btn--lit:hover {
  background: var(--blue-hover);
  box-shadow: none;
}

html[data-exp-buttons="flat"] .btn--lit-dark {
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
  text-shadow: none;
}

html[data-exp-buttons="flat"] .btn--lit-dark:hover {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

html[data-exp-buttons="flat"] .btn--lit:active {
  box-shadow: none;
}

html[data-exp-buttons="flat"] .btn--lit-dark:active {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.32);
}

html[data-exp-buttons="flat"] .btn--lit::after,
html[data-exp-buttons="flat"] .btn--lit-dark::after {
  display: none;
}

.btn--glass,
.btn--ghost {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--ink);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.btn--glass:hover,
.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.08);
}

.btn--white {
  background: #ffffff;
  border-color: rgba(255, 255, 255, 0.8);
  color: #050811;
  box-shadow: 0 4px 20px rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.2);
}

.btn--white:hover {
  box-shadow: 0 6px 25px rgba(255, 255, 255, 0.35);
}

/* The same outline on the light intro band. */
.btn--dark {
  background: rgba(5, 12, 28, 0.03);
  border-color: rgba(5, 12, 28, 0.28);
  color: var(--intro-ink);
  box-shadow: 0 4px 20px rgba(10, 30, 80, 0.08);
}

.btn--dark:hover {
  background: rgba(5, 12, 28, 0.07);
  border-color: rgba(5, 12, 28, 0.45);
}

.btn--small {
  padding: 9px 18px;
  font-size: 14px;
}

.btn .btn__arrow {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-base) var(--ease-spring);
}

.btn:hover .btn__arrow {
  transform: translate(2px, -2px);
}

/* Underlined inline link. */
.link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 1px;
  transition: color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out);
}

.link:hover {
  color: var(--blue-text);
  border-color: var(--blue);
}

/* Arrow link, e.g. "View all work →" */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

.arrow-link::after {
  content: "→";
  transition: transform var(--dur-base) var(--ease-spring);
}

.arrow-link:hover {
  color: var(--blue-text);
}

.arrow-link:hover::after {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
   Cards
   Glass panel used for services, work, team, and objection tiles.
   --------------------------------------------------------------- */

.card {
  position: relative;
  border-radius: var(--radius-l);
  border: 1px solid var(--glass-border);
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  box-shadow: var(--shadow-glass);
  transition: border-color var(--dur-base) var(--ease-spring),
    transform var(--dur-base) var(--ease-spring),
    box-shadow var(--dur-base) var(--ease-spring);
}

a.card:hover,
.card--hover:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 30px rgba(0, 90, 230, 0.18);
}

/* ---------------------------------------------------------------
   Scroll reveal
   `is-hiding` is applied by src/scripts/reveal.ts, per element, and
   only to elements below the fold. Nothing is hidden by CSS alone.
   --------------------------------------------------------------- */

[data-reveal] {
  transition: opacity var(--dur-reveal) var(--ease-spring),
    transform var(--dur-reveal) var(--ease-spring);
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-hiding {
  opacity: 0;
  transform: translateY(30px);
}

/* Elements only meaningful for one region; src/scripts/geo.ts flips
   the attribute on <html>. Hidden until the region is known. */
[data-region-only] {
  display: none;
}

html[data-region="IN"] [data-region-only="IN"],
html[data-region="US"] [data-region-only="US"],
html[data-region="EU"] [data-region-only="EU"] {
  display: revert;
}

/* Line sweep: see src/scripts/sweep.ts. Each rendered line of a
   `data-sweep` paragraph is painted by a clipped background that slides
   left as --sweep goes 0 to 100: transparent ahead, a brand-blue leading
   edge, the paragraph's own colour behind. */
.sweep-line {
  display: block;
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--sweep-ink) 0%,
    var(--sweep-ink) 30%,
    var(--blue) 40%,
    transparent 50%,
    transparent 100%
  );
  background-size: 350% 100%;
  background-position-x: calc((100 - var(--sweep, 0)) * 1%);
  -webkit-background-clip: text;
  background-clip: text;
  /* The paint only covers the line's box, so give glyphs that overhang
     it (descenders, round capitals, tight tracking) some room, and take
     that room back with negative margins so the layout doesn't move. */
  padding: 0.14em 0.08em;
  margin: -0.14em -0.08em;
}

/* A tinted run of words inside a swept line paints its own colour, with
   the same gradient sized and shifted to the whole line, so the leading
   edge crosses it in step with the rest of the line. --line-w and
   --run-x are set by sweep.ts. */
.sweep-run {
  color: transparent;
  background: linear-gradient(
    90deg,
    var(--sweep-ink) 0%,
    var(--sweep-ink) 30%,
    var(--blue) 40%,
    transparent 50%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: calc(var(--line-w) * 3.5) 100%;
  background-position-x: calc(
    var(--line-w) * -2.5 * (100 - var(--sweep, 0)) / 100 - var(--run-x)
  );
  -webkit-background-clip: text;
  background-clip: text;
  padding-block: 0.14em;
}

/* A revealed block's lines (sweep.ts reveal mode) each sit in a mask,
   clipped to the line's painted box, so on the way out they slide up
   and out of sight one after another, like the hero's copy. flow-root
   keeps the line's paint-room margins from collapsing through it. */
.sweep-mask {
  display: flow-root;
  clip-path: inset(-0.14em -1em -0.14em -1em);
}

[data-sweep-reveal] .sweep-line {
  transition: transform 0.7s var(--ease-out) calc(var(--i, 0) * 0.06s);
}

[data-sweep-reveal][data-leaving] .sweep-line {
  transform: translateY(-150%);
}

[data-sweep-reveal][data-snap] .sweep-line {
  transition: none;
}

/* ---------------------------------------------------------------
   Video controls (src/scripts/video-controls.ts)
   A frosted pill along the bottom of the video, shown once the host
   has .vp-on, faded while playing and the pointer is still.
   --------------------------------------------------------------- */

.vp {
  position: relative;
}

.vp:fullscreen {
  display: grid;
  place-items: center;
  background: #000;
}

.vp:fullscreen video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.vp-bar {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(8, 10, 18, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-body);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--ease-out),
    visibility 0s linear 0.35s;
}

.vp.vp-on .vp-bar {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.3s ease,
    transform 0.35s var(--ease-out),
    visibility 0s;
}

.vp.vp-on.vp-playing.vp-idle:not(.vp-seeking) .vp-bar {
  opacity: 0;
  transform: translateY(8px);
}

.vp.vp-on.vp-playing.vp-idle:not(.vp-seeking) {
  cursor: none;
}

.vp-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s var(--ease-out);
}

.vp-btn:hover {
  background: rgba(255, 255, 255, 0.12);
}

.vp-btn:active {
  transform: scale(0.92);
}

/* The play/pause button leads, in brand blue. */
.vp-btn[data-vp-play] {
  width: 38px;
  height: 38px;
  background: var(--blue);
}

.vp-btn[data-vp-play]:hover {
  background: #1a6bf0;
}

.vp-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.vp-btn .vp-stroke {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.vp-btn:focus-visible,
.vp-track:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 2px;
}

.vp-time {
  flex: none;
  min-width: 3.2em;
  padding-inline: 6px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
}

.vp-time--total {
  color: rgba(255, 255, 255, 0.5);
}

.vp-track {
  position: relative;
  flex: 1;
  height: 28px;
  display: flex;
  align-items: center;
  cursor: pointer;
  touch-action: none;
  border-radius: 999px;
}

.vp-rail {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  overflow: hidden;
  transition: height 0.2s var(--ease-out);
}

.vp-buffer,
.vp-fill {
  position: absolute;
  inset: 0;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: inherit;
}

.vp-buffer {
  background: rgba(255, 255, 255, 0.22);
}

.vp-fill {
  background: linear-gradient(90deg, var(--blue), #5b98ff);
}

.vp-thumb {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(0, 90, 230, 0.35), 0 2px 8px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s var(--ease-out);
  pointer-events: none;
}

.vp-track:hover .vp-rail,
.vp.vp-seeking .vp-rail,
.vp-track:focus-visible .vp-rail {
  height: 6px;
}

.vp-track:hover .vp-thumb,
.vp.vp-seeking .vp-thumb,
.vp-track:focus-visible .vp-thumb {
  transform: translate(-50%, -50%) scale(1);
}

@media (max-width: 560px) {
  .vp-bar {
    left: 8px;
    right: 8px;
    bottom: 8px;
  }

  .vp-time--total,
  .vp-btn[data-vp-full] {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .vp-bar,
  .vp-rail,
  .vp-thumb {
    transition: none;
  }
}