/* ==========================================================================
   View Transitions + animated conic-gradient borders
   - Native cross-document (MPA) page transitions where supported
   - JS cross-fade fallback (html.no-vt) for Safari/Firefox
   - Rotating conic gold/navy border on cards (hover) + featured cards (always)
   ========================================================================== */

@property --cgb-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* ---- Native MPA view transitions ---- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: vt-out 0.32s var(--ease) both; }
::view-transition-new(root) { animation: vt-in 0.44s var(--ease) both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* Persist chrome across navigations so it doesn't cross-fade */
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.fab-stack { view-transition-name: fab-stack; }

/* ---- JS fallback fade (browsers without view transitions) ---- */
html.no-vt body { animation: pg-in 0.42s var(--ease) both; }
@keyframes pg-in { from { opacity: 0; transform: translateY(10px); } }
html.no-vt body.pg-leaving { opacity: 0; transform: translateY(-10px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }

/* ---- Conic-gradient animated borders ---- */
.card, .spec-card, .story-card, .person-card, .quote-card,
.badge-thumb, .post-card, .stat, .cred-card, .badge-banner {
  position: relative; isolation: isolate;
}
.card::after, .spec-card::after, .story-card::after, .person-card::after,
.quote-card::after, .badge-thumb::after, .post-card::after, .stat::after,
.cred-card::after, .badge-banner::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: conic-gradient(from var(--cgb-ang),
    var(--gold-500), rgba(35,64,112,0.15), var(--gold-300), rgba(35,64,112,0.15), var(--gold-500));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.4s var(--ease); pointer-events: none; z-index: 3;
  animation: cgb-spin 5s linear infinite;
}
@keyframes cgb-spin { to { --cgb-ang: 360deg; } }

/* reveal the border on hover (all cards) ... */
.card:hover::after, .spec-card:hover::after, .story-card:hover::after,
.person-card:hover::after, .quote-card:hover::after, .badge-thumb:hover::after,
.post-card:hover::after, .stat:hover::after { opacity: 0.9; }

/* ... and keep it always-on for the featured cards */
.cred-card::after { opacity: 0.85; padding: 2px; }
.badge-card-grid .badge-banner::after { opacity: 0.7; }

/* Fallback: if --cgb-ang can't animate (no @property), show a static gold edge */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .card::after, .spec-card::after, .story-card::after, .person-card::after,
  .quote-card::after, .badge-thumb::after, .post-card::after, .stat::after,
  .cred-card::after, .badge-banner::after { background: var(--gold-500); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  html.no-vt body, html.no-vt body.pg-leaving { animation: none; transition: none; opacity: 1; transform: none; }
  .card::after, .spec-card::after, .story-card::after, .person-card::after,
  .quote-card::after, .badge-thumb::after, .post-card::after, .stat::after,
  .cred-card::after, .badge-banner::after { animation: none; }
}