/* Scroll-snap on desktop */
body {
  scroll-snap-type: y proximity;
}

/* Logo stroke-draw — JS controls timing */
.hero-logo .draw {
  fill: none;
  stroke: var(--paper);
  stroke-width: 2.5;
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
}

.hero-logo .fill {
  fill: var(--paper);
  stroke: none;
  opacity: 0;
}

/* Hero entrance */
@keyframes pulse {
  0%, 100% { opacity: 0.2; }
  50%      { opacity: 0.8; }
}

.hero-tag { opacity: 0; }
.hero-indicator { opacity: 0; }
.hero-line { animation: pulse 2s ease-in-out infinite; }

/* Marquee */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.marquee {
  animation: marquee-scroll 28s linear infinite;
}

/* has-js animation states */
.has-js .statement-heading .word {
  display: inline-block;
  opacity: 0;
  transition: opacity 0.4s, transform 0.4s var(--ease-out);
}
.has-js .statement-heading .word.visible { opacity: 1; }
.has-js .statement-heading .word.dim { color: var(--muted); }
.has-js .statement-heading .word.accent { color: var(--accent); font-weight: 800; }

.has-js .diagnose-card {
  opacity: 0;
  transform: translateY(80px) scale(0.95);
  transition: opacity 0.8s, transform 0.8s var(--ease-out), background var(--duration-base);
}
.has-js .diagnose-card.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.has-js .services-heading {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.8s, transform 0.8s var(--ease-out);
}
.has-js .services-heading.visible {
  opacity: 1;
  transform: scale(1);
}

.has-js .services-core {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.has-js .services-core.visible {
  opacity: 1;
  transform: translateX(0);
}

.has-js .services-branch {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), border-color var(--duration-base);
}
.has-js .services-branch.visible {
  opacity: 1;
  transform: translateY(0);
}

.has-js .process-intro {
  opacity: 0;
  transition: opacity 0.8s 0.2s;
}
.has-js .process-intro.visible { opacity: 1; }

.has-js .process-step {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity 0.7s, transform 0.7s var(--ease-out);
}
.has-js .process-step.visible {
  opacity: 1;
  transform: translateX(0);
}

.has-js .contact-inner h2 {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.has-js .contact-inner.visible h2 {
  opacity: 1;
  transform: translateY(0);
}

.has-js .contact-inner p {
  opacity: 0;
  transition: opacity 0.8s 0.3s;
}
.has-js .contact-inner.visible p { opacity: 1; }

.has-js .contact-link {
  opacity: 0;
  transform: translateY(20px);
  transition: color var(--duration-base), border-color var(--duration-base), opacity 0.8s 0.5s, transform 0.8s 0.5s;
}
.has-js .contact-inner.visible .contact-link {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  body { scroll-snap-type: none; }
  .hero-logo .draw { stroke-dashoffset: 0; }
  .hero-logo .fill { opacity: 1; }
  .hero-tag, .hero-indicator { opacity: 1; transform: none; }
  .marquee { animation: none; }
  .has-js .statement-heading .word,
  .has-js .diagnose-card,
  .has-js .services-heading,
  .has-js .services-core,
  .has-js .services-branch,
  .has-js .process-intro,
  .has-js .process-step,
  .has-js .contact-inner h2,
  .has-js .contact-inner p,
  .has-js .contact-link {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
}