/*
 * The one motion vocabulary, shared by every screen that wants to feel alive.
 *
 * The Apple feeling is not more animation, it is restraint plus the right
 * curve. Things ease out, never linear and never bouncing; they move a short
 * distance, not a dramatic one; and they move once, on arrival, rather than
 * looping for attention. Everything here is built from that.
 *
 * Two rules hold the whole file together:
 *
 *   One curve. --ease is a single spring-ish cubic-bezier, used everywhere, so
 *   nothing on the platform moves to a rhythm the rest does not share.
 *
 *   Reduced motion is not an afterthought. The last block collapses every
 *   transform and duration to nothing, so a viewer who asked their OS for
 *   calm gets a still, instant interface rather than a broken one. Opacity is
 *   kept so nothing vanishes; only movement stops.
 */

:root {
  --ease: cubic-bezier(0.22, 1, 0.36, 1);   /* ease-out, the Apple staple */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 560ms;
}

/* ---- scroll reveal ---- */
/* Content stays visible without JS. Only observed elements wait for an
   entrance; translate leaves each component's hover transform independent. */
.mo-pending { opacity: 0; }
.mo-entering {
  animation: mo-enter 620ms var(--ease) both;
  animation-delay: var(--reveal-delay, 0ms);
}
@keyframes mo-enter {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---- press feedback ---- */
/*
 * Anything that takes a tap can carry .tap: it sinks a hair on press and
 * springs back on release. It is the single most game-like micro-detail and
 * the cheapest, so it lives here rather than being redrawn per component.
 */
.tap {
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.tap:active {
  transform: scale(0.97);
}

/* ---- a soft rise on hover, for cards that are also links ---- */
.lift {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.lift:hover {
  transform: translateY(-3px);
}

/* ---- the count-up number ---- */
/* A number tweened by motion.js reads better in the tabular figures, so the
   digits do not jitter their width as they climb. */
.tally {
  font-variant-numeric: tabular-nums;
}

/* ---- a shimmer for loading tiles, calmer than a spinner ---- */
.shimmer {
  position: relative;
  overflow: hidden;
  background: var(--card, #16161a);
}
.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  animation: shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

/* ---- the celebration layer ---- */
/*
 * Full-screen, above everything, ignores pointer events so it never traps a
 * click. The card scales up from just under full size as it fades in, which
 * is the "earned it" pop; the backdrop dims the room behind it so the moment
 * owns the screen for the second it lasts.
 */
.fx-layer {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  pointer-events: none;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur) var(--ease);
}
.fx-layer.is-on {
  background: rgba(0, 0, 0, 0.62);
}
.fx-card {
  text-align: center;
  transform: scale(0.86);
  opacity: 0;
  transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease);
}
.fx-layer.is-on .fx-card {
  transform: scale(1);
  opacity: 1;
}

/* The confetti motes are spans the script positions; they fall and fade on
   one keyframe, so a burst is dozens of cheap elements, not a canvas. */
.fx-mote {
  position: fixed;
  top: -12px;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 91;
  animation: fx-fall var(--fall, 1600ms) var(--ease-in) forwards;
}
@keyframes fx-fall {
  to { transform: translateY(105vh) rotate(var(--spin, 360deg)); opacity: 0; }
}

/* ---- reduced motion: stillness, not breakage ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .tap, .lift { transition: none; }
  .tap:active { transform: none; }
  .lift:hover { transform: none; }
  .shimmer::after { animation: none; }
  .fx-card { transition: opacity var(--dur) linear; transform: none; }
  .fx-mote { display: none; }
}

/* ================================================================== */
/* The platform-wide motion layer.                                    */
/* Restraint is the style: short distances, one curve, once on        */
/* arrival, and a few living details (a live dot, a hover, a press).  */
/* ================================================================== */

/* Page transitions live in site-navigation.css. The shared shell initializes
   before first paint; scroll reveals never hide the initial viewport. */

/* ---- arrival: everything that is a card or a row comes in as a wave ---- */
/* The temporary animation class is removed on completion so hover never
   inherits an entrance delay, and idle cards keep no compositor layers. */

/* ---- press and hover, everywhere something is pressable ---- */
a, button { -webkit-tap-highlight-color: transparent; }
.kk-nav, .kk-ch, .kk-card, .hm-lc, .hm-cc, .hm-game, .hm-fchip, .hm-cta, .ar-buy, .kk-glass, .hm-row-nav button, .hm-war-btn, .hm-tb-chip-btn, .sn-pass-buy, .pf-claim, .gu-ob-next, .poll-option, .hm-spot-tip button {
  transition: transform 160ms var(--ease), box-shadow 200ms var(--ease), background 160ms var(--ease), border-color 160ms var(--ease), filter 160ms var(--ease);
}
.kk-nav:active, .kk-ch:active, .hm-cta:active, .ar-buy:active, .hm-row-nav button:active, .hm-war-btn:active, .hm-tb-chip-btn:active, .sn-pass-buy:active, .pf-claim:active, .gu-ob-next:active { transform: scale(.97); }
.kk-card:active, .hm-lc:active, .hm-cc:active, .hm-game:active, .hm-fchip:active { transform: scale(.985); }
.kk-nav:hover i { transform: translateX(2px); }
.kk-nav i { transition: transform 200ms var(--ease); }
.kk-ch:hover .kk-ch-av { transform: scale(1.06); }
.kk-ch-av { transition: transform 200ms var(--ease); }

/* ---- the thumbnail: a slow zoom and a sheen on hover ---- */
.kk-thumb { isolation: isolate; }
.kk-thumb::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.08) 50%, transparent 60%); transform: translateX(-100%); transition: transform 700ms var(--ease-in-out); pointer-events: none; }
.kk-card:hover .kk-thumb::after { transform: translateX(100%); }
.kk-card:hover .kk-thumb img { transform: scale(1.04); }
.kk-thumb img { transition: transform 600ms var(--ease); }

/* ---- the live dot breathes ---- */
.kk-live::before, .hm-live i, .kk-ch.is-live .kk-ch-n::before { animation: live-breathe 1.8s ease-in-out infinite; }
.kk-live { padding-left: 16px; position: absolute; }
.kk-live::before { content: ''; position: absolute; left: 6px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; }
@keyframes live-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.8); } }

/* ---- the bar gains a floor once the page has scrolled ---- */
.kk-top { transition: box-shadow 200ms var(--ease); }
body.mo-scrolled .kk-top { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.45); }

/* ---- the glass pill catches light ---- */
.kk-glass { position: relative; overflow: hidden; }
.kk-glass::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.7) 50%, transparent 65%); transform: translateX(-120%); transition: transform 600ms var(--ease-in-out); }
.kk-glass:hover::after { transform: translateX(120%); }

/* ---- bars fill rather than appear ---- */
.hm-lc-track i, .sn-track i, .pf-bar i, .hm-war-bar i, .poll-option .fill { transition: width 600ms var(--ease); }

/* ---- the count-up and the clock keep their width ---- */
.hm-tb-clock, .hm-tn-clock, .kk-count, .lb-xp { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .mo-pending, .mo-entering { opacity: 1; translate: none; animation: none; }
  .kk-live::before, .hm-live i, .kk-ch.is-live .kk-ch-n::before { animation: none; }
  .kk-thumb::after, .kk-glass::after { display: none; }
  .kk-card:hover .kk-thumb img { transform: none; }
}