/* Motion stays on individual layers so the existing reveals keep their transforms. */
:root { --motion-ease: cubic-bezier(.22, 1, .36, 1); }

.hdr { transition: background .35s, box-shadow .35s; }
.hdr.is-scrolled {
  background: rgba(11, 12, 14, .96);
  box-shadow: 0 8px 32px #0003;
}
.reading-progress {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--green-hi);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
.nav a { position: relative; }
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 1px;
  background: var(--green-hi);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--motion-ease);
}
.nav a[aria-current="location"] { color: var(--green-hi); }
.nav a[aria-current="location"]::after { transform: scaleX(1); }

.stat-row b { display: inline-block; min-width: 1.15ch; font-variant-numeric: tabular-nums; }
.stat-row b:first-child { letter-spacing: 0; }
.tnums b { font-variant-numeric: tabular-nums; }
.btn { position: relative; isolation: isolate; overflow: hidden; }
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #ffffff0c;
  transform: translateX(-101%);
  transition: transform .5s var(--motion-ease);
  pointer-events: none;
}
.btn:hover::before, .btn:focus-visible::before { transform: translateX(0); }
.btn:active { translate: 0 1px; }
.shot, .grid-photos picture { overflow: hidden; }
.shot img, .grid-photos img { transition: transform 1.1s var(--motion-ease); }
.card, .prog, .tcard { transition: border-color .4s, box-shadow .4s; }
.card:hover, .prog:hover, .tcard:hover {
  border-color: var(--steel-3);
  box-shadow: 0 18px 40px -26px #000b;
}
.prog-main:hover { border-color: var(--green-hi); }
.nstep { transition: border-color .5s, background-color .5s; }
.nstep .nnum { transition: color .5s, background-color .5s; }
.nstep.is-current { border-color: var(--green-hi); background-color: #74b79509; }
.nstep.is-current .nnum { color: var(--green-hi); }
.nsteps { position: relative; }
.nsteps::before {
  content: "";
  position: absolute;
  left: -16px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--green-hi);
  transform: scaleY(var(--steps-progress, 0));
  transform-origin: top;
}
.mid-cta::before { display: none; }

/* Pointer spotlight: motion.js sets --mx/--my on the hovered card. */
.card, .nstep, .prog { position: relative; isolation: isolate; }
.card::after, .nstep::after, .prog::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), #ffffff0f, transparent 45%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
}
.card:hover::after, .nstep:hover::after, .prog:hover::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-in > .pill,
  .motion-ready .hero h1,
  .motion-ready .hero .lede,
  .motion-ready .hero .row,
  .motion-ready .stat-row {
    animation: hero-arrive 1s var(--motion-ease) both;
  }
  .motion-ready .hero h1 { animation-delay: .08s; }
  .motion-ready .hero .lede { animation-delay: .16s; }
  .motion-ready .hero .row { animation-delay: .24s; }
  .motion-ready .stat-row { animation-delay: .32s; }
  /* One light pass across the chrome word, like the logo catching light. */
  .motion-ready .hero .ghost {
    background-image: linear-gradient(105deg, #fff0 42%, #fffffff2 50%, #fff0 58%), var(--chrome);
    background-size: 260% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: chrome-sheen 1.8s .9s var(--motion-ease) both;
  }
  .hero-img { transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.035); }
  .phone-crop { translate: 0 var(--phone-shift, 0px); }
  .phone-2 .phone-crop { translate: 0 calc(var(--phone-shift, 0px) * -1); }
  .phone { overflow: visible; }
  .faq details[open] p { animation: answer-arrive .35s var(--motion-ease); }
  @media (hover: hover) and (pointer: fine) {
    .shot:hover img, .grid-photos picture:hover img { transform: scale(1.035); }
    .prog { translate: 0 var(--card-lift, 0px); transition: translate .45s var(--motion-ease), border-color .4s, box-shadow .4s; }
    .prog:hover { --card-lift: -5px; }
  }
}
@keyframes hero-arrive {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes chrome-sheen {
  from { background-position: 130% 0, 0 0; }
  to { background-position: -30% 0, 0 0; }
}
@keyframes answer-arrive {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 700px) {
  .hero-img { transform: none; }
  .nsteps::before { left: -9px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero-img, .shot:hover img, .grid-photos picture:hover img { transform: none; }
}