/* ==========================================================================
   STYLUS interior V1 — Motion
   Quiet, slow, architectural. Content stays visible without JS.
   ========================================================================== */

.nav-overlay {
  transition:
    opacity var(--duration) var(--ease-out),
    visibility var(--duration) var(--ease-out);
}

.nav-mobile {
  transform: translateX(1.25rem);
  transition: transform var(--duration) var(--ease-out);
}

.nav-overlay.is-open .nav-mobile {
  transform: none;
}

.nav-toggle__line {
  transition:
    transform var(--duration) var(--ease-out),
    opacity var(--duration) var(--ease-out);
}

.nav-desktop__link::after,
.project-tabs a::after {
  transition: transform var(--duration) var(--ease-out);
}

.site-header {
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out),
    box-shadow var(--duration) var(--ease-out),
    border-color var(--duration) var(--ease-out);
}

.link-arrow::after {
  transition: transform 700ms var(--ease-out);
}

.btn-line {
  transition:
    background var(--duration) var(--ease-out),
    color var(--duration) var(--ease-out);
}

.project-feature__image {
  transition: transform 800ms var(--ease-out);
}

.project-feature__overlay {
  transition: background 800ms var(--ease-out);
}

.media-shape img {
  transform: scale(1.01);
  transition: transform 900ms var(--ease-out);
}

.media-shape:hover img {
  transform: scale(1.04);
}

/* Reveal is an enhancement only. Never hide content by default.
   JS may add .is-in; layout remains visible either way. */
.reveal {
  opacity: 1;
  transform: none;
}

html.js .reveal {
  transition:
    opacity 0.85s var(--ease-out),
    transform 0.85s var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero__media img {
    animation: hero-ease 6.5s var(--ease-out) both;
  }

  @keyframes hero-ease {
    from { transform: scale(1.06); }
    to { transform: scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }

  .reveal,
  html.js .reveal {
    opacity: 1;
    transform: none;
  }

  .hero__media img,
  .media-shape img,
  .project-feature__image,
  .closing__bg img {
    transform: none;
  }
}