/* Zilas Cent — urgentdelivery.xyz
   Faro/Volt system. One accent per composition: volt everywhere,
   ice only inside .crosslink, --alert only on the multa line. */

@import url("tokens.css");

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

html { scroll-behavior: smooth; }

body {
  background: var(--night);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--volt-light); }

.wrap {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 var(--s-6);
}

/* ---------- floating capsule nav ---------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: var(--s-4) var(--s-4) 0;
  pointer-events: none;
  transform: translateY(0);
  transition: transform 350ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

.nav.hidden { transform: translateY(-110%); }

.nav-capsule {
  pointer-events: auto;
  max-width: 64rem;
  margin: 0 auto;
  height: 58px;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: 0 var(--s-3) 0 var(--s-4);
  border-radius: 16px;
  background: rgba(5, 8, 12, 0.92);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(132, 255, 0, 0.06);
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--ink);
  flex-shrink: 0;
}

.nav-brand img { width: 34px; height: 34px; }

.nav-brand span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: var(--s-1);
  margin: 0 auto;
}

.nav-links a {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(242, 247, 236, 0.55);
  text-decoration: none;
  padding: var(--s-2) var(--s-3);
  border-radius: 10px;
  transition: color var(--speed) ease, background var(--speed) ease;
}

.nav-links a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }

.nav-cta {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--night);
  background: linear-gradient(100deg, var(--volt), var(--volt-light));
  border-radius: 11px;
  padding: var(--s-2) var(--s-4);
  transition: box-shadow var(--speed) ease, transform var(--speed) ease;
}

.nav-cta:hover { box-shadow: 0 0 20px rgba(132, 255, 0, 0.45); transform: scale(1.02); }
.nav-cta:active { transform: scale(0.98); }

.nav-burger {
  display: none;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: rgba(242, 247, 236, 0.7);
  cursor: pointer;
}

.nav-burger:hover { color: var(--ink); background: rgba(255, 255, 255, 0.08); }

/* fullscreen mobile menu — solid night, no blur (Safari jank) */
.nav-menu {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--night);
  display: none;
  flex-direction: column;
  padding: var(--s-6);
}

.nav-menu.open { display: flex; }

.nav-close {
  align-self: flex-end;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
}

.nav-menu-links {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin: auto 0;
}

.nav-menu-links a {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-decoration: none;
  padding: var(--s-4);
  border-radius: 12px;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 250ms ease, transform 250ms ease;
}

.nav-menu.open .nav-menu-links a { opacity: 1; transform: none; }
.nav-menu.open .nav-menu-links a:nth-child(1) { transition-delay: 50ms; }
.nav-menu.open .nav-menu-links a:nth-child(2) { transition-delay: 100ms; }
.nav-menu.open .nav-menu-links a:nth-child(3) { transition-delay: 150ms; }

.nav-menu-links a:active { background: rgba(255, 255, 255, 0.06); }

.nav-menu-cta {
  text-align: center;
  font-size: 1.25rem;
  padding: var(--s-4);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: var(--s-6);
  border-radius: 12px;
}

@media (max-width: 720px) {
  .nav-links, .nav .nav-cta { display: none; }
  .nav-burger { display: flex; }
  .nav-menu .nav-cta { display: block; }
}

/* ---------- hero: scroll-driven ignition ---------- */

/* Tall stage; the viewport-sized sticky frame inside it is what you see.
   Scrolling the stage scrubs the video (js/hero.js). Non-scrub fallbacks
   collapse the stage to one viewport and let the video loop. */

.hero-stage { height: 300vh; }

.hero-stage.no-scrub { height: auto; }

.hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.no-scrub .hero-sticky { position: relative; }

/* footage — mirrored so the headlight sits right, beaming toward the text */
.hero-video,
.hero-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scaleX(-1) scale(calc(1.1 - var(--p, 1) * 0.1));
  z-index: 0;
}

