/* Cards at rest are never completely still (Dodd, 2026-10-25: "could the cards in the collection or the home page or
   wherever slightly move, kind of like the pack does, a circle motion, all at different timings... with a slight shine
   going through them, but not all at the same time").
   Every card carries its own clock (cards.js seed(), from the card's id, so it keeps its rhythm across re-renders):
   --od / --op / --oa / --odir  orbit: 8-14 s a turn, a random start, a 2.1-3.4 degree lean, either way round
   --bd / --bp                  bob: 5.6-8.8 s
   --sc / --sp                  shine: one pass every 9-18 s
   The layers, all cheap (rotate / translate / opacity on the compositor; the foil's background-position on rare frames):
     1. orbit - the card leans a couple of degrees and the lean travels round in a slow circle, like the pack. It is the
        individual `rotate` property about an axis that turns in the card's plane, so it adds to the hover tilt
        (`transform` in style.css) instead of fighting it; the holder gives it a perspective so the lean reads as depth.
     2. bob   - the card rises and settles by under 1% of its height.
     3. foil  - on framed cards the holo travels with the orbit (the same clock), so the light moves as the card turns.
     4. shine - a soft band of light crosses the card once a cycle, stronger with rarity.
     5. rim   - a soft rim light breathes round the frame's edge, evenly (it used to bloom over the name plate).
   The pointer wins: on hover the orbit and bob hold where they are and the mouse drives the tilt and the foil. Never on
   the opening stack (.big-card), a card up close (.inspect, .flipper), anything dragged or flipping, or a card off
   screen (cards.js sets .tc-away with an IntersectionObserver). Off for prefers-reduced-motion. */

.tc.has-frame, .has-frame { --breathe: .1; }
.has-frame.hero { --breathe: .15; } .has-frame.oracle { --breathe: .2; }
.has-frame.demigod { --breathe: .26; } .has-frame.titan { --breathe: .32; } .has-frame.mythic { --breathe: .42; }
.tc { --shine: .5; } .tc.hero { --shine: .6; } .tc.oracle { --shine: .7; } .tc.demigod { --shine: .82; } .tc.titan, .tc.holo { --shine: .95; } .tc.mythic { --shine: 1; }

/* the shine: a warm band of light, wider than the card, swept across it (clipped by the card's own rounded edge) */
.tc > .tc-shine { position: absolute; inset: -12% -70%; z-index: 7; pointer-events: none; opacity: 0;
  background: linear-gradient(104deg, transparent 41%, rgba(255, 244, 222, .07) 45.5%, rgba(255, 248, 232, .2) 48.6%, rgba(255, 255, 248, .3) 50%,
    rgba(255, 248, 232, .2) 51.4%, rgba(255, 244, 222, .07) 54.5%, transparent 59%);
  transform: translateX(-36%); }

