/* Elvanta site shell — site-wide chrome + reveal animations.
 * Layered on top of assets/elvanta.css design tokens.
 */

html { scroll-behavior: smooth; }
html.is-loaded body { opacity: 1; }
body { opacity: 0; transition: opacity 600ms ease-out; }

::selection { background: var(--color-accent-magenta); color: #fff; }

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

/* ─── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--color-hairline-soft);
}
.site-nav__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  height: 64px;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-nav__brand { display: flex; align-items: center; }
.site-nav__logo { height: 22px; width: auto; }
.site-nav__links { display: flex; gap: 28px; }
.site-nav__link {
  font-size: 15px; font-weight: 420; letter-spacing: -0.1px;
  color: var(--color-ink); position: relative; padding: 4px 0;
  transition: opacity 120ms ease-out;
}
.site-nav__link:hover { text-decoration: none; opacity: 0.6; }
.site-nav__link.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1.5px; background: var(--color-ink); border-radius: 2px;
}
.btn-sm { padding: 8px 18px; font-size: 15px; }

/* ─── Marquee ────────────────────────────────────────────── */
.site-marquee {
  background: var(--color-inverse-canvas);
  color: var(--color-inverse-ink);
  height: 40px; display: flex; align-items: center; overflow: hidden;
  position: relative;
}
@keyframes elvanta-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-33.333%); }
}
.site-marquee__row {
  display: flex; gap: 40px; white-space: nowrap; padding-left: 0;
  animation: elvanta-marquee 50s linear infinite;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
}
.site-marquee__item { opacity: 0.85; }

/* ─── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--color-inverse-canvas);
  color: var(--color-inverse-ink);
  margin-top: 96px;
}
.site-footer__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 96px 32px 48px;
}
.site-footer__top {
  display: flex; justify-content: space-between; align-items: flex-end;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.site-footer__brand {
  font-size: clamp(72px, 14vw, 220px);
  font-weight: 460; letter-spacing: -0.06em; line-height: 0.9;
}
.site-footer__tagline {
  font-size: 18px; font-weight: 330; max-width: 280px; opacity: 0.7;
  text-align: right;
}
.site-footer__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px;
  margin-top: 64px;
}
.site-footer__head {
  opacity: 0.5; margin-bottom: 16px; color: var(--color-inverse-ink);
}
.site-footer__col { display: flex; flex-direction: column; gap: 10px; }
.site-footer__link {
  color: var(--color-inverse-ink); font-size: 15px; font-weight: 330;
  opacity: 0.85; transition: opacity 120ms ease-out;
}
.site-footer__link:hover { opacity: 1; text-decoration: none; }
.site-footer__base {
  margin-top: 80px; padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; justify-content: space-between;
  color: var(--color-inverse-ink); opacity: 0.55;
}
.site-footer__base .caption { color: inherit; }

/* ─── Reveal animation ──────────────────────────────────── */
.reveal {
  opacity: 0; transform: translateY(36px);
  transition: opacity 620ms cubic-bezier(0.16, 0.84, 0.24, 1),
              transform 720ms cubic-bezier(0.16, 0.84, 0.24, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-fade { transform: none; }
.reveal-scale { transform: translateY(28px) scale(0.94); transform-origin: center bottom; }
.reveal-scale.is-visible { transform: none; }
.reveal-left { transform: translateX(-64px); }
.reveal-left.is-visible { transform: none; }
.reveal-right { transform: translateX(64px); }
.reveal-right.is-visible { transform: none; }
.reveal-punch-left { transform: translateX(-80px) skewX(-2deg); }
.reveal-punch-left.is-visible { transform: none; }
.reveal-punch-right { transform: translateX(80px) skewX(2deg); }
.reveal-punch-right.is-visible { transform: none; }
.reveal-pop { transform: translateY(20px) scale(0.86); }
.reveal-pop.is-visible { transform: none; }

/* Stagger helper */
.stagger > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.stagger > .reveal:nth-child(2) { --reveal-delay: 70ms; }
.stagger > .reveal:nth-child(3) { --reveal-delay: 140ms; }
.stagger > .reveal:nth-child(4) { --reveal-delay: 210ms; }
.stagger > .reveal:nth-child(5) { --reveal-delay: 280ms; }
.stagger > .reveal:nth-child(6) { --reveal-delay: 350ms; }
.stagger > .reveal:nth-child(7) { --reveal-delay: 420ms; }
.stagger > .reveal:nth-child(8) { --reveal-delay: 490ms; }

/* Stagger that alternates left / right entry */
.stagger-zig > .reveal:nth-child(odd)  { transform: translateX(-56px); }
.stagger-zig > .reveal:nth-child(even) { transform: translateX(56px); }
.stagger-zig > .reveal.is-visible { transform: none; }

/* ─── Page width helpers ────────────────────────────────── */
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section-tight { padding: 48px 0; }

/* ─── Eyebrow accent dot ────────────────────────────────── */
.eyebrow-dot {
  display: inline-flex; align-items: center; gap: 10px;
}
.eyebrow-dot::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-accent-magenta);
}

/* ─── Display utility ───────────────────────────────────── */
.display-mega {
  font-size: clamp(64px, 11vw, 180px);
  font-weight: 380;
  line-height: 0.94;
  letter-spacing: -0.045em;
  margin: 0;
}
.display-xl-tight {
  font-size: clamp(48px, 7vw, 96px);
  font-weight: 360;
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
}
.display-md {
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 360;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
}

/* ─── Color block helpers ───────────────────────────────── */
.block {
  border-radius: 32px;
  padding: clamp(32px, 6vw, 80px);
  position: relative; overflow: hidden;
}
.block-lime  { background: var(--color-block-lime); }
.block-lilac { background: var(--color-block-lilac); }
.block-cream { background: var(--color-block-cream); }
.block-mint  { background: var(--color-block-mint); }
.block-pink  { background: var(--color-block-pink); }
.block-coral { background: var(--color-block-coral); }
.block-navy  { background: var(--color-block-navy); color: var(--color-inverse-ink); }
.block-swipeclean {
  background: linear-gradient(180deg, #2C8FF7 0%, #1466CC 100%);
  color: #fff;
}

/* ─── Form ──────────────────────────────────────────────── */
.field {
  display: flex; flex-direction: column; gap: 8px;
}
.field label {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.4px;
  text-transform: uppercase; opacity: 0.65;
}
.field .input {
  background: transparent;
  border: 0; border-bottom: 1.5px solid rgba(0,0,0,0.18);
  border-radius: 0; padding: 14px 0;
  font-size: 22px; font-weight: 360; letter-spacing: -0.01em;
  color: inherit;
}
.field .input::placeholder { color: rgba(0,0,0,0.35); }
.field .input:focus {
  border-bottom-color: var(--color-ink);
  box-shadow: none;
}
textarea.input { resize: vertical; min-height: 120px; font-family: var(--font-sans); }

/* ─── Tweaks helpers ────────────────────────────────────── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

@media (max-width: 880px) {
  .site-nav__links { display: none; }
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
  .site-footer__top { flex-direction: column; align-items: flex-start; gap: 32px; }
  .site-footer__tagline { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-scale, .reveal-left, .reveal-right,
  .reveal-punch-left, .reveal-punch-right, .reveal-pop,
  .stagger-zig > .reveal { opacity: 1; transform: none; transition: none; }
  .site-marquee__row { animation: none; }
}