/* Asturlab AI — production site. Single dark visual world by design. */

:root {
  --ground: #000000;
  --panel: #0b0908;
  --panel-edge: #221c15;
  --ink: #f2ede6;
  --ink-quiet: #9a938a;
  --ink-faint: #8a827a;
  --copper: #b87333;
  --gold: #d9a05b;
  --rule: #1d1813;
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Consolas", monospace;
  --bar-top-h: 64px;
  --bar-bottom-h: 36px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--ground); scroll-behavior: smooth; scroll-padding-top: var(--bar-top-h); }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: transparent;
}

/* star field, fixed behind everything.
   Drawn on a canvas (site.js) so positions are truly random: the old version
   was two small repeating CSS tiles and the grid pattern showed. */
.sky { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.sky .star-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* shooting stars */
.sky .shooting {
  position: absolute;
  width: 130px; height: 1px;
  background: linear-gradient(to left, rgba(242, 237, 230, 0.9), rgba(217, 160, 91, 0.4) 40%, transparent 100%);
  border-radius: 999px;
  transform: rotate(var(--angle)) translateX(0);
  opacity: 0;
  animation: shoot var(--dur) linear infinite;
  animation-delay: var(--delay);
}
@keyframes shoot {
  0%   { opacity: 0; transform: rotate(var(--angle)) translateX(0); }
  2%   { opacity: 0.9; }
  8%   { opacity: 0; transform: rotate(var(--angle)) translateX(-52vw); }
  100% { opacity: 0; transform: rotate(var(--angle)) translateX(-52vw); }
}
.sky .shooting:nth-child(3) { top: 14%; left: 78%; --angle: 16deg;  --dur: 9s;  --delay: 2s; }
.sky .shooting:nth-child(4) { top: 8%;  left: 38%; --angle: 24deg;  --dur: 13s; --delay: 7.5s; }
.sky .shooting:nth-child(5) { top: 46%; left: 92%; --angle: 12deg;  --dur: 17s; --delay: 12s; }

/* ---------- bars ---------- */
.bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 3vw, 2.5rem);
  flex: none; z-index: 5; background: var(--ground);
}
.bar-top {
  height: var(--bar-top-h); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 30;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
}
.bar-top .brand { justify-self: start; }
.bar-top .bar-nav { justify-self: center; }
.bar-top > .navbtn-solid { justify-self: end; }
.bar-bottom {
  height: var(--bar-bottom-h); border-top: 1px solid var(--rule);
  font-size: 0.7rem; color: var(--ink-faint); letter-spacing: 0.05em;
}
.mono { font-family: var(--font-mono); }
.dim { color: var(--ink-faint); }

.brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; }
.brand-mark { height: 22px; width: auto; display: block; transition: transform 500ms var(--ease-out); }
.brand:hover .brand-mark { transform: rotate(-12deg); }
.brand-name {
  font-family: var(--font-display); font-weight: 700; font-stretch: 92%;
  font-size: 1.02rem; letter-spacing: 0.06em; color: var(--ink);
}
.brand:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.bar-nav { display: flex; gap: 1.6rem; }
.navbtn {
  position: relative;
  display: inline-flex; align-items: center; text-decoration: none;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-quiet); background: transparent;
  border: 0; padding: 0.3rem 0; cursor: pointer;
  transition: color 250ms var(--ease-out);
}
.navbtn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform 300ms var(--ease-out);
}
.navbtn:hover { color: var(--ink); }
.navbtn:hover::after { transform: scaleX(1); }
.navbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.navbtn.is-active { color: var(--gold); }
.navbtn.is-active::after { transform: scaleX(1); }
.navbtn-solid { color: var(--gold); }
.navbtn-solid:hover { color: var(--ink); }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; background: transparent;
  height: calc(100svh - var(--bar-top-h));
  min-height: 540px;
}

.glow {
  position: absolute; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(184, 115, 51, 0.07) 0%, transparent 62%);
  transform: translate(-50%, -50%); left: 50%; top: 40%;
  pointer-events: none; z-index: 1;
}

