/* ===========================================================
   NOVELLO STONE — Motion layer
   Additive on top of base.css / page CSS. Nothing here overrides
   layout — only opacity, transform, and timing are touched, so
   this file is safe to drop or disable without breaking anything.
   =========================================================== */

/* --- Cross-page transitions (progressive enhancement; Chromium
   today, ignored elsewhere — no fallback needed, default nav still
   works everywhere) --- */
@view-transition {
  navigation: auto;
}

/* Keep the nav from "swapping" during a page transition — it
   persists and cross-fades instead of flashing. */
.site-nav { view-transition-name: site-nav; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* --- Scroll progress bar --- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  z-index: 300;
  pointer-events: none;
}

/* --- Nav scroll state: always fixed and visible; only the background/shadow
   respond to scroll position (see base.css for position: fixed). --- */
.site-nav {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.site-nav.nav-scrolled {
  background: rgba(8, 8, 7, 0.94);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}

/* --- Generic scroll reveal --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(.16,.84,.44,1), transform 0.75s cubic-bezier(.16,.84,.44,1);
  will-change: transform, opacity;
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal="fade"].is-visible { transform: none; }

/* --- Staggered group reveal (children of [data-reveal-group]) --- */
.reveal-item {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(.16,.84,.44,1), transform 0.65s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--i, 0) * 90ms);
  will-change: transform, opacity;
}
.reveal-item.is-visible { opacity: 1; transform: translateY(0); }

/* --- Cascading text reveal (headings split into words) --- */
[data-cascade] { overflow: visible; }
.cascade-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.55em);
  transition: opacity 0.6s cubic-bezier(.16,.84,.44,1), transform 0.6s cubic-bezier(.16,.84,.44,1);
  transition-delay: calc(var(--i, 0) * 40ms);
  will-change: transform, opacity;
}
[data-cascade].is-visible .cascade-word { opacity: 1; transform: translateY(0); }

/* --- Hero entrance (plays once on load, not scroll-triggered) --- */
.hero-content > * {
  opacity: 0;
  transform: translateY(22px);
  animation: heroRise 0.9s cubic-bezier(.16,.84,.44,1) forwards;
}
.hero-content .eyebrow      { animation-delay: 0.15s; }
.hero-content h1            { animation-delay: 0.30s; }
.hero-content .hero-sub     { animation-delay: 0.50s; }
.hero-content .hero-actions { animation-delay: 0.65s; }
.hero-content .hero-stats   { animation-delay: 0.80s; }
@keyframes heroRise { to { opacity: 1; transform: translateY(0); } }

/* --- Hero photo: slow Ken Burns drift + scroll parallax --- */
.hero-photo-rotator img.is-active {
  animation: kenburns 8s ease-out forwards;
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.07); }
}

/* --- Tilt / spotlight cards (pillars, values, scenarios) --- */
.tilt-card {
  position: relative;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  transform-style: preserve-3d;
}
.tilt-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(180, 148, 110,0.16), transparent 62%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.tilt-card:hover::before,
.tilt-card:focus-within::before { opacity: 1; }
.tilt-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.35);
}

/* --- Image hover treatment (single, non-rotator visuals) --- */
.about-visual { overflow: hidden; }
.about-visual img {
  transition: transform 0.7s cubic-bezier(.16,.84,.44,1);
}
.about-visual:hover img { transform: scale(1.06); }

/* --- Animated stat counters --- */
[data-counter] { font-variant-numeric: tabular-nums; }

/* --- Reduced motion: neutralise everything above --- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .reveal-item, .cascade-word, .hero-content > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .hero-photo-rotator img.is-active { animation: none !important; }
  .tilt-card { transform: none !important; }
}