/* ============================================================================
   aesthetic-premium.css — curated design-system layer (2026-06-12)
   Loads after motion-premium.css and before the global a11y/kinetic layers.
   Additive only: a harmonized HSL token baseline + premium elevation scale +
   hero entrance/hover choreography.
   Every motion rule is reduced-motion-gated; transforms/opacity/box-shadow only
   (compositor-safe); NO backdrop-filter on atlas/grid surfaces (pinned by
   motion_premium_layer_contract — glass is reserved for single small panels).
   ============================================================================ */

/* ---- TOKENS: curated HSL palette + elevation scale ------------------------
   One hue family (222 navy-ink) for shadow work, a warmed gold reserved for
   pricing anchoring, with no unused decorative tokens. */
:root {
  --ap-gold-soft: hsl(42deg 95% 93%);
  --ap-elev-1: 0 1px 2px hsl(222deg 40% 12% / 0.05), 0 4px 12px hsl(222deg 40% 12% / 0.06);
  --ap-elev-2: 0 2px 4px hsl(222deg 40% 12% / 0.06), 0 12px 28px hsl(222deg 40% 12% / 0.10);
  --ap-elev-3: 0 4px 8px hsl(222deg 40% 12% / 0.08), 0 24px 48px hsl(222deg 40% 12% / 0.14);
  --ap-spring: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- HERO ENTRANCE: staggered rise for the CTA pair + proof strip ---------
   h1/subtitle already animate (text-gradient-drift / fadeUp); the CTAs and
   proof strip pop in with no choreography. Stagger them in under the headline
   so the first impression reads composed, not assembled. Gated + capped. */
@media (prefers-reduced-motion: no-preference) {
  :where(.home-cta-main, .home-cta-secondary, .home-proof-strip) {
    animation: ap-rise-in 0.65s var(--ap-spring) both;
  }
  :where(.home-cta-main) { animation-delay: 0.12s; }
  :where(.home-cta-secondary) { animation-delay: 0.22s; }
  :where(.home-proof-strip) { animation-delay: 0.34s; }
}
@keyframes ap-rise-in {
  from { opacity: 0; translate: 0 14px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---- CTA PREMIUM HOVER (secondary only): lift + bloom + press --------------
   motion-premium MOTION 5 (sibling lane, !important) owns .home-cta-main's
   hover; duplicating it here would dead-rule. This layer covers the SECONDARY
   CTA's hover + press and the 44px touch floor for BOTH CTAs. The later
   a11y-perfection layer owns keyboard focus rings globally. */
.home-cta-main,
.home-cta-secondary {
  min-height: 44px;
}
.home-cta-secondary {
  transition:
    transform 0.22s var(--ap-spring),
    box-shadow 0.22s var(--ap-spring);
}
@media (prefers-reduced-motion: no-preference) {
  .home-cta-secondary:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: var(--ap-elev-3);
  }
  .home-cta-secondary:active {
    transform: translateY(0) scale(0.98);
    box-shadow: var(--ap-elev-1);
  }
}

/* ---- GLASS PANEL: proof strip only (single small element — cheap) ---------
   Opaque dark surface + light ink keeps the facts readable and removes the
   last aesthetic-layer backdrop blur from the home hero. */
.home-proof-strip {
  padding: 12px 14px;
  background: #0b1528;
  border: 1px solid rgba(158, 203, 255, 0.32);
  border-radius: 14px;
  box-shadow: var(--ap-elev-1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.home-hero-focus .home-proof-strip span {
  color: #f6fbff !important;
  font-size: 0.82rem !important;
  line-height: 1.35;
  opacity: 1 !important;
}
.home-hero-focus .home-proof-strip strong {
  color: #9ecbff !important;
}

html,
body {
  background-color: #050508;
  scrollbar-color: #2563eb #050508;
}
::-webkit-scrollbar-track {
  background: #050508;
}

/* ---- DARK-HERO LEGIBILITY: light ink inside the dark home frame ------------
   The home hero moved to a dark navy frame (.home-frame, rgb 22 33 60) over a
   near-black body — but clinical-override (light-theme era) pins the hero
   wordmark/subtitle to dark ink with route-prefixed !important rules, leaving
   the LANDING HEADLINE at 1.09:1. Out-specify from this later layer, scoped to
   the dark frame so a light-hero revert simply stops matching the dark panel.
   #f6fbff on the navy frame ≈ 13:1; #c9d6ee ≈ 8.6:1 (AA/AAA). */
body[data-current-page="home"] .home-frame .home-wordmark,
body[data-current-page="home"] .home-frame .home-wordmark *,
body[data-current-page="home"] .home-frame .home-title-lockup,
body[data-current-page="home"] .home-frame .home-title-lockup * {
  color: #f6fbff !important;
  -webkit-text-fill-color: #f6fbff !important;
}
body[data-current-page="home"] .home-frame .home-subtitle,
body[data-current-page="home"] .home-frame .home-subtitle * {
  color: #c9d6ee !important;
  -webkit-text-fill-color: #c9d6ee !important;
}

/* ---- PRICING GOLD ANCHOR: recommended tier framing --------------------------
   Anchoring: the recommended card (.price-card-plus, "Free today") carries the
   curated gold — warm border, soft gold wash, resting elevation, and a slow
   gated halo shimmer — so the eye lands there first against the plain tiers.
   --ap-gold-text (hsl 40 95% 30%) is the TEXT-grade gold: 5.0:1 on white. */
:root {
  --ap-gold-text: hsl(40deg 95% 30%);
  --ap-gold-halo: 0 0 0 1px hsl(40deg 90% 45% / 0.55), 0 10px 30px hsl(40deg 90% 38% / 0.18);
}
.section-buy .price-card-plus,
.pricing-grid .price-card-plus {
  position: relative;
  border-color: hsl(40deg 90% 45% / 0.75) !important;
  background:
    linear-gradient(180deg, var(--ap-gold-soft), hsl(0deg 0% 100% / 0) 38%) !important;
}
/* halo lives on a pseudo-layer: card-level !important rules elsewhere cannot
   reach it, and the shimmer animates OPACITY (compositor-safe, un-overridable
   by static box-shadow declarations). */
.section-buy .price-card-plus::after,
.pricing-grid .price-card-plus::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: var(--ap-gold-halo), var(--ap-elev-2);
  opacity: 0.85;
}
.price-card-plus .price-tier-label {
  color: var(--ap-gold-text) !important;
  -webkit-text-fill-color: var(--ap-gold-text) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .section-buy .price-card-plus::after,
  .pricing-grid .price-card-plus::after {
    animation: ap-gold-halo 5.5s ease-in-out infinite alternate;
  }
}
@keyframes ap-gold-halo {
  from { opacity: 0.55; }
  to { opacity: 1; }
}

/* ---- EXPLICIT REDUCED-MOTION FALLBACK (boundary contract) ------------------
   Belt over the gating: under reduce, every animation/transition this layer
   introduces is statically neutralized. */
@media (prefers-reduced-motion: reduce) {
  .home-cta-main,
  .home-cta-secondary,
  .home-proof-strip,
  .price-card-plus::after,
  .market-loop-stage {
    animation: none !important;
    transition: none !important;
  }
}