.hero-copy {
  position: absolute; top: 11%; left: 0; right: 0; z-index: 2;
  text-align: center; padding: 0 1.5rem;
}
.eyebrow {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase; color: var(--copper);
}
.hero-copy h1 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 700; font-stretch: 85%;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.03; letter-spacing: 0.015em;
  text-transform: uppercase;
}
.hero-copy h1 .line { display: block; overflow: hidden; }
.hero-copy h1 .line > span { display: inline-block; }
.sub {
  margin: 1.1rem auto 0; max-width: 34rem;
  color: var(--ink-quiet); font-size: clamp(0.9rem, 1.1vw, 1.02rem); line-height: 1.55;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.35rem;
  text-decoration: none;
  margin-top: 1.7rem;
  font-family: var(--font-body); font-size: 0.95rem; font-weight: 600;
  background: var(--ink); color: var(--ground);
  border: 0; border-radius: 999px; padding: 0.8rem 1.6rem 0.8rem 2rem; cursor: pointer;
  transition: background 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.cta .cta-arrow {
  display: inline-block; opacity: 0; max-width: 0; overflow: hidden;
  transform: translateX(-6px);
  transition: opacity 250ms var(--ease-out), transform 250ms var(--ease-out), max-width 250ms var(--ease-out);
}
.cta:hover { background: var(--gold); }
.cta:hover .cta-arrow { opacity: 1; max-width: 1.2em; transform: translateX(0); }
.cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.cta-inline { margin-top: 1.4rem; font-size: 0.88rem; padding: 0.65rem 1.3rem 0.65rem 1.5rem; }

.textlink {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold);
  border-bottom: 1px solid transparent;
  transition: border-color 250ms var(--ease-out);
}
.textlink:hover { border-bottom-color: var(--gold); }
.textlink:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The film is pinned to the bottom of the hero on every screen: the wrap spans the
   full width and is anchored to the bottom edge, and the video covers that box with
   its own bottom edge aligned, so the globe never floats or leaves a gap whatever
   the aspect ratio. */
.hero-video-wrap {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 58%; min-height: 240px;
  z-index: 0;
}
.hero-video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom;
  /* screen blend drops the video's black background so only the lit earth
     shows over the star field; no need to mask the frame edges anymore */
  mix-blend-mode: screen;
}

