/* AstroPrecise — Hollywood 2026 cinematic layer
   Interstellar observatory luxury · perf-safe (static grain, transform-only hovers)
   Tokens: instrument-panel.css (--ip-bracket-*, --ip-cine-*) */

/* ── Film grain — REMOVED (calming pass): the body/html ::after SVG-turbulence
   overlay added perpetual GPU cost + visual noise. Deleted entirely. It was a
   fixed full-viewport pointer-events:none decorative layer, never load-bearing,
   so removing it shifts no layout. ─────────────────────────────────────────── */

/* ── Page vignette depth (stacked radials — sits above void) ── */
body.ap-cinematic-2026 {
  --_cine-vignette-edge: var(--ip-cine-vignette, rgba(12, 16, 22, 0.55));
}

body.ap-cinematic-2026 main {
  isolation: isolate;
}

/* ── Hero typography glow — FROZEN (calming pass) ──────────────────────
   Was an infinite ap-cine-h1-glow pulse on the hero title. Replaced with a
   single STILL gold text-shadow (the static mid-point of the old keyframe,
   minus the pulsing peak). No animation, no keyframe. ─────────────────── */
.ap-cine-h1-glow,
html.ap-lite-hero .hero__h1,
.page-chart .chart-hero__title,
.page-horoscope .sphere-hero__header h1,
.page-instrument .instrument-hero .instrument-title,
.page-shop .shop-hero__title {
  text-shadow:
    0 2px 24px rgba(12, 16, 22, 0.94),
    0 1px 8px rgba(12, 16, 22, 0.72),
    0 0 22px rgba(168, 176, 188, 0.18),
    0 0 1px rgba(232, 224, 208, 0.4);
}

/* ── Shared corner bracket / engraved frame system ────────────────── */
.page-chart .chart-wheel-stage .chart-wheel-card {
  --_bs: var(--ip-bracket-size, 22px);
  --_bi: var(--ip-bracket-inset, 10px);
  --_bc: var(--ip-bracket-color, rgba(168, 176, 188, 0.42));
  overflow: hidden;
  z-index: 2;
}

/* Chart-wheel corner brackets calmed (calming pass): the base L-bracket geometry
   lives in chart-page-deferred.css; here we only DROP this file's cinematic
   amplification (the gold glow box-shadow + near-opaque render) and let the
   restrained base brackets stand still. No content/position touched → no shift. */
.page-chart .chart-wheel-stage .chart-wheel-card::before,
.page-chart .chart-wheel-stage .chart-wheel-card::after {
  border-color: var(--_bc);
  opacity: 0.6;
  box-shadow: none;
}

/* Engraved 8-gradient corner brackets REMOVED (calming pass).
   Replaced with a single restrained 1px gold inset border, shown only on hover.
   ::after kept as the carrier box (was pointer-events:none decoration only —
   not load-bearing; inset/border-radius preserved so nothing shifts). */
.instrument-hero__panel.instrument-panel::after {
  content: '';
  position: absolute;
  inset: var(--ip-bracket-inset, 10px);
  border-radius: calc(var(--ip-radius-lg, 28px) - 6px);
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color 0.25s ease;
}

.instrument-hero__panel.instrument-panel:hover::after {
  border-color: var(--ip-bracket-color, rgba(168, 176, 188, 0.42));
}

/* Engraved corner brackets REMOVED (calming pass) → single restrained 1px gold
   inset border, hover-only. ::before kept as the carrier box (was decoration
   only, pointer-events:none — not load-bearing; inset/radius preserved). */
.shopc-featured__card::before,
.shop-card::before,
.shopc-card::before,
.ap-tool-card::before,
.shop-how__step::before {
  content: '';
  position: absolute;
  inset: 8px;
  z-index: 2;
  border-radius: calc(var(--radius-xl, 20px) - 4px);
  pointer-events: none;
  border: 1px solid transparent;
  transition: border-color 0.25s ease;
}

/* .shop-how__step lacks position:relative in shop.css — anchor the border box */
.shop-how__step {
  position: relative;
}

.shopc-featured__card:hover::before,
.shop-card:hover::before,
.shopc-card:hover::before,
.ap-tool-card:hover::before,
.shop-how__step:hover::before {
  border-color: var(--ip-bracket-color, rgba(168, 176, 188, 0.42));
}

