/* ==========================================================================
   WebTech — styles.css
   Poster. Dark-first, one light break. One accent. Huge type, huge whitespace.
   ========================================================================== */

:root {
  --ink: #0a0a0c;          /* canvas */
  --paper: #f5f5f2;        /* single light break */
  --accent: #c6ff00;       /* acid yellow-green; ~19:1 on ink */
  --accent-dim: #d8ff3e;

  --on-ink: #f2f2f0;       /* primary text on ink */
  --on-ink-mute: #8a8a90;  /* mono labels on ink (>= AA) */
  --on-paper: #0a0a0c;
  --on-paper-mute: #6b6b66;

  --hair: rgba(255, 255, 255, 0.12);
  --hair-ink: rgba(10, 10, 12, 0.14);

  --display: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --pad: clamp(1.25rem, 5vw, 5rem);
  --sec-pad-y: clamp(4.5rem, 13vh, 11rem);
  /* Fixed-header height: tallest header line box (nav links) + its top/bottom
     padding. Used to balance the hero text block below the header. */
  --head-h: calc(1.9rem + 2 * clamp(1rem, 2.5vw, 1.6rem));

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--display);
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

h1,
h2 {
  margin: 0;
  font-weight: 900;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: var(--accent);
  color: var(--ink);
}

/* --- Accessibility --------------------------------------------------------- */
.skip-link {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 300;
  background: var(--accent);
  color: var(--ink);
  padding: 0.6rem 1rem;
  font-family: var(--mono);
  font-size: 0.8rem;
  border-radius: 4px;
  transition: top 0.2s var(--ease);
}
.skip-link:focus {
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* --- Shared type ----------------------------------------------------------- */
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: clamp(0.68rem, 1.4vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

.label-ink {
  color: var(--on-paper-mute);
}

.display {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  /* Floor sized so the longest stacked line ("the agent") fits without clipping
     at 320px; 12vw drives the full poster scale on larger screens. */
  font-size: clamp(44px, 12vw, 200px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  text-transform: none;
}

.line {
  display: block;
  overflow: hidden;
  /* Enlarge the clip window past the tight 0.9 line box so ascenders,
     the apostrophe and descenders (g, y, p, j) render fully. The negative
     margins cancel the added padding exactly, so the visual leading and the
     block geometry stay identical. */
  padding-top: 0.14em;
  padding-bottom: 0.22em;
  margin-top: -0.12em;
  margin-bottom: -0.2em;
}
.line-in {
  display: block;
  white-space: nowrap; /* each stacked line is one unit, never rewraps */
  will-change: transform;
}
/* Accent highlighter behind a single word */
.hl {
  background: var(--accent);
  color: var(--ink);
  padding: 0.04em 0.12em 0.1em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* --- Header ---------------------------------------------------------------- */
.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.5vw, 1.6rem) var(--pad);
  /* solid ink bar so content never shows through / collides with the logo while
     scrolling; sits above all page content. Hairline is hidden at the top of
     the page and fades in once scrolled. */
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}
.head.is-scrolled {
  border-bottom-color: var(--hair);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
  color: #fff;
  line-height: 1;
}
.wordmark-accent {
  color: var(--accent);
}
.wordmark-sq {
  width: 0.42em;
  height: 0.42em;
  margin-left: 0.28em;
  background: var(--accent);
  display: inline-block;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.4rem);
}
.nav a {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  padding-block: 0.3rem;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.nav a:hover::after,
.nav a:focus-visible::after {
  width: 100%;
}
.nav-book {
  color: var(--accent) !important;
}

/* Hamburger toggle — hidden on desktop, shown in the mobile breakpoint below */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  margin-right: -0.5rem; /* optical: align the bars to the padding edge */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  margin-inline: auto;
  background: #fff;
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child {
  transform: translateY(3.5px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --- Mobile: collapse the nav into a tap-to-open dropdown (JS only, so the
   no-JS fallback keeps the nav links inline and reachable) ------------------- */
@media (max-width: 640px) {
  .js .nav-toggle {
    display: flex;
  }
  .js .nav {
    position: fixed;
    top: var(--head-h);
    left: 0;
    right: 0;
    z-index: 190;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.25rem var(--pad) 1.25rem;
    background: var(--ink);
    border-bottom: 1px solid var(--hair);
    /* closed state */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    pointer-events: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease),
      visibility 0.3s var(--ease);
  }
  .js .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
  }
  .js .nav a {
    padding-block: 0.95rem;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--hair);
  }
  .js .nav a:last-child {
    border-bottom: 0;
  }
  /* full underline reveal reads oddly as a block row; drop it on mobile */
  .js .nav a::after {
    display: none;
  }
}

/* --- Section rhythm -------------------------------------------------------- */
.sec {
  padding: var(--sec-pad-y) var(--pad);
  border-top: 1px solid var(--hair);
  position: relative;
}
.hero {
  border-top: 0;
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column; /* mobile: single column */
  justify-content: safe center;
  isolation: isolate;
  /* Top padding = bottom padding + header height, so the text block centres in
     the region below the fixed header (balanced space above headline / below CTA). */
  padding-top: calc(var(--sec-pad-y) + var(--head-h));
}
.hero-copy {
  display: flex;
  flex-direction: column;
  container-type: inline-size; /* lets the headline size to its own column */
}
.hero-visual {
  display: none; /* only shown in the 50/50 desktop layout */
}
/* True 50/50 split from 900px up: text fills the left half within the section
   padding; the visual is absolutely positioned over the entire right half of
   the viewport and bleeds to the right edge (no right padding, no dead gap). */
@media (min-width: 900px) {
  .hero {
    flex-direction: row;
    align-items: safe center; /* centre when it fits, top-align when tall (never clip) */
    justify-content: flex-start;
    padding-right: 0; /* let the visual reach the viewport's right edge */
  }
  .hero-copy {
    order: 0; /* text on the left half */
    flex: 0 0 auto;
    /* End the text column just shy of the viewport centre so the headline never
       reaches the visual half. 50vw minus the left pad and a small gutter. */
    width: calc(50vw - var(--pad) - clamp(1rem, 2vw, 2rem));
    min-width: 0;
    position: relative;
    z-index: 1;
  }
  .hero-visual {
    order: 1;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%; /* horizontal centre of the viewport */
    right: 0; /* bleed to the right edge */
    z-index: 0;
    pointer-events: none; /* only the logo nodes opt back in */
  }
}
.hero .label {
  margin-bottom: clamp(1rem, 2.5vh, 1.75rem);
}
.hero .display {
  /* Height-aware AND width-aware: the min() of a column-width term (cqi) and a
     viewport-height term (svh). The height term prevents the three stacked
     lines from exceeding the viewport on wide-but-short laptops; the width term
     keeps the longest line inside the text column. Tuned against the matrix. */
  font-size: clamp(40px, min(15cqi, 13svh), 120px);
  /* space to the lede in the tightened three-element stack */
  margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem);
}
.lede {
  font-size: clamp(1.05rem, 2.2vw, 1.5rem);
  font-weight: 400;
  max-width: 32ch;
  color: var(--on-ink);
  /* space to the CTA */
  margin-bottom: clamp(1.75rem, 4vh, 2.75rem);
}
.hero-foot {
  margin-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* The gravity well: demand orbits the agents. One canvas (dust, core, streams,
   pulses) fills the right-half box; DOM logo nodes sit on top. The whole
   .hero-visual is hidden below 900px, so the well is desktop-only. */
.well {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden; /* nothing ever bleeds past the right-half box */
}
.well-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0; /* revealed once the live loop takes over */
  transition: opacity 0.6s var(--ease);
}
.well-live .well-canvas {
  opacity: 1;
}