/* scrim keeps the left text column readable over the lit frames */
.hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(5, 8, 12, 0.92) 0%, rgba(5, 8, 12, 0.72) 38%, rgba(5, 8, 12, 0.25) 100%),
    linear-gradient(to top, var(--night) 0%, transparent 22%),
    linear-gradient(to bottom, rgba(5, 8, 12, 0.6) 0%, transparent 18%);
  pointer-events: none;
}

.hero-content { position: relative; z-index: 2; width: 100%; }

.hero-content h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-hero);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  max-width: 14ch;
}

/* ignition states — driven by scroll progress via .stage-* on the section */
.hero-content h1 .lit {
  color: var(--ink-dim);
  transition: color 80ms steps(1, end), text-shadow 200ms ease;
}

.stage-flicker .hero-content h1 .lit { animation: flicker-loop 340ms steps(1, end) infinite; }

.stage-lit .hero-content h1 .lit {
  color: var(--volt);
  text-shadow: 0 0 28px rgba(132, 255, 0, 0.35);
  animation: none;
}

@keyframes flicker-loop {
  0%, 100% { color: var(--ink-dim); }
  30%, 55% { color: var(--volt); }
  60% { color: var(--ink-dim); }
  80% { color: var(--volt-light); }
}

/* CTAs + detail lines arrive with the beam */
.hero-content .zone-line,
.hero-content .cta-row,
.hero-content .en-line {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.stage-lit .hero-content .zone-line,
.stage-lit .hero-content .cta-row,
.stage-lit .hero-content .en-line,
.no-scrub .hero-content .zone-line,
.no-scrub .hero-content .cta-row,
.no-scrub .hero-content .en-line {
  opacity: 1;
  transform: none;
}

.stage-lit .btn-volt { box-shadow: 0 0 34px rgba(132, 255, 0, 0.45); }

/* reduced-motion still, or video that never started: headline simply lit */
.no-scrub.video-dead .hero-content h1 .lit,
.no-scrub:has(.hero-still) .hero-content h1 .lit {
  color: var(--volt);
  text-shadow: 0 0 28px rgba(132, 255, 0, 0.35);
}

.hero-content .promise {
  margin-top: var(--s-6);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-lead);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.hero-content .zone-line {
  margin-top: var(--s-3);
  color: var(--ink-dim);
  max-width: var(--measure);
}

.hero-content .cta-row {
  margin-top: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
}

.hero-content .en-line {
  margin-top: var(--s-4);
  font-size: var(--text-small);
  color: var(--ink-dim);
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: var(--s-6);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
  transition: opacity 300ms ease;
}

.scroll-hint span {
  width: 8px; height: 8px;
  border-right: 2px solid var(--volt);
  border-bottom: 2px solid var(--volt);
  transform: rotate(45deg) translateY(-2px);
  animation: hint-bob 1.4s ease-in-out infinite;
}

@keyframes hint-bob { 50% { transform: rotate(45deg) translate(3px, 1px); } }

.stage-lit .scroll-hint, .no-scrub .scroll-hint { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint span { animation: none; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-radius: var(--radius);
  padding: var(--s-3) var(--s-8);
  transition: transform var(--speed) ease, background var(--speed) ease;
  cursor: pointer;
  border: 0;
}

.btn-volt {
  background: var(--volt);
  color: var(--night); /* never white on volt */
}

.btn-volt:hover { background: var(--volt-light); transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--volt);
  border: 1px solid var(--line);
}

.btn-ghost:hover { border-color: var(--volt); }

.btn:focus-visible,
select:focus-visible,
a:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
}

/* ---------- sections ---------- */

section { padding: var(--s-16) 0; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--volt);
  margin-bottom: var(--s-2);
}

h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-h2);
  text-transform: uppercase;
  line-height: 1.05;
  margin-bottom: var(--s-6);
}

/* ---------- finder ---------- */

.finder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  max-width: 44rem;
}