/* ── Card specular sweep + lens flares REMOVED (calming pass) ─────────────
   The animated specular "sweep" ::after highlights (cards, chart inner mount,
   instrument lede) and the lens-flare ::after glow circles (chart/horoscope/
   instrument/shop/lite-hero stages) were all pointer-events:none decorative
   overlays — never load-bearing, so deletion shifts no layout. The .instrument-
   lede position:relative/overflow and .natal-wheel-container position:relative
   are retained below (functional containers used elsewhere), just without the
   sweep pseudo-element. ──────────────────────────────────────────────────── */
.instrument-hero__panel .instrument-lede {
  position: relative;
  overflow: hidden;
}

.page-chart .natal-wheel-container {
  position: relative;
}

/* ── Hero / stage vignette — collapsed to ONE subtle bottom fade (calming pass).
   Was a 2-layer stacked radial (full-edge ring + bottom pool); kept only the
   gentle bottom fade so depth remains without the heavy darkened frame. ──── */
.ap-cine-vignette::before,
.page-chart .chart-wheel-stage::before,
.page-horoscope .sphere-wrap::before,
.page-instrument .instrument-hero::before,
.page-shop .shop-hero::before,
html.ap-lite-hero .hero__orrery-layer::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 100%, rgba(12, 16, 22, 0.32) 0%, transparent 72%);
}

/* Chart wheel stage — halo + meridian polish */
.page-chart .chart-wheel-stage {
  isolation: isolate;
}

.page-chart .chart-wheel-stage::before {
  z-index: 0;
  inset: -2%;
  border-radius: 50%;
}

/* lens-flare ::after removed (calming pass) — positioning rule deleted */

.page-chart .chart-wheel-stage__halo {
  z-index: 0;
  box-shadow:
    inset 0 0 80px rgba(12, 16, 22, 0.45),
    0 0 120px rgba(168, 176, 188, 0.06);
}

.page-chart .chart-wheel-stage__meridian {
  z-index: 0;
  opacity: 0.62;
  filter: drop-shadow(0 0 18px rgba(168, 176, 188, 0.12));
}

/* Horoscope sphere hero */
.page-horoscope .sphere-hero {
  isolation: isolate;
}

/* lens-flare ::after removed (calming pass) — positioning rule deleted */

.page-horoscope .sphere-wrap {
  position: relative;
  z-index: 1;
}

.page-horoscope .sphere-wrap::before {
  border-radius: 50%;
  inset: -8%;
}

.page-horoscope .sphere-hero__header {
  position: relative;
  z-index: 2;
}

/* Ephemeris instrument hero — layer above page defaults */
.page-instrument .instrument-hero {
  isolation: isolate;
}

/* Vignette collapsed to a single subtle bottom fade (calming pass) — the violet
   + gold mid-glows and the full-edge ring were stacked depth layers, now gone. */
.page-instrument .instrument-hero::before {
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(12, 16, 22, 0.30) 0%, transparent 70%);
}

/* lens-flare ::after removed (calming pass) — positioning rule deleted */

/* Shop hero — vignette collapsed to a single subtle bottom fade (calming pass) */
.page-shop .shop-hero::before {
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(12, 16, 22, 0.30) 0%, transparent 70%);
}

/* lens-flare ::after removed (calming pass) — positioning rule deleted */

/* Index lite hero */
html.ap-lite-hero .hero__stage {
  position: relative;
  isolation: isolate;
}

/* lens-flare ::after removed (calming pass) — positioning rule deleted */

html.ap-lite-hero .hero__orrery-layer::before {
  border-radius: 50%;
  inset: -4%;
  z-index: 0;
}

html.ap-lite-hero .lite-poster-vignette {
  box-shadow:
    inset 0 0 60px rgba(12, 16, 22, 0.55),
    inset 0 0 120px rgba(12, 16, 22, 0.28);
}

/* Chart page hero — lens-flare ::after REMOVED (calming pass), vignette collapsed
   to a single subtle bottom fade (was a 2-layer edge-ring + burgundy mid-glow). */
.page-chart .chart-hero {
  isolation: isolate;
}

.page-chart .chart-hero__cosmic-art {
  background:
    radial-gradient(ellipse 60% 35% at 50% 100%, rgba(12, 16, 22, 0.30) 0%, transparent 70%);
}

/* ── Reduced motion ───────────────────────────────────────────────────
   The hero title is now a STILL gold shadow (no animation) and the specular
   sweep / lens-flare pseudo-elements are gone, so there is no ambient motion
   left in this file to disable. This block now only normalizes the title
   shadow under reduced-motion as a belt-and-suspenders guarantee. ──────── */
