/* Subtle plotter motion. Content stays visible; nothing is pre-hidden. */

.will-motion.is-in {
  animation: settle 0.7s var(--ease) var(--motion-delay, 0ms) both;
}
.will-motion.is-in-instant {
  animation: none;
}

.hero-media img {
  animation: hero-ken 28s ease-in-out alternate infinite;
  transform-origin: 58% 58%;
}

.hero .chip {
  opacity: 0;
  animation: fade-up 0.55s var(--ease) forwards;
}
.hero .chip:nth-child(1) { animation-delay: 0.1s; }
.hero .chip:nth-child(2) { animation-delay: 0.18s; }
.hero .chip:nth-child(3) { animation-delay: 0.26s; }

.hero h1 { animation: settle 0.8s var(--ease) 0.16s both; }
.hero .lede { animation: fade-up 0.7s var(--ease) 0.28s both; }
.hero-cta { animation: fade-up 0.65s var(--ease) 0.38s both; }

.hero .mark {
  animation: mark-grow 0.8s var(--ease) both;
}
.hero .mark-tl { animation-delay: 0.32s; transform-origin: top left; }
.hero .mark-tr { animation-delay: 0.44s; transform-origin: top right; }
.hero .mark-br { animation-delay: 0.56s; transform-origin: bottom right; }

.hero .callout {
  opacity: 0;
  animation: fade-up 0.5s var(--ease) forwards;
}
.hero .callout-a { animation-delay: 1.05s; }
.hero .callout-b { animation-delay: 1.22s; }

.hero .plot-tag {
  opacity: 0;
  animation: fade-up 0.6s var(--ease) 0.7s forwards;
}
.hero .plot-tag-b { animation-delay: 0.85s; }

.hero .plot-scale-y { animation: scale-y 1.1s var(--ease) 0.4s both; }
.hero .plot-scale-x { animation: scale-x 1.1s var(--ease) 0.5s both; }
.hero .plot-cross { animation: fade-up 0.6s var(--ease) 0.9s both; }

.nav ul a {
  position: relative;
}
.nav ul a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -5px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 420ms var(--ease);
}
.nav ul a:hover::after,
.nav ul a:focus-visible::after,
.nav ul a[aria-current="page"]::after {
  transform: scaleX(1);
}

.btn-ghost {
  transition: background var(--ease), border-color var(--ease), color var(--ease);
}
.btn-ghost:hover {
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.text-link {
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 420ms var(--ease), color var(--ease);
}
.text-link:hover,
.text-link:focus-visible {
  background-size: 100% 1px;
}

.svc-card .svc-ico {
  transition: background 420ms var(--ease), color 420ms var(--ease);
}
.svc-card:hover .svc-ico {
  background: var(--color-primary);
  color: #fff;
}
.svc-card h3 {
  transition: color 420ms var(--ease);
}
.svc-card:hover h3 { color: var(--color-primary-dark); }

.step {
  transition: background 420ms var(--ease);
}
.step:hover { background: var(--color-muted); }

.mosaic a img,
.gallery a img {
  transition: transform 900ms var(--ease);
}

.jump a {
  transition: background 380ms var(--ease), color 380ms var(--ease);
}

.filters button {
  transition: background 320ms var(--ease), color 320ms var(--ease), border-color 320ms var(--ease);
}

.faq details::before {
  transition: background 280ms var(--ease), transform 280ms var(--ease);
}
.faq details[open]::before {
  background: #000;
  transform: rotate(45deg) scale(1.15);
}
.faq details[open] summary::after {
  content: "+";
  transform: rotate(45deg);
}
.faq details[open] p {
  animation: faq-copy 0.4s var(--ease) both;
}

.page-band .mark {
  animation: mark-grow 0.7s var(--ease) 0.15s both;
}
.page-band .mark-tl { transform-origin: top left; }
.page-band .mark-tr { transform-origin: top right; }
.page-band .mark-br { transform-origin: bottom right; }

.lightbox:not([hidden]) {
  animation: dim-in 0.35s ease;
}
.lightbox img {
  transition: opacity 0.35s ease;
}

.lead-form input,
.lead-form select,
.lead-form textarea {
  transition: border-color var(--ease), box-shadow var(--ease), background 320ms ease;
}
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  background: #fafafa;
}

@keyframes settle {
  from { transform: translateY(8px); }
  to { transform: none; }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-ken {
  from { transform: scale(1); }
  to { transform: scale(1.045); }
}

@keyframes mark-grow {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: none; }
}

@keyframes scale-y {
  from { transform: scaleY(0); transform-origin: top; opacity: 0; }
  to { transform: none; opacity: 0.4; }
}

@keyframes scale-x {
  from { transform: scaleX(0); transform-origin: left; opacity: 0; }
  to { transform: none; opacity: 0.4; }
}

@keyframes faq-copy {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

@keyframes dim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (max-width: 1023px) {
  .hero .plot-tag,
  .hero .callout,
  .hero .plot-scale,
  .hero .plot-cross { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .will-motion.is-in,
  .hero-media img,
  .hero .chip,
  .hero h1,
  .hero .lede,
  .hero-cta,
  .hero .mark,
  .hero .callout,
  .hero .plot-tag,
  .hero .plot-scale,
  .hero .plot-cross,
  .faq details[open] p,
  .page-band .mark,
  .lightbox:not([hidden]) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .hero .chip { opacity: 1; }
}