/* ============================================================================
   Codespark - liquid glass + split hero
   ----------------------------------------------------------------------------
   Loads after theme-dark.css. Two things live here:

   1. The home hero becomes a split: copy on the left, the code-spark burst
      (js/spark-burst.js) on the right. Below 1024px the burst sits above the
      centred copy as a band.

   2. Liquid glass on the raised surfaces: a translucent body, heavy blur with
      saturation, a bright rim that catches the pointer (--lg-x / --lg-y set by
      js/liquid-glass.js), and an inner depth shadow. Chromium also gets true
      edge refraction from an SVG displacement filter (html.lg-refract).
      Everything degrades to frosted glass where backdrop-filter is missing.
   ========================================================================== */

:root {
  --lg-body: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.018));
  --lg-filter: blur(18px) saturate(180%) brightness(1.06);
  --lg-edge: rgba(255, 255, 255, 0.11);
  --lg-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -22px 34px -28px rgba(255, 255, 255, 0.14),
    0 22px 50px -30px rgba(0, 0, 0, 0.9);
}

/* ---------- Split hero (home only) ---------- */

.hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: 24px;
  align-items: center;
  margin-bottom: 64px;
  text-align: left;
}
.hero-copy .hero-eyebrow { margin: 0 0 30px; justify-content: flex-start; }
.hero:not(.hero-page) .hero-copy .h1 { font-size: clamp(2.9rem, 6.2vw, 5.9rem); margin: 0 0 26px; }
.hero .hero-copy .hero-sub { margin: 0 0 38px; }
.hero-copy .hero-actions { justify-content: flex-start; margin-bottom: 0; }

.hero-spark {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-height: 600px;
  margin-right: -40px;
}
.spark-canvas { display: block; width: 100%; height: 100%; }

@media (max-width: 1024px) {
  .hero-split { grid-template-columns: minmax(0, 1fr); gap: 8px; text-align: center; margin-bottom: 56px; }
  .hero-spark { order: -1; aspect-ratio: auto; height: clamp(230px, 50vw, 380px); margin: -24px 0 0; }
  .hero-copy .hero-eyebrow { justify-content: center; margin-inline: auto; }
  .hero:not(.hero-page) .hero-copy .h1 { margin-inline: auto; }
  .hero .hero-copy .hero-sub { margin-inline: auto; }
  .hero-copy .hero-actions { justify-content: center; }
}

/* ---------- Liquid glass ---------- */

.hdr.is-solid,
.hero-eyebrow,
.btn-ghost,
.ob,
.svc,
.ai-card,
.work-card,
.subservice,
.ai-offer,
.rail-next,
.mega {
  --lg-x: 30%;
  --lg-y: 0%;
  background: var(--lg-body), rgba(17, 17, 19, 0.42);
  border-color: var(--lg-edge);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-shadow);
}
.hdr.is-solid { background: var(--lg-body), rgba(10, 10, 11, 0.55); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08); }
.mega { background: var(--lg-body), rgba(14, 14, 16, 0.78); }
.ai-offer {
  background:
    radial-gradient(ellipse 60% 120% at 100% 50%, rgba(242, 101, 34, 0.12), transparent 70%),
    var(--lg-body), rgba(17, 17, 19, 0.5);
}
.btn-ghost:hover { background: var(--lg-body), rgba(255, 255, 255, 0.08); }

/* the rim: a 1px ring lit from the top-left and by the pointer */
.hero-eyebrow, .btn-ghost, .svc, .ai-card, .work-card, .subservice, .ai-offer, .rail-next { position: relative; }
.hdr.is-solid::before,
.hero-eyebrow::before,
.btn-ghost::before,
.ob::before,
.svc::before,
.ai-card::before,
.work-card::before,
.subservice::before,
.ai-offer::before,
.rail-next::before,
.mega::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background:
    radial-gradient(220px circle at var(--lg-x) var(--lg-y), rgba(255, 255, 255, 0.6), transparent 62%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0) 34%,
      rgba(255, 255, 255, 0) 66%, rgba(255, 255, 255, 0.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
  z-index: 1;
}
.hdr.is-solid::before { padding: 0 0 1px; }

/* true refraction at the edges, Chromium only (set by liquid-glass.js) */
html.lg-refract .hdr.is-solid,
html.lg-refract .hero-eyebrow,
html.lg-refract .btn-ghost,
html.lg-refract .ob,
html.lg-refract .ai-offer {
  -webkit-backdrop-filter: url(#lg-refract) var(--lg-filter);
  backdrop-filter: url(#lg-refract) var(--lg-filter);
}

@media (prefers-reduced-transparency: reduce) {
  .hdr.is-solid, .hero-eyebrow, .btn-ghost, .ob, .svc, .ai-card, .work-card,
  .subservice, .ai-offer, .rail-next, .mega {
    background: #131315;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (max-width: 780px) {
  /* the eyebrow drops its pill on phones (theme-dark); drop the rim with it */
  .hero-eyebrow { background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .hero-eyebrow::before { display: none; }
}

/* in the narrower copy column the eyebrow stacks: company over regions */
@media (min-width: 781px) {
  .hero-copy .hero-eyebrow { flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 18px; border-radius: 14px; }
  .hero-copy .hero-eyebrow > span + span { padding-left: 13px; border-left: 0; }
}

/* ---------- Viewfinder around the spark (js/hero-hud.js) ----------
   Camera-frame corners and four labels, each one live or true: our zone, a
   ticking IST clock, the office's coordinates, and the visitor's own time. */

.hero-spark::before {
  /* low cinematic glow behind the burst, in the logo orange */
  content: "";
  position: absolute;
  inset: 8%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(242, 101, 34, 0.14), transparent 75%);
  pointer-events: none;
}
.vf {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid rgba(255, 255, 255, 0.4);
  pointer-events: none;
}
.vf-tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.vf-tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.vf-bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.vf-br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

.hud {
  position: absolute;
  font-family: var(--f-mono);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.hud-tl { top: 2px; left: 28px; }
.hud-bl { bottom: 2px; left: 28px; }
.hud-br { bottom: 2px; right: 28px; }
.hud-tr { top: -6px; right: 28px; }

/* the ticking clock: kinetic type, colons blink once a second */
.hud-clock {
  font-family: var(--f-display);
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-transform: none;
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}
.hud-clock i { font-style: normal; color: var(--accent); animation: hud-blink 1s steps(1) infinite; }
.hud-clock sup {
  font-family: var(--f-mono);
  font-size: 0.42em;
  letter-spacing: 0.1em;
  color: var(--accent-ink);
  margin-left: 4px;
  vertical-align: 1.1em;
}
@keyframes hud-blink { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .hud-clock i { animation: none; } }

@media (max-width: 1024px) {
  .hero-spark { margin-top: 0; }
}
@media (max-width: 520px) {
  .hud-bl, .hud-tl { display: none; }
  .hud-br { right: 24px; }
  .hud-clock { font-size: 1.15rem; }
}