.finder-grid label {
  display: block;
  font-size: var(--text-small);
  color: var(--ink-dim);
  margin-bottom: var(--s-1);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.finder-grid select {
  width: 100%;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-3);
  font-family: var(--font-body);
  font-size: 1rem;
  transition: border-color var(--speed) ease;
}

.finder-grid select:hover:not(:disabled) { border-color: var(--volt); }
.finder-grid select:disabled { opacity: 0.4; }

/* the spec plate — parts-counter result card */
.plate {
  margin-top: var(--s-8);
  max-width: 44rem;
  background: var(--panel);
  border: 1px solid var(--volt);
  border-radius: var(--radius-plate);
  padding: var(--s-8);
  display: none;
}

.plate.show { display: block; }

.plate .plate-label {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}

.plate .code {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-plate);
  line-height: 1;
  color: var(--volt);
  letter-spacing: 0.03em;
  margin: var(--s-2) 0 var(--s-1);
}

.plate .beams {
  color: var(--ink-dim);
  font-size: var(--text-small);
  margin-bottom: var(--s-6);
}

.plate .price-line {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-1);
}

.plate .price-line strong { color: var(--volt); font-size: 2.25rem; }

.plate .includes {
  color: var(--ink-dim);
  font-size: var(--text-small);
  margin-bottom: var(--s-6);
}

.plate .confirm-note {
  margin-top: var(--s-4);
  font-size: var(--text-small);
  color: var(--ink-dim);
}

.finder-fallback {
  margin-top: var(--s-6);
  color: var(--ink-dim);
  max-width: var(--measure);
}

.finder-fallback a { color: var(--volt); }

/* ---------- cómo funciona ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  list-style: none;
  counter-reset: step;
}

.steps li {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-6);
  counter-increment: step;
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 2rem;
  color: var(--volt);
  margin-bottom: var(--s-2);
}

.steps h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--s-2);
}

.steps p { color: var(--ink-dim); font-size: var(--text-small); }

.multa {
  margin-top: var(--s-8);
  max-width: var(--measure);
  border-left: 3px solid var(--alert);
  padding-left: var(--s-4);
  color: var(--ink);
}

.multa strong { color: var(--alert); }

/* ---------- zona ---------- */

.zone-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.zone-tags span {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-4);
}

.zone-tags .edge { color: var(--ink-dim); border-style: dashed; }

.hours { color: var(--ink-dim); }

/* ---------- crosslink (ice composition — no volt inside) ---------- */

.crosslink {
  background: #0D2233; /* Faro --night-panel */
  border-radius: var(--radius-plate);
  padding: var(--s-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
}

.crosslink h2 { margin-bottom: var(--s-2); }
.crosslink h2 span { color: var(--ice); }

.crosslink p { color: #8FA8B8; max-width: 46ch; }

.crosslink .btn-ice {
  margin-left: auto;
  background: var(--ice);
  color: var(--night);
}

.crosslink .btn-ice:hover { background: #B8E9FF; }

/* ---------- footer ---------- */

footer {
  padding: var(--s-12) 0 var(--s-16);
  color: var(--ink-dim);
  font-size: var(--text-small);
}

footer .wa { color: var(--volt); font-weight: 500; text-decoration: none; }

/* ---------- reveals + 3D tilt (js/motion.js) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.reveal.shown {
  opacity: 1;
  transform: none;
}

.tilt {
  position: relative;
  transform-style: preserve-3d;
  transition: transform 200ms ease;
  will-change: transform;
}

.tilt-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* tilt transform lives on style="" — keep the reveal transition from fighting it */
.tilt.reveal.shown { transition: transform 200ms ease, opacity 500ms ease; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .finder-grid, .steps { grid-template-columns: 1fr; }
  .crosslink .btn-ice { margin-left: 0; }
  section { padding: var(--s-12) 0; }
  .hero { padding: var(--s-12) 0 var(--s-16); }
}