/* ---------- load orchestration ---------- */
.reveal, .hero-copy h1 .line > span { transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
body.loading .reveal { opacity: 0; transform: translateY(14px); }
body.loading .hero-copy h1 .line > span { transform: translateY(110%); }
body.loading .reveal-video { opacity: 0; }
.reveal-video { transition: opacity 1200ms var(--ease-out); }
body.loading .reveal-nav { opacity: 0; }
.reveal-nav { transition: opacity 900ms var(--ease-out); }
.r1 { transition-delay: 100ms; } .r2 > span { transition-delay: 200ms; }
.r3 > span { transition-delay: 320ms; } .r4 { transition-delay: 480ms; }
.r5 { transition-delay: 620ms; }
.reveal-video { transition-delay: 500ms; }

/* ---------- action pings around the globe ---------- */
.hero-pings { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.ping {
  position: absolute;
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.6rem;
  background: rgba(11, 9, 8, 0.72);
  border: 1px solid rgba(184, 115, 51, 0.28);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  font-size: 0.78rem; font-weight: 500; color: var(--ink);
  white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(0.96);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.ping.on { opacity: 1; transform: translateY(0) scale(1); }
.ping svg { flex: none; width: 18px; height: 18px; display: block; }
.ping svg circle { stroke: var(--gold); fill: none; }
.ping svg path { stroke: var(--gold); fill: none; }
@media (orientation: portrait), (max-width: 720px) {
  .ping { font-size: 0.66rem; padding: 0.4rem 0.75rem 0.4rem 0.5rem; }
  .ping svg { width: 14px; height: 14px; }
}

/* ---------- scroll sections ---------- */
.section {
  background: transparent;
  padding: clamp(3.5rem, 8vh, 6.5rem) 0;
}
.section-inner {
  width: min(1180px, 100%);
  margin: 0 auto;
  padding: 0 clamp(1.2rem, 4vw, 2.5rem);
}
.section-narrow { width: min(760px, 100%); }
.section-head { margin-bottom: 1.6rem; }

.section-body h2 {
  font-family: var(--font-display); font-weight: 700; font-stretch: 88%;
  font-size: clamp(1.7rem, 3vw, 2.6rem); text-transform: uppercase;
  letter-spacing: 0.02em; line-height: 1.05;
}
.lede { margin-top: 0.5rem; color: var(--gold); font-size: 1.02rem; font-weight: 500; }
.body-copy {
  margin-top: 0.9rem; color: var(--ink-quiet);
  font-size: 0.95rem; line-height: 1.65; max-width: 62ch;
}
.body-copy.quiet { font-size: 0.86rem; color: var(--ink-faint); }

/* section content stagger — revealed on scroll */
.stagger { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.section:not(.in-view) .stagger { opacity: 0; transform: translateY(10px); }
.s1 { transition-delay: 60ms; } .s2 { transition-delay: 120ms; }
.s3 { transition-delay: 180ms; } .s4 { transition-delay: 240ms; }
.s5 { transition-delay: 300ms; } .s6 { transition-delay: 360ms; }

/* products layout */
.products-body {
  display: grid; grid-template-columns: minmax(280px, 5fr) 7fr;
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
.chips { list-style: none; margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.chips li {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.04em;
  color: var(--ink-quiet); border: 1px solid var(--panel-edge);
  border-radius: 999px; padding: 0.35rem 0.75rem; white-space: nowrap;
  transition: border-color 250ms var(--ease-out), color 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.chips li:hover { border-color: var(--copper); color: var(--gold); transform: translateY(-2px); }

/* approach layout */
.approach-body {
  display: grid; grid-template-columns: minmax(300px, 5fr) 7fr;
  gap: clamp(1.2rem, 3vw, 2.4rem); align-items: start;
}
.approach-cta { grid-column: 1 / -1; }

.tenets { list-style: none; display: flex; flex-direction: column; }
.tenet {
  display: flex; gap: 1.1rem; align-items: baseline;
  padding: 1rem 0.6rem; border-bottom: 1px solid var(--rule);
  border-radius: 3px;
  transition: background 250ms var(--ease-out), transform 250ms var(--ease-out);
}
.tenet:first-child { padding-top: 0.2rem; }
.tenet:hover { background: rgba(184, 115, 51, 0.05); transform: translateX(4px); }
.tenet-n { flex: none; font-size: 0.72rem; color: var(--copper); letter-spacing: 0.1em; }
.tenet h3 {
  font-family: var(--font-display); font-weight: 600; font-stretch: 92%;
  font-size: 1.02rem; letter-spacing: 0.01em;
}
.tenet p { margin-top: 0.35rem; color: var(--ink-quiet); font-size: 0.88rem; line-height: 1.6; max-width: 56ch; }

/* company facts */
.facts { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.55rem; }
.facts div { display: flex; gap: 1rem; align-items: baseline; }
.facts dt {
  flex: none; width: 6.5rem;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper);
}
.facts dd { font-size: 0.92rem; color: var(--ink); }

/* contact form */
#contact-form { margin-top: 1.4rem; display: flex; flex-direction: column; gap: 0.95rem; }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field label {
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--copper);
  transition: color 250ms var(--ease-out);
}
.field:focus-within label { color: var(--gold); }
.field input, .field textarea {
  background: var(--ground); border: 1px solid #6b6258; border-radius: 3px;
  color: var(--ink); font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.65rem 0.8rem; resize: vertical;
  transition: border-color 250ms var(--ease-out);
}
.field input:hover, .field textarea:hover { border-color: var(--ink-faint); }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--copper); }
.form-note { font-size: 0.78rem; color: var(--ink-faint); line-height: 1.5; }
.form-status {
  margin-top: 0.4rem; padding: 0.9rem 1rem;
  border: 1px solid var(--copper); border-radius: 4px;
  background: rgba(184, 115, 51, 0.06);
}
.form-status[hidden] { display: none; }
.form-status .form-note { color: var(--ink-quiet); }
.form-status .cta { margin-top: 0.8rem; }
.mail { color: var(--gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 250ms var(--ease-out); }
.mail:hover { border-bottom-color: var(--gold); }
.mail:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ---------- ticker ---------- */
.ticker { min-width: 22ch; text-align: right; }
.ticker .cursor { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* Lx is a product name, never uppercased */
#products-title { text-transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .products-body, .approach-body { grid-template-columns: 1fr; }
  /* keep the Lx film right under the Lx name + lede on one column */
  .products-body .product-intro { display: contents; }
  .products-body .product-intro .s1 { order: 1; }
  .products-body .product-intro .s2 { order: 2; }
  .products-body > .idea-video { order: 3; }
  .products-body .product-intro .s3 { order: 4; }
  .products-body .product-intro .s4 { order: 5; }
  .products-body .product-intro .s5 { order: 6; }
  .products-body .product-intro .s6 { order: 7; }
}
@media (orientation: portrait), (max-width: 720px) {
  :root { --bar-top-h: 56px; }
  .hero-video-wrap { height: 52%; }
  .hero-copy { top: 8%; }
  .bar-nav { gap: 1rem; }
  .navbtn { font-size: 0.62rem; letter-spacing: 0.1em; }
  .brand-name { display: none; }
  .bar-bottom .mono { display: none; }
  /* pings live in the bottom band of the hero so they never cover the copy or CTA */
  .hero-pings { top: auto; bottom: 0; height: 42%; }
}

/* ---------- idea videos (products + approach) ---------- */
.idea-video { min-width: 0; }
.idea-video video {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--panel-edge); border-radius: 6px;
  background: #000000;
}
.idea-video figcaption {
  margin-top: 0.6rem; font-size: 0.8rem; color: var(--ink-quiet);
}
/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  body.loading .reveal, body.loading .hero-copy h1 .line > span,
  body.loading .reveal-video, body.loading .reveal-nav { opacity: 1; transform: none; }
  .section:not(.in-view) .stagger { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}