/* Progressive enhancement: content stays visible when JavaScript is unavailable. */
.reveal {
  opacity: 1;
  transform: none;
}

/* Page entrance */
.motion-ready .site-header {
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 400ms ease, transform 400ms ease;
}

.motion-ready.page-loaded .site-header {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .hero-copy {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready .hero .section-label,
.motion-ready .hero-title > span,
.motion-ready .hero-lead,
.motion-ready .hero-actions .button,
.motion-ready .hero-visual {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.motion-ready.page-loaded .hero .section-label,
.motion-ready.page-loaded .hero-title > span,
.motion-ready.page-loaded .hero-lead,
.motion-ready.page-loaded .hero-actions .button,
.motion-ready.page-loaded .hero-visual {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .hero .section-label { transition-delay: 80ms; }
.motion-ready .hero-title > span:nth-child(1) { transition-delay: 150ms; }
.motion-ready .hero-title > span:nth-child(2) { transition-delay: 220ms; }
.motion-ready .hero-title > span:nth-child(3) { transition-delay: 290ms; }
.motion-ready .hero-title > span:nth-child(4) { transition-delay: 360ms; }
.motion-ready .hero-lead { transition-delay: 430ms; }
.motion-ready .hero-actions .button:nth-child(1) { transition-delay: 500ms; }
.motion-ready .hero-actions .button:nth-child(2) { transition-delay: 560ms; }
.motion-ready .hero-visual { transition-delay: 620ms; }

/* Section reveals */
.motion-ready .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 520ms ease, transform 520ms ease;
}

.motion-ready .reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.motion-ready .hero-copy.reveal {
  opacity: 1;
  transform: none;
  transition: none;
}

.motion-ready .service-grid .reveal:nth-child(2),
.motion-ready .signals-grid .reveal:nth-child(2),
.motion-ready .result-grid .reveal:nth-child(2),
.motion-ready .formats-grid .reveal:nth-child(2),
.motion-ready .case-grid .reveal:nth-child(2) { transition-delay: 55ms; }
.motion-ready .service-grid .reveal:nth-child(3),
.motion-ready .signals-grid .reveal:nth-child(3),
.motion-ready .result-grid .reveal:nth-child(3),
.motion-ready .formats-grid .reveal:nth-child(3),
.motion-ready .case-grid .reveal:nth-child(3) { transition-delay: 110ms; }
.motion-ready .service-grid .reveal:nth-child(4),
.motion-ready .signals-grid .reveal:nth-child(4),
.motion-ready .result-grid .reveal:nth-child(4),
.motion-ready .formats-grid .reveal:nth-child(4),
.motion-ready .case-grid .reveal:nth-child(4) { transition-delay: 165ms; }
.motion-ready .service-grid .reveal:nth-child(5),
.motion-ready .signals-grid .reveal:nth-child(5),
.motion-ready .formats-grid .reveal:nth-child(5) { transition-delay: 220ms; }
.motion-ready .service-grid .reveal:nth-child(6),
.motion-ready .signals-grid .reveal:nth-child(6) { transition-delay: 275ms; }

/* Short mechanical interactions */
.site-nav a::after {
  transition: transform 140ms ease;
}

.site-nav a:hover::after,
.site-nav a:focus-visible::after {
  transform: scaleX(1);
}

.header-cta,
.hero-actions .button,
.contact-button,
.nav-menu-cta {
  transition: box-shadow 140ms ease, transform 140ms ease;
}

.header-cta:hover,
.header-cta:focus-visible,
.contact-button:hover,
.contact-button:focus-visible,
.nav-menu-cta:hover,
.nav-menu-cta:focus-visible {
  box-shadow: 3px 3px 0 var(--color-border);
  transform: translate(2px, 2px);
}

.hero-actions .button:hover,
.hero-actions .button:focus-visible {
  box-shadow: 5px 5px 0 var(--color-border);
  transform: translate(2px, 2px);
}

.service-arrow,
.case-arrow {
  transition: transform 140ms ease;
}

.service-card:hover .service-arrow,
.case-card:hover .case-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .motion-ready .site-header,
  .motion-ready .hero .section-label,
  .motion-ready .hero-title > span,
  .motion-ready .hero-lead,
  .motion-ready .hero-actions .button,
  .motion-ready .hero-visual,
  .motion-ready .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-nav a::after,
  .header-cta,
  .hero-actions .button,
  .contact-button,
  .nav-menu-cta,
  .service-arrow,
  .case-arrow {
    transition: none;
  }

  .header-cta:hover,
  .header-cta:focus-visible,
  .hero-actions .button:hover,
  .hero-actions .button:focus-visible,
  .contact-button:hover,
  .contact-button:focus-visible,
  .nav-menu-cta:hover,
  .nav-menu-cta:focus-visible,
  .service-card:hover .service-arrow,
  .case-card:hover .case-arrow {
    transform: none;
  }
}