/* ============================================================
   premium-home.css — shared premium vocabulary for the six
   Ui.HomeLayout start views (playtypus-startvyer-strategi.md,
   2026-07-26).

   premium.css already gave ActivityDetail's own *frame* (title
   typography, chips, scroll-edge gradients, spring entrance, etc.)
   a premium pass; B1's category-glow already reaches every card
   everywhere via the shared CardVisual component, so it needed no
   duplicate here. What was missing was the equivalent treatment for
   each start view's *own* frame — headers, CTAs, containers,
   overlays, empty-states — code that lives in v14-additions.css/
   v18-additions.css, not in a shared component. This file is that
   layer: five reusable building blocks, extracted once so all six
   views draw from the same source instead of six independent
   experiments.

   Load right after ui-variants.css and before v14-additions.css —
   "tokens first, then applications" is the same ordering already
   used for ui-variants.css itself. MUST be added to BOTH
   Playtypus.App/wwwroot/index.html and Playtypus.Web/wwwroot/
   index.html (same reminder v18-additions.css's header already
   gives — easy to add to one host and forget the other).

   Scope: the 5 building blocks from strategy section 5 only.
   Per-view application of them lives in v14-additions.css (Dashboard)
   and v18-additions.css (Map/Today/Magazine/Search/Sections).
   ============================================================ */

/* ── Building block 1: entrance animation ────────────────────────────────
   Same spring curve as premium.css's A9 (slideUpSpring), reshaped as a
   gentle fade+rise rather than a slide-up-from-offscreen — a start view's
   whole content mounting at once reads better as "settling in" than as
   something arriving from below the viewport the way a single detail
   panel does. Apply by adding the .premium-home-entrance class directly
   in markup on each view's top-level element.
   ────────────────────────────────────────────────────────────────────── */
@keyframes premiumHomeEntrance {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
.premium-home-entrance {
  animation: premiumHomeEntrance 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* ── Building block 2: category-tinted glow ──────────────────────────────
   Identical drop-shadow values to premium.css's B1, extended to targets
   B1 itself never covered: dashboard-tile__icon, the map's category
   section headers, and sections-home__row-title's emoji. Apply by adding
   the .premium-glow class plus a data-category attribute (same values as
   Activity.Category — movement/move, creative/create, calm, social,
   think) to the element that should glow.
   ────────────────────────────────────────────────────────────────────── */
.premium-glow[data-category="movement"],
.premium-glow[data-category="move"] {
  filter: drop-shadow(0 4px 16px rgba(59, 130, 246, 0.3));
}
.premium-glow[data-category="creative"],
.premium-glow[data-category="create"] {
  filter: drop-shadow(0 4px 16px rgba(236, 72, 153, 0.3));
}
.premium-glow[data-category="calm"] {
  filter: drop-shadow(0 4px 16px rgba(139, 92, 246, 0.3));
}
.premium-glow[data-category="social"] {
  filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.3));
}
.premium-glow[data-category="think"] {
  filter: drop-shadow(0 4px 16px rgba(245, 158, 11, 0.3));
}

/* ── Building block 3: frosted glass for overlay controls ────────────────
   Same treatment as premium.css's B3 (.detail-close-btn). Apply by adding
   .premium-frosted alongside a view's own BEM class wherever a control
   floats over photo/map/media content. Currently reserved for the future
   magazine hero controls this strategy names as a candidate — the map's
   Leaflet attribution control needs the identical values today, but
   Leaflet generates that element's markup itself at runtime, so this
   class can't be applied to it directly; see v18-additions.css's
   .leaflet-control-attribution rule, which duplicates these exact values
   rather than referencing this class.
   ────────────────────────────────────────────────────────────────────── */
.premium-frosted {
  background: rgba(0, 0, 0, 0.55);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── Building block 4: horizontal scroll-edge fade ───────────────────────
   Same *purpose* as premium.css's A6/A7 (signal "there's more to scroll"),
   adapted technique: A6/A7 use a sticky-positioned gradient overlay,
   which works for vertical scroll but doesn't translate cleanly to a
   horizontal shelf without extra wrapper markup. A mask-image achieves
   the identical visual cue — fading whatever card currently sits at the
   edge — with no markup changes and no z-index/pointer-events bookkeeping.
   Apply directly to the scrolling element itself (sections-home__row-scroll).
   ────────────────────────────────────────────────────────────────────── */
.premium-scroll-fade-x {
  -webkit-mask-image: linear-gradient(
    to right, transparent, black 20px, black calc(100% - 20px), transparent
  );
  mask-image: linear-gradient(
    to right, transparent, black 20px, black calc(100% - 20px), transparent
  );
}

/* ── Building block 5: consistent hover/press physics ────────────────────
   One shared transition/lift/press vocabulary instead of each view tuning
   its own numbers. dashboard-tile already had its own hover/active states
   before this strategy, and the map's pins-list buttons inherit those for
   free (they carry the dashboard-tile class too — see MapHomeView.razor).
   The real gap was magazine-home__hero and search-home__shortcut, which
   had no hover/press feedback at all; both now carry this class directly
   in markup.
   ────────────────────────────────────────────────────────────────────── */
.premium-hover-lift {
  transition: transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.premium-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-hover);
}
.premium-hover-lift:active {
  transform: scale(0.97);
}

/* ── Prefers-reduced-motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .premium-home-entrance { animation: none; }
  .premium-hover-lift, .premium-hover-lift:hover, .premium-hover-lift:active {
    transform: none;
  }
}