@media (prefers-reduced-motion: reduce) {
  .ap-cine-h1-glow,
  html.ap-lite-hero .hero__h1,
  .page-chart .chart-hero__title,
  .page-horoscope .sphere-hero__header h1,
  .page-instrument .instrument-hero .instrument-title,
  .page-shop .shop-hero__title {
    animation: none;
    text-shadow:
      0 2px 24px rgba(12, 16, 22, 0.94),
      0 0 22px rgba(168, 176, 188, 0.18);
  }
}

/* ── Wave 3: flat-hero cinematic glow ─────────────────────────────────
   Lift the ~17 flat page heroes toward the premium chart/horoscope look.
   SAFE technique only: color + text-shadow (no reflow → CLS-safe).
   Deliberately NO font-family (preserves each page's tuned LCP min-heights)
   and NO ::before/::after vignettes (box-coupled, structure-risky).
   Glow values mirror the static peak of the cinematic h1-glow keyframe
   (gold rgba(168, 176, 188,...) + parchment light text), without animating —
   these heroes have no animation hook, so a steady glow is the safe match. */
.syn-hero h1,
.tn-hero h1,
.mp-hero h1,
.retro-hero h1,
.rs-hero h1,
.sat-hero h1,
.sr-hero h1,
.compat-hero h1,
.why-hero h1,
.acc-hero h1,
.mc-hero h1,
.lp-hero h1,
.nn-hero h1,
.an-hero h1,
.sign-hero h1 {
  color: var(--gold-hero-light, #E8EBF0);
  text-shadow:
    0 2px 24px rgba(12, 16, 22, 0.94),
    0 0 34px rgba(168, 176, 188, 0.20),
    0 0 1px rgba(232, 224, 208, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ══════════════════════════════════════════════════════════════════════════
   Wave 4 — section display titles + engraved ornaments + cinematic bands
   All OPT-IN classes: nothing existing reflows. CLS-safe (no font swap on any
   min-height-tuned title; these are NEW classes the HTML opts into).
   Literal rgba/hex fallbacks kept on every token.
   ══════════════════════════════════════════════════════════════════════════ */

/* Large display-title tier — gives sections the cinematic scale of heroes.
   Opt-in only; must NOT be applied to tuned LCP hero titles. */
.ap-section-display {
  font-family: var(--font-display, Georgia, 'Times New Roman', serif);
  font-size: clamp(1.5rem, 3.4vw, 2.3rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: 0.03em;
  color: var(--ap-gold-parchment, #E8EBF0);
  background: linear-gradient(
    135deg,
    var(--ap-gold-parchment, #E8EBF0) 0%,
    var(--ap-gold-bright, #D4B84A) 55%,
    var(--ap-gold-parchment, #E8EBF0) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 rgba(0, 0, 0, 0.35),
    0 0 28px rgba(168, 176, 188, 0.10);
  margin: 0 auto var(--space-4, 1rem);
  max-width: 22ch;
}

/* Literal-color fallback where background-clip:text is unsupported */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .ap-section-display {
    -webkit-text-fill-color: currentColor;
    color: var(--ap-gold-parchment, #E8EBF0);
  }
}

/* Centered engraved ornament rule — mirrors the hero eyebrow double-rule */
.ap-ornament-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 0.75rem);
  margin: var(--space-8, 2rem) auto;
  max-width: 360px;
  color: var(--ap-gold-core, #A8B0BC);
}

.ap-ornament-rule::before,
.ap-ornament-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ap-gold-a40, rgba(168, 176, 188, 0.40)));
}

.ap-ornament-rule::after {
  background: linear-gradient(90deg, var(--ap-gold-a40, rgba(168, 176, 188, 0.40)), transparent);
}

.ap-ornament-rule__mark {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  opacity: 0.85;
}

/* Opt-in cinematic band — reuses hero vignette tokens behind any section.
   Paints below content (z-index:-1), pointer-events:none → fully passive. */
.ap-cine-band {
  position: relative;
  isolation: isolate;
}

.ap-cine-band::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 78% at 50% 38%, transparent 56%, var(--_cine-vignette-edge, rgba(12, 16, 22, 0.40)) 100%),
    radial-gradient(ellipse 80% 60% at 50% 22%, var(--ap-obs-violet, rgba(92, 74, 110, 0.14)) 0%, transparent 72%);
}