/* ==========================================================================
   Shri Sai Interior — motion
   Restrained by intent. Everything here is decoration on top of a page that
   is already complete and usable with motion switched off.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll reveal
   Elements start hidden ONLY when JS is present to reveal them (html.js),
   so a JS failure can never leave the page blank.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.js [data-reveal='is-visible'] {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Image mask reveal — disabled: images show immediately without animation. */
.js [data-reveal-mask] { overflow: hidden; }

/* Fine rules that draw themselves in. */
.js [data-reveal-line] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.js [data-reveal-line='is-visible'] { transform: scaleX(1); }

/* Hero entrance — a short, staged settle, not a performance. */
.js .hero__inner > * { opacity: 0; transform: translateY(14px); }
.js .hero--ready .hero__inner > * {
  animation: ssi-rise var(--dur-slow) var(--ease-out) forwards;
}
.js .hero--ready .hero__body > *  { animation: ssi-rise var(--dur-slow) var(--ease-out) forwards; }
.js .hero__body > * { opacity: 0; transform: translateY(14px); }
.js .hero--ready .hero__body > *:nth-child(1) { animation-delay: 40ms; }
.js .hero--ready .hero__body > *:nth-child(2) { animation-delay: 120ms; }
.js .hero--ready .hero__body > *:nth-child(3) { animation-delay: 200ms; }
.js .hero--ready .hero__body > *:nth-child(4) { animation-delay: 280ms; }
.js .hero--ready .hero__body > *:nth-child(5) { animation-delay: 360ms; }
.js .hero--ready .hero__body > *:nth-child(6) { animation-delay: 440ms; }
.js .hero--ready .hero__figure { animation-delay: 200ms; }

@keyframes ssi-rise {
  to { opacity: 1; transform: none; }
}

/* Counter/number roll used sparingly, and only where the number means something. */
.js [data-count] { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Reduced motion
   The site must be fully usable, and fully visible, without any of the above.
   -------------------------------------------------------------------------- */

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

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Show everything outright — no transforms, no clipping. */
  .js [data-reveal],
  .js [data-reveal-mask] > img,
  .js [data-reveal-mask] > picture,
  .js [data-reveal-line],
  .js .hero__inner > *,
  .js .hero__body > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }

  .service-feature:hover .service-feature__media img,
  .project-card:hover .project-card__media img,
  .gallery-item:hover img { transform: none !important; }

  .service-row:hover { padding-inline: 0 !important; }
  .service-row:hover .service-row__go { transform: none !important; }
}