/* card-fx.css, shared card micro-interactions.
 * Tools tiles: V3 icon panel (gold edge for Start-here, navy for section
 * tiles) + V6 click ripple. Related-Tools-and-Guides cards: V5 3D tilt +
 * gold cursor glow. Home popular cards: gold cursor glow only.
 * All motion is gated behind prefers-reduced-motion and coarse pointers.
 * Scoped to the .cardfx / .cardfx-glowcard marker classes added by card-fx.js
 * so no other component is affected. */

/* ---------- Tools tiles: icon panel + ripple (V3 + V6) ---------- */
.tm-tile.cardfx,
.tm-start-card.cardfx {
  display: flex;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
  position: relative;
}
.cardfx-panel {
  flex: none;
  width: 52px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  transition: width .26s cubic-bezier(.2,.7,.3,1);
}
.tm-tile.cardfx .cardfx-panel {
  background: linear-gradient(160deg, var(--color-primary), #06162a);
  color: var(--color-accent-light);
}
.tm-start-card.cardfx .cardfx-panel {
  background: linear-gradient(160deg, var(--color-accent), #8a5e12);
  color: #06162a;
}
.cardfx-body { flex: 1 1 auto; min-width: 0; padding: .8rem .95rem; }
.tm-start-card.cardfx .cardfx-body { padding: 1rem 1.1rem; }
/* the icon panel replaces the original inline Start-here icon */
.tm-start-card.cardfx .tm-start-icon { display: none; }
.tm-tile.cardfx:hover .cardfx-panel,
.tm-tile.cardfx:focus-visible .cardfx-panel,
.tm-start-card.cardfx:hover .cardfx-panel,
.tm-start-card.cardfx:focus-visible .cardfx-panel { width: 64px; }

/* keep the absolute type badge anchored to the card, not the panel */
.tm-tile.cardfx { position: relative; }
.tm-tile.cardfx .tm-badge { right: .7rem; top: .7rem; }

/* ---------- Click ripple (V6) ---------- */
.cardfx-ripple {
  position: absolute;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 38%, transparent);
  transform: scale(0);
  animation: cardfx-rip .6s ease-out;
  pointer-events: none;
  z-index: 3;
}
@keyframes cardfx-rip { to { transform: scale(2.6); opacity: 0; } }

/* ---------- Tilt + cursor glow (V5) for rel-cards, glow-only for home ---------- */
.cardfx-glowcard { position: relative; overflow: hidden; }
.rel-card.cardfx-glowcard {
  transform-style: preserve-3d;
  transition: transform .12s ease-out, box-shadow .2s, border-color .12s;
  will-change: transform;
}
.cardfx-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  border-radius: inherit;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%),
              color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 60%);
}
.cardfx-glowcard:hover .cardfx-glow { opacity: 1; }
/* keep card content above the glow layer */
.cardfx-glowcard > :not(.cardfx-glow) { position: relative; z-index: 1; }

/* ---------- Accessibility / input guards ---------- */
@media (prefers-reduced-motion: reduce) {
  .cardfx-panel { transition: none; }
  .rel-card.cardfx-glowcard { transition: none; }
  .cardfx-glow { display: none; }
  .cardfx-ripple { display: none; }
}
@media (pointer: coarse) {
  .rel-card.cardfx-glowcard { transform: none !important; }
}

/* ---------- Pop + gold-halo cards (clickable rating tiers + explore cards) ----------
 * .cardfx-pop = gold cursor glow (via card-fx.js attachGlow) + a slight lift/scale
 * on hover. No 3D tilt. Used on condition-guide rating levels and the "go deeper"
 * explore cards. */
.cardfx-pop { transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .2s, border-color .12s; }
.cardfx-pop:hover, .cardfx-pop:focus-visible { transform: translateY(-3px) scale(1.015); box-shadow: var(--shadow-lg); }

/* clickable rating-tier becomes a link but keeps the card look */
a.rating-tier { display: block; text-decoration: none; color: inherit; }
a.rating-tier:hover .pct, a.rating-tier:focus-visible .pct { text-decoration: underline; }

/* Standardized rating-tier card (one per rating level). Shared so every
 * condition guide renders the same way. A guide may still have its own inline
 * copy; these values match the original sleep-apnea style. */
.rating-tier { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm, 6px); padding: .85rem 1.1rem; margin-bottom: .65rem; }
.rating-tier h4 { margin-top: 0; margin-bottom: .35rem; color: var(--color-primary); display: flex; align-items: baseline; gap: .55rem; }
.rating-tier h4 .pct { font-size: 1.4rem; font-weight: 800; min-width: 3.5rem; }
.rating-tier h4 .desc { font-size: .92rem; font-weight: 600; color: var(--color-text); }
.rating-tier p { font-size: .9rem; line-height: 1.6; margin: 0; color: var(--color-text); }
@media (max-width: 640px) {
  .rating-tier h4 { flex-direction: column; gap: 0; }
  .rating-tier h4 .pct { font-size: 1.2rem; }
}

/* "Go deeper" full-width clickable card (placed after a rating-criteria section) */
.deepdive-card { display: block; text-decoration: none; background: var(--color-surface); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-md, 10px); padding: 1.1rem 1.3rem; margin: 1.4rem 0 2.4rem; }
.deepdive-card .dd-head { display: block; font-weight: 700; color: var(--color-primary); font-size: 1rem; margin-bottom: .5rem; }
.deepdive-card .dd-bullets { margin: 0 0 .55rem; padding-left: 1.15rem; }
.deepdive-card .dd-bullets li { font-size: .88rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: .15rem; }
.deepdive-card .dd-go { display: inline-block; font-size: .85rem; font-weight: 600; color: var(--color-accent); }

@media (prefers-reduced-motion: reduce) {
  .cardfx-pop { transition: none; }
  .cardfx-pop:hover, .cardfx-pop:focus-visible { transform: none; }
}