/* Static frame (no-JS / reduced motion): a real circular core + fixed streams.
   Hidden the moment the canvas goes live. */
.well-core-static {
  position: absolute;
  left: 75%;
  top: 50%;
  width: clamp(240px, 26vw, 360px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.well-core-static span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(198, 255, 0, 0.5);
  box-shadow: 0 0 60px rgba(198, 255, 0, 0.12);
}
.well-core-static span:last-child {
  inset: 9%;
  border-color: rgba(198, 255, 0, 0.28);
  box-shadow: none;
}
.well-static {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: rgba(198, 255, 0, 0.16);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.well-live .well-static,
.well-live .well-core-static {
  display: none;
}

/* Logo nodes: agents orbit, ad platforms drift. Sized 56-72px via --sz. */
.well-node {
  position: absolute;
  z-index: 2;
  width: var(--sz, 64px);
  height: var(--sz, 64px);
  border-radius: 50%;
  background: rgba(18, 18, 22, 0.92);
  border: 1px solid var(--hair);
  display: grid;
  place-items: center;
  transform: translate(-50%, -50%);
  transform-origin: center;
  color: var(--on-ink-mute);
  pointer-events: auto; /* opt back in for hover, over the non-interactive well */
  will-change: transform;
  transition: color 0.3s var(--ease);
}
.well-node:hover {
  color: var(--on-ink);
}
.node-logo {
  width: calc(var(--sz, 64px) * 0.46);
  height: calc(var(--sz, 64px) * 0.46);
  fill: currentColor;
}
.node-ring {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 14px rgba(198, 255, 0, 0.55);
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* --- CTA link -------------------------------------------------------------- */
.cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--mono);
  font-size: clamp(0.95rem, 1.8vw, 1.15rem);
  letter-spacing: 0.02em;
  color: var(--accent);
  padding-bottom: 0.35rem;
  position: relative;
}
.cta::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.cta:hover::after,
.cta:focus-visible::after {
  transform: scaleX(0);
  transform-origin: right;
}
.cta .arrow {
  transition: transform 0.35s var(--ease);
}
.cta:hover .arrow,
.cta:focus-visible .arrow {
  transform: translateX(0.4em);
}

/* --- Numbers --------------------------------------------------------------- */
.numbers .label {
  margin-bottom: clamp(2.5rem, 7vh, 4.5rem);
}
.stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.25rem, 5vw, 3.5rem);
}
.stat {
  padding-top: 0.25rem;
}
.stat-num {
  display: block;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  /* sized so the widest number ("$10M+") fits inside a quarter-row column
     at laptop widths, instead of overflowing into the next column */
  font-size: clamp(2.5rem, 5.5vw, 6rem);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--on-ink);
  font-variant-numeric: tabular-nums;
}
.stat-cap {
  display: block;
  margin: 0.75rem 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
}

