/* ════════════════════════════════════════════════════════════════
   atmospheric.css — Rung 8
   Scroll-linked atmospheric motion. Sage archetype: whisper, not shout.
   All effects gated by prefers-reduced-motion.
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   NPC v3 design system notes — patterns intentionally split by intent
   ════════════════════════════════════════════════════════════════

   EDITION META PATTERN
   --------------------
   Two patterns coexist deliberately:

   .hero__aside-edition (right-aligned inside the hero band)
     - Used on branded marketing pages: index, about, services,
       asqa, pet-industry, contact, case-studies
     - Carries a per-page editorial subhead (e.g., "Verified
       financial computation, scaled to SMEs.") + EDITION + place
     - Sits as a sidebar within the asymmetric hero composition

   .edition-meta (centered band below content)
     - Used on legal pages (privacy, terms) and article pages
       (insights + 3 articles)
     - Single line: "EDITION 01 · WOLLONGONG, NSW · MMXXVI"
     - Acts as a publication mark, not an editorial sidebar

   This split is intentional — branded pages get a per-page editorial
   register; utility/article pages get a uniform publication mark.
   Don't try to consolidate them without considering both registers.

   PRICING PATTERN
   ---------------
   services.html and asqa.html use different layouts on purpose:

   services.html — .service-card + .pricing-card grid
     - Lists multiple discrete services with one price each
     - Browse register: "what do you offer and at what price?"

   asqa.html — .ratios__table + .mode-card 2-col
     - Specialty/regulatory page with required ratio breakdown
       (the FVRA framework defines ~12 ratios — that IS the product)
     - Engagement modes (annual vs continuous monitoring) presented
       as 2-up cards comparing approach + price
     - Domain register: "here is the regulatory framework + how we
       engage with it"

   These are different content shapes, not inconsistencies.
   ════════════════════════════════════════════════════════════════ */

/* ── (A) Scroll-progress hairline ────────────────────────────────
   Editorial top-edge fill — transparent → gold as page is consumed.
   Not a percentage bar; reads as ink fill on a page edge. */
.scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  z-index: 9999;
  pointer-events: none;
  background: transparent;
}
.scroll-progress::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: var(--scroll-progress, 0%);
  background: linear-gradient(90deg,
    rgba(196, 151, 47, 0)    0%,
    rgba(196, 151, 47, 0.55) 40%,
    rgba(196, 151, 47, 0.85) 100%);
  transition: width 90ms linear;
}

/* ── (B) Hero ornament parallax ──────────────────────────────────
   Oversized italic Playfair words ("considered.", "rigorous." etc.)
   drift up subtly as page scrolls, suggesting depth behind text. */
.hero__ornament,
.page-hero__ornament {
  transform: translate3d(0, var(--hero-parallax, 0px), 0);
  will-change: transform;
}

/* ── (C) Section rule draw-in ────────────────────────────────────
   Two paths:
   (1) Opt-in: add class="section-rule" to any hairline divider.
   (2) Auto: existing `.section-divider` blocks (left rule + diamond +
       right rule) get the same treatment — rules draw outward from
       the diamond, diamond fades in afterward. */

/* Path 1: opt-in generic hairline */
.section-rule {
  position: relative;
  height: 1px;
  overflow: hidden;
  background: transparent;
}
.section-rule::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(15, 43, 60, 0.14);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-rule.in-view::after { transform: scaleX(1); }

/* Path 2: existing editorial diamond divider — auto-wired by atmospheric.js.
   Rules draw outward from the diamond (left rule scales from right,
   right rule scales from left). Diamond fades in after rules complete. */
.section-divider__rule {
  transform: scaleX(0);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}
.section-divider__inner > .section-divider__rule:first-child  { transform-origin: right center; }
.section-divider__inner > .section-divider__rule:last-child   { transform-origin: left  center; }
.section-divider.in-view .section-divider__rule { transform: scaleX(1); }

.section-divider__diamond {
  opacity: 0;
  transform: rotate(45deg) scale(0.6);
  transition: opacity 600ms ease 700ms, transform 600ms cubic-bezier(0.16, 1, 0.3, 1) 700ms;
}
.section-divider.in-view .section-divider__diamond {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

/* ── (D) Velocity-aware reveal ───────────────────────────────────
   When user is scrolling fast, collapse reveal transitions so
   content appears immediately — respect the reader's intent. */
body.scrolling-fast .reveal {
  transition-duration: 80ms !important;
}

/* ── (E) Navbar atmospheric shift ────────────────────────────────
   At top: navbar as-is. Once scrolled: gentle frosted blur +
   hairline gold under-rule appears. Threshold = 8px. */
.navbar {
  transition: backdrop-filter 320ms ease,
              -webkit-backdrop-filter 320ms ease,
              background-color 320ms ease,
              box-shadow 320ms ease;
}
body:not(.at-top) .navbar {
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  backdrop-filter: saturate(140%) blur(10px);
  box-shadow: 0 1px 0 rgba(196, 151, 47, 0.10);
}

/* ── (F) Custom selection color ──────────────────────────────────
   Gold-tinted highlight, navy text. Detail-level luxury. */
::selection {
  background-color: rgba(196, 151, 47, 0.28);
  color: #0F2B3C;
}
::-moz-selection {
  background-color: rgba(196, 151, 47, 0.28);
  color: #0F2B3C;
}

/* ── Baseline kinetic phrase styling ─────────────────────────────
   Inline gold italic Playfair. Page-scoped variants (e.g. the moat
   panel's animated reveal in index.html) override via specificity. */
.kinetic {
  font-family: var(--font-display, 'Playfair Display', Georgia, serif);
  font-style: italic;
  font-weight: 500;
  color: var(--gold-500, #C4972F);
}

/* ── (G) Letter-spacing breathing on reveal ──────────────────────
   Text inhales when it enters view: -0.005em → 0 over 700ms.
   Sub-perceptual unless you watch for it. */
.reveal { letter-spacing: -0.005em; }
.reveal.visible {
  letter-spacing: 0;
  transition: letter-spacing 700ms ease, opacity 700ms ease, transform 700ms ease;
}

/* ── Reduced-motion override ─────────────────────────────────────
   Every atmospheric effect quiets when user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress::after { transition: none !important; width: 0 !important; }
  .hero__ornament, .page-hero__ornament { transform: none !important; will-change: auto; }
  .section-rule::after { transform: scaleX(1) !important; transition: none !important; }
  .section-divider__rule { transform: scaleX(1) !important; transition: none !important; }
  .section-divider__diamond { opacity: 1 !important; transform: rotate(45deg) scale(1) !important; transition: none !important; }
  body.scrolling-fast .reveal { transition-duration: 0ms !important; }
  .navbar { transition: none !important; }
  .reveal, .reveal.visible { letter-spacing: 0 !important; transition: opacity 200ms ease !important; }
}