/* ============================================================
   TERYLI - cine overlay (loads AFTER teryli-site.css)
   Cinematic layer on top of the base system. ONLY additions,
   correctly scoped: light-text rules apply to NAVY surfaces only.
   Spoke/hub/directory-offer heroes are CREAM - the base AA inks
   already handle them; do not touch them here.
   ============================================================ */

/* ---------- film grain (subtle, sits above everything) ---------- */
.grain {
  position: fixed; inset: -100px; z-index: 9000;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grainShift 1.2s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-30px, 20px); }
  50% { transform: translate(20px, -30px); }
  75% { transform: translate(-20px, -20px); }
  100% { transform: translate(0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  html { scroll-behavior: auto; }
}

/* ---------- gold CTA lift (base colors kept, motion added) ---------- */
.nav__cta,
.btn--primary {
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .3s;
  box-shadow: 0 10px 30px -12px rgba(184, 137, 58, 0.45);
}
.nav__cta:hover,
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -14px rgba(184, 137, 58, 0.6);
}

/* ---------- framed screenshots get depth glow on navy ---------- */
.section--navy .frame {
  box-shadow:
    0 2px 4px rgba(10, 27, 42, 0.22),
    0 24px 48px -16px rgba(10, 27, 42, 0.40),
    0 72px 120px -48px rgba(10, 27, 42, 0.55);
}

/* ---------- contrast hardening - NAVY surfaces only ---------- */
.section--navy .lede { color: rgba(242, 239, 231, 0.9); }

/* ghost buttons on NAVY sections: visible light outline */
.section--navy .btn--ghost {
  box-shadow: inset 0 0 0 1.5px rgba(242, 239, 231, 0.5);
  color: var(--on-navy);
}
.section--navy .btn--ghost:hover {
  box-shadow: inset 0 0 0 1.5px rgba(242, 239, 231, 0.78);
}

/* ---------- active nav indicator (gold underline) ---------- */
.nav__links a[aria-current="page"] { position: relative; }
.nav__links a[aria-current="page"]::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -7px;
  height: 2px; border-radius: 2px;
  background: var(--gold);
}

/* ---------- display type: prevent orphan words ---------- */
.display, .h-section { overflow-wrap: break-word; }
@media (max-width: 960px) {
  h1.display, .display {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }
}

/* ---------- prose pages: keep left-aligned measure ---------- */
.legal__lede, .page-prose, .prose { text-align: left; }