/* ============================================================
   EMG — motion layer
   Rules: everything is subtle, everything is fast (<600ms),
   nothing moves more than 24px, and all of it turns off under
   prefers-reduced-motion. Motion earns attention; it never
   asks for it.
   ============================================================ */

/* ---------- 1. Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }

/* Stagger children of a revealed group */
[data-reveal-group] > * { opacity: 0; transform: translateY(20px); transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1); }
[data-reveal-group].in > * { opacity: 1; transform: none; }
[data-reveal-group].in > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group].in > *:nth-child(2) { transition-delay: 80ms; }
[data-reveal-group].in > *:nth-child(3) { transition-delay: 160ms; }
[data-reveal-group].in > *:nth-child(4) { transition-delay: 240ms; }
[data-reveal-group].in > *:nth-child(5) { transition-delay: 320ms; }
[data-reveal-group].in > *:nth-child(6) { transition-delay: 400ms; }

/* ---------- 2. Hero entrance ---------- */
.hero-in > * {
  opacity: 0;
  transform: translateY(28px);
  animation: heroRise .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.hero-in > *:nth-child(1) { animation-delay: .06s; }
.hero-in > *:nth-child(2) { animation-delay: .16s; }
.hero-in > *:nth-child(3) { animation-delay: .28s; }
.hero-in > *:nth-child(4) { animation-delay: .40s; }

@keyframes heroRise { to { opacity: 1; transform: none; } }

/* The headline reveals line by line behind a mask */
/* padding + negative margin so descenders aren't clipped by the mask */
.h-hero .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; }
.h-hero .line > span {
  display: block;
  transform: translateY(100%);
  animation: lineUp .9s cubic-bezier(.16,.84,.44,1) forwards;
}
.h-hero .line:nth-child(1) > span { animation-delay: .10s; }
.h-hero .line:nth-child(2) > span { animation-delay: .22s; }
@keyframes lineUp { to { transform: none; } }

/* ---------- 3. The route line — the logo's own stroke, drawing itself ---------- */
.hero { position: relative; overflow: hidden; }
.route-line {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: auto;
  height: 100%;
  width: 62%;              /* lives in the empty right-hand space, clear of the type */
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  /* on phones the copy is full-width, so the line steps back further */
  .route-line { width: 100%; opacity: .45; }
}
.hero .wrap { position: relative; z-index: 1; }
.route-line path {
  fill: none;
  stroke: var(--cobalt);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .55;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: draw 2.6s cubic-bezier(.33,.9,.4,1) .3s forwards;
}
.route-line path.thin { opacity: .22; animation-delay: .55s; stroke-width: 1.25; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* the marker that travels the route — "the people who move people" */
.route-line .marker { fill: var(--cobalt); opacity: 0; animation: markerIn .6s ease 2.6s forwards; }
.route-line .marker-halo { fill: var(--cobalt); opacity: 0; animation: haloIn .6s ease 2.6s forwards; }
@keyframes markerIn { to { opacity: .9; } }
@keyframes haloIn { to { opacity: .18; } }

/* A slow drifting cobalt wash behind the hero */
.hero::before {
  content: "";
  position: absolute;
  top: -30%; left: 50%;
  width: 900px; height: 900px;
  margin-left: -200px;
  background: radial-gradient(circle, rgba(39,66,200,.10) 0%, rgba(39,66,200,0) 62%);
  border-radius: 50%;
  pointer-events: none;
  animation: drift 22s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-80px, 40px) scale(1.12); }
}

/* ---------- 4. Header condenses on scroll ---------- */
.site-header { transition: box-shadow .25s ease, background .25s ease; }
.site-header .header-inner { transition: min-height .25s ease; }
.site-header.scrolled { box-shadow: 0 1px 16px rgba(23,24,26,.08); }
.site-header.scrolled .header-inner { min-height: 56px; }
.logo-link img { transition: height .25s ease; }
.site-header.scrolled .logo-link img { height: 24px; }

/* ---------- 5. Door cards ---------- */
.door { position: relative; overflow: hidden; }
.door::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--cobalt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.door--venue::after { background: var(--brass); }
.door:hover::after, .door:focus-visible::after { transform: scaleX(1); }
.door .door-cta { transition: transform .3s cubic-bezier(.22,.61,.36,1); display: inline-block; }
.door:hover .door-cta { transform: translateX(6px); }

/* ---------- 6. Cards + prices lift ---------- */
.card, .price {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, border-color .3s ease;
}
.card:hover, .price:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(23,24,26,.08);
}
.card-night:hover { box-shadow: 0 10px 30px rgba(0,0,0,.35); }

/* ---------- 7. Ledger rows sweep in, right to left ---------- */
.ledger-row { position: relative; }
.ledger-row .amount { display: inline-block; transition: transform .3s ease, color .3s ease; }
.ledger-row:hover .amount { transform: translateX(-4px); color: var(--cobalt); }
.ledger-row::after {
  content: "";
  position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%;
  background: var(--cobalt);
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.ledger-row:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- 8. Buttons ---------- */
.btn { position: relative; overflow: hidden; }
.btn-primary::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.22) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.btn-primary:hover::before { transform: translateX(120%); }
.btn:active { transform: translateY(1px); }

/* Arrow links travel */
.link-arrow::after { display: inline-block; transition: transform .25s ease; }
.link-arrow:hover::after { transform: translateX(4px); }

/* ---------- 9. Night bands get a slow aurora ---------- */
.band-night { position: relative; overflow: hidden; }
.band-night::before {
  content: "";
  position: absolute;
  top: -40%; left: -10%;
  width: 70%; height: 180%;
  background: radial-gradient(ellipse at center, rgba(39,66,200,.30) 0%, rgba(39,66,200,0) 65%);
  pointer-events: none;
  animation: aurora 26s ease-in-out infinite alternate;
}
@keyframes aurora {
  0%   { transform: translate(0,0) scale(1); opacity: .8; }
  100% { transform: translate(45%, 8%) scale(1.25); opacity: 1; }
}
.band-night .wrap { position: relative; z-index: 1; }

/* ---------- 10. Pull quote reveals word by word ---------- */
.pull .w {
  display: inline-block;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
}
.pull.in .w { opacity: 1; transform: none; }

/* ---------- 11. Counting numbers ---------- */
.figure, .amount { font-variant-numeric: tabular-nums; }

/* ---------- 12. Section rule draws across ---------- */
hr.hr {
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
hr.hr.in { transform: scaleX(1); }

/* ---------- 13. Founder photos ---------- */
.founder-photo {
  transition: transform .6s cubic-bezier(.22,.61,.36,1), filter .6s ease;
  filter: saturate(.92);
}
.founders > div:hover .founder-photo { transform: scale(1.015); filter: saturate(1.02); }

/* ---------- Print: nothing may be hidden on paper ---------- */
@media print {
  [data-reveal], [data-reveal-group] > *, .pull .w { opacity: 1 !important; transform: none !important; }
  hr.hr { transform: scaleX(1) !important; }
  .route-line, .hero::before, .band-night::before { display: none !important; }
}

/* ---------- Reduced motion: turn all of it off ---------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-in > * { opacity: 1 !important; transform: none !important; animation: none !important; }
  .h-hero .line > span { transform: none !important; animation: none !important; }
  .route-line path { stroke-dashoffset: 0 !important; animation: none !important; }
  .hero::before, .band-night::before { animation: none !important; }
  .pull .w { opacity: 1 !important; transform: none !important; }
  hr.hr { transform: scaleX(1) !important; }
  .btn-primary::before { display: none; }
}