/* =========================================================
   Learning Rewired Lab — Perspectives (redesign)
   Page-specific styles. Pairs with global.css + perspectives.js.
   Layout is inline on the elements; this file holds only what
   inline styles can't express (keyframes, media queries,
   hover states).
   ========================================================= */

.pv-page { box-sizing: border-box; }
.pv-page *, .pv-page *::before, .pv-page *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.pv-page main { overflow: hidden; }
.pv-page ::selection { background: rgba(112,72,232,.22); }

/* ---- keyframes ---- */
@keyframes pv-pulse { 0%,100% { opacity:.4; } 50% { opacity:1; } }
@keyframes pv-sheen { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes pv-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .pv-float { animation: none !important; } }

/* ---- hover states ---- */
.h-violet:hover { filter:brightness(1.07); }
.h-mint:hover   { background:#ffffff !important; }
.h-ink:hover    { background:rgba(255,255,255,.14) !important; }
.h-ghost:hover  { border-color:#7048e8 !important; color:#5b34c9 !important; }
.h-link:hover   { color:#07111f !important; }
.pv-opt:hover   { border-color:rgba(196,181,253,.6) !important; }
.pv-chip:hover  { border-color:rgba(112,72,232,.45) !important; color:#5b34c9 !important; }

.h-card { transition:transform .2s, box-shadow .2s, border-color .2s; }
.h-card:hover { transform:translateY(-3px); box-shadow:0 18px 40px rgba(15,23,42,.1) !important; border-color:var(--pa) !important; }
.h-card:hover .h-card-cta { gap:10px !important; }

.pv-lane { transition:border-color .2s, background .2s; }
.pv-lane:hover { border-color:rgba(112,72,232,.4) !important; background:#fbfaff !important; }

/* ---- responsive ---- */
@media (max-width: 980px) {
  [data-r="hero"], [data-r="dx"], [data-r="ask"] { grid-template-columns: 1fr !important; gap: 0 !important; }
  [data-r="hero"] { gap: 40px !important; }
  [data-r="dx"] > div:first-child { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }
  [data-r="h1"] { font-size: 46px !important; }
  [data-r="lib"], [data-r="moves"], [data-r="lanes"] { grid-template-columns: 1fr 1fr !important; }
  [data-r="ask"] { gap: 26px !important; }
}
@media (max-width: 600px) {
  [data-r="h1"] { font-size: 37px !important; }
  [data-r="dx-opts"], [data-r="lib"], [data-r="moves"], [data-r="lanes"] { grid-template-columns: 1fr !important; }
  [data-r="sec-h"] { font-size: 30px !important; }
}