@media (min-width: 720px) {
  .stats {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
  /* vertical hairline between each of the four numbers */
  .stat {
    padding-left: clamp(1.25rem, 3vw, 2.75rem);
  }
  .stat:first-child {
    padding-left: 0;
  }
  .stat:not(:first-child) {
    border-left: 1px solid var(--hair);
  }
}

/* Ad platform logos (monochrome, so the one-accent palette is preserved) */
.platforms {
  margin-top: clamp(2.75rem, 7vh, 4.5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hair);
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
/* letter-mark fallback for a brand with no clean monochrome SVG */
.plogo-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  font-size: 34px;
  line-height: 1;
}
.platforms-label {
  color: var(--on-ink-mute);
}
.platform-logos {
  /* mobile: two equal columns grouped and centred, so the midpoint between the
     columns falls exactly on the page centre (section padding is symmetric). */
  display: grid;
  grid-template-columns: repeat(2, 8rem);
  justify-content: center;
  justify-items: center;
  align-items: start;
  column-gap: clamp(0.75rem, 4vw, 1.5rem);
  row-gap: clamp(1.75rem, 6vw, 2.75rem);
}
/* Two tidy rows of five on wider screens; 5 fits cleanly from 700px up */
@media (min-width: 700px) {
  .platform-logos {
    grid-template-columns: repeat(5, 1fr);
    justify-content: normal;
    column-gap: clamp(0.75rem, 2vw, 1.5rem);
    row-gap: clamp(1.75rem, 4vw, 2.75rem);
  }
}
.platform {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.75rem;
  color: var(--on-ink-mute);
  transition: color 0.3s var(--ease);
}
.platform:hover {
  color: var(--on-ink);
}
.plogo {
  /* uniform icon box: every logo gets the same fixed-height footprint and its
     inline SVG contains + centres via the default preserveAspectRatio, so wide
     marks fill the width and tall marks do not dominate. */
  width: 44px;
  height: 44px;
  fill: currentColor;
  flex: none;
}
@media (min-width: 700px) {
  .plogo {
    width: 56px;
    height: 56px;
  }
}
.plogo-klaviyo {
  /* solid filled mark reads heavier than the outline logos; trim optical weight */
  transform: scale(0.85);
}
.platform span {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* --- Services (light break) ------------------------------------------------ */
.services {
  background: var(--paper);
  color: var(--on-paper);
  border-top: 0;
}
.services .label {
  margin-bottom: clamp(2rem, 6vh, 3.5rem);
}
.index {
  border-top: 1px solid var(--hair-ink);
}
.row {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "idx name"
    "idx desc";
  column-gap: clamp(1rem, 4vw, 3rem);
  row-gap: 0.5rem;
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem) 0;
  border-bottom: 1px solid var(--hair-ink);
  transition: padding-left 0.4s var(--ease);
}
.row:hover {
  padding-left: clamp(0.5rem, 2vw, 1.5rem);
}
.row-idx {
  grid-area: idx;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--accent-dim);
  padding-top: 0.65em;
  /* accent used only as a small highlight on paper: darken for contrast */
  -webkit-text-stroke: 0.4px var(--on-paper);
  color: #5f7a00;
}
.row-name {
  grid-area: name;
  font-family: var(--display);
  font-stretch: 125%;
  font-weight: 900;
  /* floor low enough that the longest word ("measurement.") fits at 320px */
  font-size: clamp(1.6rem, 6.5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--on-paper);
  overflow-wrap: break-word;
}
.row-desc {
  grid-area: desc;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: var(--on-paper-mute);
  max-width: 40ch;
}
.foot-note {
  margin-top: clamp(1.75rem, 4vw, 2.75rem);
  color: var(--on-paper-mute);
}