@media (prefers-reduced-motion: no-preference) {
  /* the holders: where a card rests (Home, the queue, the hand, the binder pages, the collection, the inventory strip) */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card):has(> .tc) { perspective: 1100px; }

  /* 1 + 2: the orbit and the bob, each card on its own clock */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc {
    animation: card-orbit var(--od, 11s) linear var(--op, 0s) infinite var(--odir, normal),
      card-bob var(--bd, 7s) ease-in-out var(--bp, 0s) infinite alternate;
  }
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc:hover { animation-play-state: paused; }

  /* 3: the foil travels with the orbit (the pointer takes over on hover) */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc.has-frame:not(:hover) > .tc-holo {
    animation: card-foil-orbit var(--od, 11s) linear var(--op, 0s) infinite var(--odir, normal);
  }

  /* 4: the shine, once a cycle */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc > .tc-shine {
    animation: card-shine var(--sc, 13s) linear var(--sp, 0s) infinite;
  }

  /* 5: a soft rim light that breathes, on the frame only (masked off the photo and the text), stronger with rarity */
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .tc.mtg.has-frame::after {
    -webkit-mask: var(--foil-mask) 0 0 / 100% 100%; mask: var(--foil-mask) 0 0 / 100% 100%;
  }
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .has-frame::after {
    content: ""; position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; mix-blend-mode: screen; opacity: 0;
    /* round the whole frame evenly (no hot spot over the name plate, so its border reads like the others) */
    box-shadow: inset 0 0 5cqw .6cqw color-mix(in srgb, var(--c, #cfc6bb) 55%, transparent), inset 0 0 1.4cqw color-mix(in srgb, var(--c, #cfc6bb) 50%, #fff4dc 25%);
    animation: card-idle-breathe var(--bd, 6s) ease-in-out var(--bp, 0s) infinite alternate;
  }
  :is(.pcard, .hand-card, .idle-slot, .pocket-card, .collection-card, .iv-card) > .has-frame:hover::after { animation-play-state: paused; }

  /* off screen: everything holds still until the card scrolls back in */
  .tc.tc-away, .tc.tc-away::after, .tc.tc-away > .tc-holo, .tc.tc-away > .tc-shine { animation-play-state: paused !important; }

  /* never while a card is being dragged, turned or flipped */
  :is(.big-card, .flipper, .dragging, .is-dragging, .flipping) :is(.tc, .tp-card),
  :is(.big-card, .flipper, .dragging, .is-dragging, .flipping) :is(.tc, .tp-card)::after,
  :is(.big-card, .flipper, .dragging, .is-dragging, .flipping) :is(.tc-holo, .tc-shine) { animation: none !important; }
}

/* the orbit: the lean's axis turns round the card's face, so the high corner travels in a circle */
@keyframes card-orbit {
  0%, 100% { rotate: 1 0 0 var(--oa, 2.6deg); }
  12.5% { rotate: .7071 .7071 0 var(--oa, 2.6deg); }
  25% { rotate: 0 1 0 var(--oa, 2.6deg); }
  37.5% { rotate: -.7071 .7071 0 var(--oa, 2.6deg); }
  50% { rotate: -1 0 0 var(--oa, 2.6deg); }
  62.5% { rotate: -.7071 -.7071 0 var(--oa, 2.6deg); }
  75% { rotate: 0 -1 0 var(--oa, 2.6deg); }
  87.5% { rotate: .7071 -.7071 0 var(--oa, 2.6deg); }
}
@keyframes card-bob { from { translate: 0 .25%; } to { translate: 0 -.55%; } }
/* the foil's light goes round with the lean (the glare and the spectrum, the two layers of .mtg.has-frame > .tc-holo) */
@keyframes card-foil-orbit {
  0%, 100% { background-position: 50% 22%, 50% 22%; }
  12.5% { background-position: 70% 30%, 70% 30%; }
  25% { background-position: 78% 50%, 78% 50%; }
  37.5% { background-position: 70% 70%, 70% 70%; }
  50% { background-position: 50% 78%, 50% 78%; }
  62.5% { background-position: 30% 70%, 30% 70%; }
  75% { background-position: 22% 50%, 22% 50%; }
  87.5% { background-position: 30% 30%, 30% 30%; }
}
/* one pass, about a seventh of the cycle (1.3-2.5 s), then nothing until the next */
@keyframes card-shine {
  0% { transform: translateX(-36%); opacity: 0; animation-timing-function: cubic-bezier(.45, .05, .35, 1); }
  2% { opacity: var(--shine, .6); }
  13% { opacity: var(--shine, .6); }
  15% { transform: translateX(36%); opacity: 0; }
  100% { transform: translateX(36%); opacity: 0; }
}
@keyframes card-idle-breathe { from { opacity: calc(var(--breathe, .1) * .2); } to { opacity: var(--breathe, .1); } }

@media (prefers-reduced-motion: reduce) {
  .tc, .tc::after, .tc > .tc-holo, .tc > .tc-shine { animation: none !important; }
  .tc > .tc-shine { display: none; }
}