/* Motion is progressive enhancement: source content always starts visible. */
@property --rule-scale {
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}

#scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 2px;
  z-index: 500;
  pointer-events: none;
  background: linear-gradient(90deg, var(--green), var(--accent) 50%, var(--red));
  transform: scaleX(0);
  transform-origin: left center;
}

.nav {
  transition: background .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.nav.scrolled {
  background: rgba(12, 14, 17, .97);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.nav-links a::after,
.nav-links a.active::after,
.nav-links a:hover::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s ease;
}
.nav-links a.active::after,
.nav-links a:hover::after,
.nav-links a:focus-visible::after { transform: scaleX(1); }

.eyebrow::before { transform: scaleX(var(--rule-scale, 1)); transform-origin: left; }
[data-count] { font-variant-numeric: lining-nums tabular-nums; }

.has-parallax .hero-image,
.has-parallax .architecture-image {
  translate: 0 var(--parallax-y, 0px);
  scale: 1.065;
  will-change: translate;
}

.button { position: relative; overflow: hidden; }
.button::after {
  content: '';
  position: absolute;
  pointer-events: none;
  inset: 0 auto 0 -70%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .2), transparent);
  transform: skewX(-22deg);
}
.brand img { transition: transform .4s ease; }
.text-link { transition: color .2s ease; }
.text-link > span { transition: transform .3s ease; }
.suite,
.feature-card,
.spec-card { transition: border-color .3s ease, background .3s ease, box-shadow .3s ease, transform .35s ease; }
.image-button::after { transition: background .3s ease, border-color .3s ease, transform .3s ease; }
.plan-zoom-label { transition: background .3s ease; }
.contact-card { transition: color .25s ease, border-color .25s ease; }
.tags > span { transition: color .25s ease, border-color .25s ease; }
summary { transition: color .2s ease; }
summary:hover { color: var(--accent); }

@media (hover: hover) and (pointer: fine) {
  .button:hover::after { animation: button-sheen .7s ease; }
  .brand:hover img { transform: scale(1.05); }
  .text-link:hover > span { transform: translate(3px, -3px); }
  .suite:hover { border-color: #65707d; transform: translateY(-3px); box-shadow: 0 12px 30px #0000001a; }
  .feature-card:hover,
  .spec-card:hover { background: var(--panel-light); }
  .image-button:hover::after { background: rgba(12,14,17,.92); border-color: var(--accent); transform: translate(2px,-2px); }
  .contact-card:hover { color: var(--accent); border-color: #65707d; }
  .tags > span:hover { color: var(--text); border-color: #65707d; }
}

@keyframes button-sheen { from { left: -70%; } to { left: 135%; } }

@media (max-width: 1020px) {
  .nav-links.open { animation: menu-enter .24s ease; }
}
@keyframes menu-enter { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .has-parallax .hero-image,
  .has-parallax .architecture-image { translate: none; scale: none; will-change: auto; }
  .button:hover,
  .suite:hover,
  .brand:hover img,
  .text-link:hover > span,
  .image-button:hover::after,
  .image-button:hover img { transform: none; }
}

@media print {
  #scroll-progress { display: none; }
  .has-parallax .hero-image,
  .has-parallax .architecture-image { translate: none; scale: none; }
}