/* --- Marquee --------------------------------------------------------------- */
.marquee {
  overflow: hidden;
  white-space: nowrap;
  border-block: 1px solid var(--hair);
  padding-block: clamp(1.1rem, 3vw, 1.9rem);
}
.marquee-track {
  display: inline-flex;
  will-change: transform;
  animation: marquee 26s linear infinite;
}
.marquee-track span {
  font-family: var(--mono);
  font-size: clamp(1rem, 2.6vw, 1.7rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  padding-right: 0.2em;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

/* --- The firm -------------------------------------------------------------- */
.firm .label {
  margin-bottom: clamp(1.75rem, 5vh, 3rem);
}
.firm-line {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.5rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 28ch;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.firm-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
}
.firm-links a {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--on-ink-mute);
  position: relative;
  padding-bottom: 0.3rem;
}
.firm-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: var(--accent);
  transition: width 0.4s var(--ease);
}
.firm-links a:hover,
.firm-links a:focus-visible {
  color: var(--on-ink);
}
.firm-links a:hover::after,
.firm-links a:focus-visible::after {
  width: 100%;
}

/* --- Contact --------------------------------------------------------------- */
.contact {
  min-height: 82vh;
  min-height: 82svh;
  display: flex;
  flex-direction: column;
  justify-content: safe center;
}
.contact .display {
  /* same height-aware logic as the hero so it never clips on short screens */
  font-size: clamp(40px, min(15vw, 18svh), 190px);
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}
.contact-mail {
  margin-top: clamp(2rem, 6vh, 3.5rem);
}
.mail-link {
  transition: color 0.3s var(--ease);
}
.mail-link:hover,
.mail-link:focus-visible {
  color: var(--accent);
}

/* --- Footer ---------------------------------------------------------------- */
.foot {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(2.5rem, 6vw, 4rem) var(--pad) clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--hair);
}
.foot-brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.foot-brand .wordmark {
  font-size: 1.1rem;
}
.foot-entity {
  color: var(--on-ink-mute);
  line-height: 1.9;
  font-size: 0.72rem;
}
.foot-entity span {
  display: block; /* WEBTECH line on row 1, GSTIN on row 2 */
}
@media (min-width: 720px) {
  .foot {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
  .foot-entity {
    text-align: right;
    max-width: 46ch;
  }
}

/* --- Sticky pill ----------------------------------------------------------- */
.pill {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 250;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.85rem 1.35rem;
  border-radius: 999px;
  opacity: 0;
  transform: translateY(150%);
  pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
}
.pill.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.pill:hover .arrow {
  transform: translateX(0.3em);
}
.pill .arrow {
  transition: transform 0.3s var(--ease);
}

/* --- Reveal (progressive enhancement) -------------------------------------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
/* Headline lines start hidden behind their mask only when JS is active */
.js [data-lines] .line-in {
  transform: translateY(130%);
}
.js [data-lines].is-in .line-in {
  transform: translateY(0);
  transition: transform 1s var(--ease);
}
.js [data-lines].is-in .line:nth-child(2) .line-in {
  transition-delay: 0.08s;
}
.js [data-lines].is-in .line:nth-child(3) .line-in {
  transition-delay: 0.16s;
}

/* --- Reduced motion / no motion: show everything, kill movement ------------ */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .marquee-track {
    animation: none;
    transform: none;
  }
  .js [data-reveal],
  .js [data-lines] .line-in {
    opacity: 1 !important;
    transform: none !important;
  }
  .pill {
    transition: none;
  }
}