/* § user request: the public landing page ("portal de bienvenida").

   Loaded ONLY by pages/landing.html, never by the authenticated app — the
   marketing page is the one place that needs decorative gradients, a
   pipeline diagram and hero glows, and no signed-in screen should pay for
   that CSS.

   Everything here is built on the existing tokens in tokens.css (--brand,
   --surface-*, --border, the *-rgb tints). No new colour is invented, so
   the landing page reads as the same product as the app behind it, in both
   themes. */

/* ---------------------------------------------------------------- reveal */
/* The hidden-start states for landing.js's animations.

   Scoped under `html[data-anim]`, which ONLY landing.js sets, and only once
   it has confirmed anime.js is present and motion is allowed. That
   direction matters: content is visible by default and hidden by opt-in, so
   no-JS, blocked-CDN and reduced-motion readers all get a plain, complete
   page instead of an invisible one. */
html[data-anim] [data-reveal],
html[data-anim] [data-hero-line],
html[data-anim] [data-hero-visual],
html[data-anim] [data-pipeline-node] {
  opacity: 0;
}

html[data-anim] [data-pipeline-line] {
  transform: scaleX(0);
  transform-origin: left center;
}

/* Belt and braces: even if landing.js somehow armed the states and then
   died, a reduced-motion reader still sees everything. */
@media (prefers-reduced-motion: reduce) {
  html[data-anim] [data-reveal],
  html[data-anim] [data-hero-line],
  html[data-anim] [data-hero-visual],
  html[data-anim] [data-pipeline-node] {
    opacity: 1;
  }
  html[data-anim] [data-pipeline-line] {
    transform: none;
  }
}

/* PRINT — found by actually printing the page, not by reasoning about it.

   Reveal is driven by an IntersectionObserver, so a section only becomes
   visible once it has been scrolled past. Printing never scrolls: the
   browser lays the whole document out at once, every section below the
   fold is still at opacity 0, and the printout came out almost entirely
   blank. Same for any "save as PDF" or full-page capture.

   Forcing the end state here costs nothing on screen and makes the printed
   page complete. */
@media print {
  html[data-anim] [data-reveal],
  html[data-anim] [data-hero-line],
  html[data-anim] [data-hero-visual],
  html[data-anim] [data-pipeline-node] {
    opacity: 1 !important;
  }
  html[data-anim] [data-pipeline-line] {
    transform: none !important;
  }
}

/* ------------------------------------------------------------ atmosphere */
/* Two soft brand-tinted pools behind the hero. `radial-gradient` rather
   than an image: it costs no request, scales to any viewport, and picks up
   the theme's own brand colour automatically. */
.landing-hero {
  position: relative;
  isolation: isolate;
}

.landing-hero::before {
  content: "";
  position: absolute;
  inset: -20% 0 auto;
  height: 620px;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(46% 52% at 22% 28%, rgb(var(--brand-rgb) / 0.16), transparent 70%),
    radial-gradient(42% 48% at 82% 16%, rgb(var(--purple-rgb) / 0.13), transparent 72%);
}

/* A faint grid, fading out downward, for the "engineering surface" feel the
   reference sites use. Masked so it never competes with the copy. */
.landing-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgb(var(--brand-rgb) / 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgb(var(--brand-rgb) / 0.07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 62%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.7), transparent 62%);
}

/* ---------------------------------------------------------------- pieces */
.landing-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface-1);
  padding: 0.375rem 0.875rem;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

/* Gradient headline accent. -webkit-* first with a plain colour fallback
   above it, so a browser without background-clip:text shows solid brand
   text rather than an invisible headline. */
.landing-gradient-text {
  color: var(--brand-text);
  background: linear-gradient(100deg, var(--brand) 10%, var(--accent-purple) 92%);
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .landing-gradient-text {
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* The pipeline's connecting rail. A 2px line the nodes sit on, drawn by
   landing.js scaling it out from the left. */
.landing-rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 21px;
  height: 2px;
  background: linear-gradient(
    to right,
    rgb(var(--brand-rgb) / 0.15),
    rgb(var(--brand-rgb) / 0.85),
    rgb(var(--brand-rgb) / 0.15)
  );
}

/* Product mockups (the board / work-item illustrations). A card that leans
   very slightly, the way both reference sites present a UI screenshot. */
.landing-mock {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 14px);
  background: var(--surface-1);
  box-shadow: 0 22px 48px -28px rgb(0 0 0 / 0.55);
  overflow: hidden;
}

.landing-mock__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}

.landing-mock__dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--border-strong, var(--border));
}

/* Comparison table: let it scroll on its own below the text column rather
   than forcing the page sideways (§8.7 — the body must never scroll
   horizontally). */
.landing-compare {
  overflow-x: auto;
}

.landing-compare table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.landing-compare th,
.landing-compare td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 12.5px;
  vertical-align: top;
}

.landing-compare thead th {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

/* The product's own column, highlighted the way both reference pages mark
   their recommended plan. */
.landing-compare .is-ours {
  background: rgb(var(--brand-rgb) / 0.07);
}

.landing-compare tbody tr:last-child th,
.landing-compare tbody tr:last-child td {
  border-bottom: 0;
}