/* =====================================================================
   Nobility Glory — Scroll Reveal (standardised)

   ONE reveal for the whole site: opacity 0 -> 1 plus a short rise.
   No rotation, no scale, no clip-path wipe. Every page uses the same
   curve and the same duration so the motion reads as one system
   instead of five.

   Loads on all 22 pages, after the per-page stylesheet and before
   responsive.css.
===================================================================== */

:root {
  /* The single reveal curve. Already the value used by index.css,
     whyus.css and the service stylesheets; declared here as well so
     the 12 project stylesheets (which never defined it) inherit it. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* The motion system. Prefixed so these can never be shadowed by a
     per-page token of the same short name. */
  --ng-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ng-dur-reveal: 420ms;
  --ng-reveal-rise: 16px;
  --ng-stagger: 60ms;

  /* Hero-only entrance: a touch richer than the standard reveal
     (used just below), so the first thing a visitor sees on every
     page feels considered rather than merely present. */
  --ng-ease-hero: cubic-bezier(0.16, 1, 0.3, 1);
  --ng-dur-hero: 760ms;
  --ng-hero-rise: 26px;
  --ng-hero-blur: 5px;
}

/* ---------------------------------------------------------------
   The one reveal. Every data-reveal kind resolves to this — the
   `heading` / `block` / `image` distinction is kept in the markup
   (harmless, and useful for debugging) but no longer produces three
   different animations.
--------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--ng-reveal-rise));
  transition:
    opacity var(--ng-dur-reveal) var(--ng-ease-out),
    transform var(--ng-dur-reveal) var(--ng-ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------------------------------------------------------------
   Hero content: fade + rise + a soft focus-pull (blur clears as it
   settles), each child following the one before it. The stagger is
   set via nth-child on the shared `.hero-content` wrapper used on
   every service page and the homepage, so this one block upgrades
   the hero entrance site-wide without touching per-page CSS.
--------------------------------------------------------------- */
[data-reveal="hero"] {
  opacity: 0;
  transform: translateY(var(--ng-hero-rise)) scale(0.985);
  filter: blur(var(--ng-hero-blur));
  transition:
    opacity var(--ng-dur-hero) var(--ng-ease-hero),
    transform var(--ng-dur-hero) var(--ng-ease-hero),
    filter var(--ng-dur-hero) var(--ng-ease-hero);
}

[data-reveal="hero"].is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.hero-content > *:nth-child(1) { transition-delay: 0ms; }
.hero-content > *:nth-child(2) { transition-delay: 110ms; }
.hero-content > *:nth-child(3) { transition-delay: 220ms; }
.hero-content > *:nth-child(4) { transition-delay: 330ms; }
.hero-content > *:nth-child(5) { transition-delay: 440ms; }
.hero-content > *:nth-child(6) { transition-delay: 550ms; }
.hero-content > *:nth-child(7) { transition-delay: 660ms; }

/* will-change only while the element is actually waiting to animate.
   Leaving it on permanently (the previous behaviour) pins a compositor
   layer for every revealed element on the page. */
[data-reveal]:not(.is-visible) {
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  will-change: auto;
}

/* ---------------------------------------------------------------
   Reduced motion: keep the fade, drop the movement.
--------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
    will-change: auto;
  }
}