/* ==========================================================================
   Northern Page — Motion
   All non-essential motion is disabled under prefers-reduced-motion.
   ========================================================================== */

/* Hiding is JS-gated: if JS never runs (or fails), content is simply visible. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

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

[data-reveal-group] > * { --reveal-delay: 0ms; }
[data-reveal-group] > *:nth-child(1) { --reveal-delay: 60ms; }
[data-reveal-group] > *:nth-child(2) { --reveal-delay: 140ms; }
[data-reveal-group] > *:nth-child(3) { --reveal-delay: 220ms; }
[data-reveal-group] > *:nth-child(4) { --reveal-delay: 300ms; }
[data-reveal-group] > *:nth-child(5) { --reveal-delay: 380ms; }
[data-reveal-group] > *:nth-child(6) { --reveal-delay: 460ms; }
[data-reveal-group] > *:nth-child(7) { --reveal-delay: 540ms; }
[data-reveal-group] > *:nth-child(8) { --reveal-delay: 620ms; }
[data-reveal-group] > *:nth-child(9) { --reveal-delay: 700ms; }

/* Hero */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--navy-900);
  color: var(--paper);
  overflow: clip;
  padding-top: var(--header-h);
}

.hero__video-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--navy-950);
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(50% 45% at 82% 10%, rgba(198, 161, 91, 0.14), transparent 60%),
    linear-gradient(100deg, rgba(8,13,24,0.86) 0%, rgba(8,13,24,0.62) 34%, rgba(8,13,24,0.28) 55%, rgba(8,13,24,0.06) 72%, transparent 85%),
    linear-gradient(0deg, rgba(8,13,24,0.55), transparent 30%);
  z-index: 0;
}

.hero__grain {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 1;
  pointer-events: none;
}

.hero .container {
  position: relative;
  z-index: 2;
}

.hero__eyebrow {
  color: var(--gold);
  opacity: 0;
  animation: rise var(--dur-slower) var(--ease-out) 200ms forwards;
}
.hero__title {
  color: var(--paper);
  opacity: 0;
  animation: rise var(--dur-slower) var(--ease-out) 380ms forwards;
}
.hero__lede {
  opacity: 0;
  animation: rise var(--dur-slower) var(--ease-out) 560ms forwards;
}
.hero__actions {
  opacity: 0;
  animation: rise var(--dur-slower) var(--ease-out) 720ms forwards;
}
.hero__stat-strip {
  opacity: 0;
  animation: rise var(--dur-slower) var(--ease-out) 880ms forwards;
}

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

/* Hero mark → nav mark morph handled via matching element + FLIP in JS;
   this class marks the in-flight state for a smooth crossfade fallback. */
.brand__mark.is-morphing {
  transition: transform var(--dur-slower) var(--ease-in-out);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__eyebrow, .hero__title, .hero__lede, .hero__actions, .hero__stat-strip {
    animation: none !important;
    opacity: 1 !important;
  }
  .card:hover { transform: none; }
  .card:hover .service-card__icon { transform: none; }
  * { scroll-behavior: auto !important; }
}