/* ============================================================================
   PM Media — Pro Polish Overlay ($50k-agency tier)
   ----------------------------------------------------------------------------
   SAFE / NON-BREAKING / OVERRIDE-ONLY. Loaded LAST (after pm-glass-8k.css).
   Reuses existing design tokens from site.css (--cyan, --magenta, --bg,
   --text, --ease-out, fonts). Additive polish only — no structural changes,
   nothing hidden without a guaranteed visible default.
   ============================================================================ */

:root {
  /* New easing token requested for cinematic motion. */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --polish-lift: -2px;
  --polish-ring: rgba(0, 212, 238, 0.9);
  --polish-shadow-cyan: 0 18px 44px -18px rgba(0, 212, 238, 0.22);
  --polish-shadow-magenta: 0 18px 44px -18px rgba(232, 50, 138, 0.20);
  --polish-inner-hi: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --polish-squircle: 16px;
}

/* ------------------------------------------------------------------ */
/* 1. TYPE RHYTHM                                                       */
/* ------------------------------------------------------------------ */
:where(h1, h2, h3) {
  text-wrap: balance;
}
:where(p, li, blockquote, figcaption) {
  text-wrap: pretty;
}

/* Tighter tracking on large display headings for an editorial feel. */
:where(h1) {
  letter-spacing: -0.02em;
}
:where(h2) {
  letter-spacing: -0.015em;
}

/* Constrain body/paragraph measure so long copy doesn't run wide.
   Scoped to flow paragraphs; leaves layout-critical text (buttons,
   pills, nav, marquees, grid cells) alone by opting only into <p>. */
.section p:not([class*="marquee"]):not([class*="pill"]):not([class*="btn"]) {
  max-width: 68ch;
}
/* Keep intentionally-centered paragraphs centered. */
.section p[style*="margin:0 auto"],
.section p[style*="margin: 0 auto"],
.section [class*="center"] p {
  margin-left: auto;
  margin-right: auto;
}

/* ------------------------------------------------------------------ */
/* 2. SPACING & RHYTHM                                                  */
/* ------------------------------------------------------------------ */
/* Gentle minimum vertical breathing for sections that run cramped.
   Low-specificity :where() so any existing rule still wins if needed. */
:where(.section) {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

/* Consistent container measure (matches existing --max). */
:where(.container) {
  max-width: min(var(--max, 1200px), 92vw);
}

/* ------------------------------------------------------------------ */
/* 3. MOTION — smooth cubic transitions, magnetic CTAs                  */
/* ------------------------------------------------------------------ */
:where(a, button, .btn, [role="button"], .position-pillar, .card, [class*="card"], [class*="pill"]) {
  transition:
    transform 0.5s var(--ease-expo),
    opacity 0.5s var(--ease-expo),
    box-shadow 0.5s var(--ease-expo),
    border-color 0.5s var(--ease-expo),
    background-color 0.5s var(--ease-expo);
}

/* Magnetic CTA feel — transform/opacity only (no layout shifts). */
:where(.btn, button, [role="button"], a.btn):hover {
  transform: translateY(var(--polish-lift));
}
:where(.btn, button, [role="button"], a.btn):active {
  transform: scale(0.98);
}

/* Cards lift subtly on hover. */
:where(.position-pillar, .card, [class*="-card"]):hover {
  transform: translateY(var(--polish-lift));
}

/* ------------------------------------------------------------------ */
/* 4. SURFACES — tinted shadows, inner highlight, squircle radii        */
/* ------------------------------------------------------------------ */
:where(.position-pillar, .card, [class*="-card"]) {
  border-radius: var(--polish-squircle);
  box-shadow:
    var(--polish-inner-hi),
    var(--polish-shadow-cyan);
}
:where(.position-pillar, .card, [class*="-card"]):hover {
  box-shadow:
    var(--polish-inner-hi),
    var(--polish-shadow-magenta),
    0 26px 60px -22px rgba(0, 0, 0, 0.55);
}

/* Pills — softer radius + subtle inner highlight + refined hover. */
:where([class*="pill"]) {
  box-shadow: var(--polish-inner-hi);
}

/* Nav pills — a touch more breathing room + crisp hover. */
:where(.pm-header-pills a, nav a[class*="pill"], .nav a) {
  transition:
    color 0.35s var(--ease-expo),
    background-color 0.35s var(--ease-expo),
    transform 0.35s var(--ease-expo);
}
:where(.pm-header-pills a, nav a[class*="pill"]):hover {
  transform: translateY(-1px);
}

/* ------------------------------------------------------------------ */
/* 5. FOCUS & A11Y                                                      */
/* ------------------------------------------------------------------ */
:where(a, button, input, textarea, select, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--polish-ring);
  outline-offset: 3px;
  border-radius: 8px;
}

::selection {
  background: rgba(0, 212, 238, 0.28);
  color: var(--text, #f4f4fa);
  text-shadow: none;
}

/* ------------------------------------------------------------------ */
/* 6. MARQUEE SAFETY — keep clipped, DO NOT stop animation             */
/* ------------------------------------------------------------------ */
:where(.pm-noon-marquee, .neon-marquee, [class*="marquee"]:not([class*="track"])) {
  overflow: hidden;
}
/* Never override the track transform/animation — leave motion intact. */

/* ------------------------------------------------------------------ */
/* 7. MOBILE — comfortable tap targets, no overflow @ 390px            */
/* ------------------------------------------------------------------ */
@media (max-width: 768px) {
  :where(.section) {
    padding-block: clamp(3.5rem, 12vw, 5.5rem);
  }
  :where(a.btn, button.btn, .btn, [role="button"]) {
    min-height: 44px;
  }
  :where(.container) {
    max-width: 100%;
  }
}

/* ------------------------------------------------------------------ */
/* 8. REDUCED MOTION                                                    */
/* ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  :where(a, button, .btn, [role="button"], .position-pillar, .card, [class*="card"], [class*="pill"]) {
    transition: none;
  }
  :where(.btn, button, [role="button"], a.btn):hover,
  :where(.btn, button, [role="button"], a.btn):active,
  :where(.position-pillar, .card, [class*="-card"]):hover,
  :where(.pm-header-pills a, nav a[class*="pill"]):hover {
    transform: none;
  }
}