/* ── Scroll reveal ────────────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  transform: translateX(calc(var(--reveal-shift) * -1));
}
.reveal-right {
  transform: translateX(var(--reveal-shift));
}
.reveal-left.visible,
.reveal-right.visible {
  transform: translateX(0);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-animate {
  animation: fadeUp 0.8s var(--ease-out) forwards;
  opacity: 0;
}
.hero-animate:nth-child(1) { animation-delay: 0.1s; }
.hero-animate:nth-child(2) { animation-delay: 0.2s; }
.hero-animate:nth-child(3) { animation-delay: 0.3s; }
.hero-animate:nth-child(4) { animation-delay: 0.4s; }
.hero-animate:nth-child(5) { animation-delay: 0.5s; }
.hero-animate:nth-child(6) { animation-delay: 0.6s; }

/* ── Nav underline ────────────────────────────────────────────────── */

.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  display: block;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-base);
}
.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* ── Card rule ────────────────────────────────────────────────────── */

.card-line {
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out);
  margin-top: auto;
}

/* Hover is unreachable on touch, so the rule would never draw and the
   card would keep a dead gap. Draw it as part of the reveal instead. */
@media (hover: hover) and (pointer: fine) {
  .service-card:hover .card-line {
    transform: scaleX(1);
  }
}
@media (hover: none) {
  .service-card.visible .card-line {
    transform: scaleX(1);
    transition: transform 500ms var(--ease-out);
    transition-delay: calc(300ms + var(--i, 0) * 60ms);
  }
}

/* ── Press feedback ───────────────────────────────────────────────── */

.btn-outline,
.btn-filled,
.contact-email,
.social-link,
.nav-hamburger,
.work-link {
  transition: transform var(--dur-press) var(--ease-out),
              background-color var(--transition-base),
              color var(--transition-base),
              opacity var(--transition-base);
}

.btn-outline:active,
.btn-filled:active,
.social-link:active,
.nav-hamburger:active,
.work-link:active {
  transform: scale(0.97);
  transition-duration: 100ms;
}

/* 32px display type — 0.97 reads as a jolt at this size. */
.contact-email:active {
  transform: scale(0.985);
  transition-duration: 100ms;
}

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
}

/* ── Reduced motion ───────────────────────────────────────────────── */
/* Fewer and gentler, not zero: opacity survives, movement doesn't. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --reveal-shift: 0px;
  }
  html {
    scroll-behavior: auto;
  }
  .reveal {
    transition: opacity 300ms linear;
    transition-delay: calc(var(--i, 0) * 20ms);
  }
  .hero-animate {
    animation-duration: 250ms;
    animation-delay: 0s;
  }
  @keyframes fadeUp {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .deco-outer,
  .deco-inner {
    animation: none;
  }
  .btn-outline:active,
  .btn-filled:active,
  .social-link:active,
  .nav-hamburger:active,
  .work-link:active {
    transform: scale(0.99);
  }
}