/* design.css – design round (illustrations, choreography, micro-interactions). Loaded after components.css.
   Only adds motion and decoration on top of the shell's components; layout stays in components.css.
   Motion uses transform/opacity (or the individual translate/scale/rotate properties, so it composes with
   existing transforms). Reduced motion (iOS or setting "immer" → html[data-motion="reduced"]) is handled
   globally in base.css (every animation jumps to its end state) plus the few explicit rules below.
   Hooks: core/motion.js (html[data-nav], .koffi.is-live, --sky-day/--sky-night on .hub-screen). */

/* ---------------------------------------------------------------------- */
/* 1 · Press: quick squish down, springy release (all sticker controls)    */
/* ---------------------------------------------------------------------- */
.btn, .pressable, .tile, .chip, .filter-chip, .seg-btn, .setup-person {
  transition-property: transform, box-shadow, background-color, border-color, color, opacity;
  transition-duration: 300ms, 220ms, var(--t-base), var(--t-base), var(--t-base), var(--t-base);
  transition-timing-function: var(--ease-spring), var(--ease-out), ease, ease, ease, ease;
}
.btn:active:not(:disabled), .btn.is-pressed, .pressable:active, .tile:active, .chip:active,
.filter-chip:active, .seg-btn:active, .setup-person:active {
  transition-duration: 70ms, 70ms, var(--t-base), var(--t-base), var(--t-base), var(--t-base);
  transition-timing-function: ease-out;
}

/* ---------------------------------------------------------------------- */
/* 2 · Entrances: cards and profiles pop in one after another              */
/* ---------------------------------------------------------------------- */
@keyframes card-in {
  from { opacity: 0; translate: 0 16px; scale: .94; }
}
.card-grid > *, .profile-grid > * { animation: card-in 340ms var(--ease-spring) backwards; }
.card-grid > :nth-child(2), .profile-grid > :nth-child(2) { animation-delay: 35ms; }
.card-grid > :nth-child(3), .profile-grid > :nth-child(3) { animation-delay: 70ms; }
.card-grid > :nth-child(4), .profile-grid > :nth-child(4) { animation-delay: 105ms; }
.card-grid > :nth-child(5), .profile-grid > :nth-child(5) { animation-delay: 140ms; }
.card-grid > :nth-child(6), .profile-grid > :nth-child(6) { animation-delay: 175ms; }
.card-grid > :nth-child(7) { animation-delay: 205ms; }
.card-grid > :nth-child(8) { animation-delay: 235ms; }
.card-grid > :nth-child(n+9) { animation-delay: 260ms; }
/* the art inside a game card settles a beat later, like a sticker pressed on */
@keyframes art-in {
  0% { scale: .7; rotate: -8deg; opacity: 0; }
  60% { scale: 1.06; rotate: 2deg; opacity: 1; }
  100% { scale: 1; rotate: 0deg; }
}
.game-card-art img { animation: art-in 420ms var(--ease-out) 120ms backwards; }
.game-card.is-soon .game-card-art img { animation: none; }

/* hub: Koffi's speech bubble pops out of Koffi, the art of the tiles lands after the tiles */
@keyframes bubble-in {
  0% { opacity: 0; scale: .6; translate: -18px 0; }
  100% { opacity: 1; scale: 1; translate: 0 0; }
}
.hub-greeting .bubble { transform-origin: 0 50%; animation: bubble-in 420ms var(--ease-spring) 180ms backwards; }
.hub-tiles .tile-art { animation: art-in 480ms var(--ease-out) 260ms backwards; }
.hub-tiles .tile:nth-child(2) .tile-art { animation-delay: 330ms; }
.hub-tiles .tile:nth-child(3) .tile-art { animation-delay: 400ms; }
.resume-card { animation: card-in 380ms var(--ease-spring) 120ms backwards; }
.resume-play { animation: art-in 420ms var(--ease-out) 300ms backwards; }

/* ---------------------------------------------------------------------- */
/* 3 · Hub sky: clouds drift, a little plane flies by (≈ 1 min, then still) */
/* ---------------------------------------------------------------------- */
.hub-screen { position: relative; isolation: isolate; }
.hub-screen::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: min(62%, 420px);
  pointer-events: none;
  background: var(--sky-day, url("../img/hub/himmel-tag-still.svg")) 50% 0 / max(100%, 900px) auto no-repeat;
  opacity: .95;
  -webkit-mask: linear-gradient(#000 70%, transparent);
  mask: linear-gradient(#000 70%, transparent);
}
:root[data-theme="night"] .hub-screen::before { background-image: var(--sky-night, url("../img/hub/himmel-nacht-still.svg")); opacity: 1; }
:root[data-motion="reduced"] .hub-screen::before { background-image: url("../img/hub/himmel-tag-still.svg"); }
:root[data-motion="reduced"][data-theme="night"] .hub-screen::before { background-image: url("../img/hub/himmel-nacht-still.svg"); }
.is-phone.landscape .hub-screen::before { height: 100%; }

/* "Zum Home-Bildschirm hinzufügen" (Safari tab): picture of the two steps above the text */
.install-card::before {
  content: "";
  display: block;
  height: clamp(110px, 22vmin, 170px);
  background: url("../img/hub/installieren.svg") 50% 50% / contain no-repeat;
  animation: art-in 520ms var(--ease-out) 150ms backwards;
}

/* empty states: Koffi sits on a soft sun spot */
.empty-state .koffi {
  background: radial-gradient(closest-side, var(--sun-soft) 0 72%, transparent 74%) 50% 62% / 100% 82% no-repeat;
  animation: art-in 500ms var(--ease-out) 80ms backwards;
}

/* ---------------------------------------------------------------------- */
/* 4 · Result choreography (ctx.ui.celebrate)                              */
/*     card rises (dialog-in) → Koffi lands → rays → title pops → stars →  */
/*     buttons; badge peels on last. Everything tappable after ≤ 350 ms.    */
/* ---------------------------------------------------------------------- */
@keyframes hero-land {
  0% { opacity: 0; translate: 0 46px; scale: .55; }
  55% { opacity: 1; translate: 0 -10px; scale: 1.06; }
  78% { translate: 0 2px; scale: .98; }
  100% { translate: 0 0; scale: 1; }
}
@keyframes hero-soft {
  0% { opacity: 0; translate: 0 24px; rotate: -6deg; }
  100% { opacity: 1; translate: 0 0; rotate: 0deg; }
}
@keyframes title-pop {
  0% { opacity: 0; scale: .6; }
  60% { opacity: 1; scale: 1.07; }
  100% { scale: 1; }
}
@keyframes rise-in {
  from { opacity: 0; translate: 0 14px; }
}
@keyframes avatar-pop {
  0% { opacity: 0; scale: .2; }
  65% { opacity: 1; scale: 1.15; }
  100% { scale: 1; }
}
@keyframes rays-in { from { opacity: 0; scale: .4; } }
@keyframes rays-turn { to { rotate: 1turn; } }

.celebrate-hero { isolation: isolate; }
.celebrate-hero .koffi { animation: hero-land 620ms var(--ease-out) 60ms backwards; }
.celebrate:is([data-mood="lose"], [data-mood="coopLoss"], [data-mood="draw"]) .celebrate-hero .koffi { animation: hero-soft 480ms var(--ease-out) 60ms backwards; }
.celebrate-hero .avatar { animation: avatar-pop 460ms var(--ease-spring) 300ms backwards; }
.celebrate-title { animation: title-pop 420ms var(--ease-spring) 140ms backwards; }
.celebrate-sub { animation: rise-in 300ms var(--ease-out) 220ms backwards; }
.celebrate-actions { animation: rise-in 300ms var(--ease-out) 200ms backwards; }
.celebrate .badge-card { animation: badge-reveal 520ms var(--ease-spring) 620ms both; }
.celebrate .badge-sticker { position: relative; }
.celebrate .badge-sticker::after {          /* one shine sweeps over the new badge */
  content: "";
  position: absolute;
  inset: -20%;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 50%, transparent 62%);
  translate: -120% 0;
  animation: shine 700ms ease-in-out 1050ms 1 both;
  pointer-events: none;
}
@keyframes shine { to { translate: 120% 0; } }

/* sun rays behind Koffi – wins and cooperative wins only, by day (night: no glow effects, concept § 4.5.1) */
.celebrate:is([data-mood="win"], [data-mood="coop"]) .celebrate-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--sun) 70%, transparent) 0deg 9deg, transparent 9deg 22.5deg);
  -webkit-mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, .55) 62%, transparent 100%);
  mask: radial-gradient(closest-side, #000 30%, rgba(0, 0, 0, .55) 62%, transparent 100%);
  animation: rays-in 520ms var(--ease-out) 120ms backwards, rays-turn 22s linear 600ms 3;
}
:root[data-theme="night"] .celebrate-hero::before { display: none; }

/* ---------------------------------------------------------------------- */
/* 5 · Small things                                                         */
/* ---------------------------------------------------------------------- */
/* turn banner: the avatar hops in a beat after the pill */
.turn-banner .avatar { animation: avatar-pop 420ms var(--ease-spring) 120ms backwards; }
/* dialogs: Koffi peeks in */
.dialog > .koffi, .handoff > .koffi, .gate > .koffi { animation: art-in 460ms var(--ease-out) 90ms backwards; }
/* toasts with Koffi: a tiny nod */
.toast > img.koffi { animation: art-in 380ms var(--ease-out) 60ms backwards; }

/* sparkles and flying stars (core/motion.js) */
.mo-spark {
  position: fixed;
  z-index: 77;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #1E2A4A;
  pointer-events: none;
}
.mo-star { position: fixed; z-index: 78; pointer-events: none; filter: drop-shadow(0 3px 0 rgba(30, 42, 74, .2)); }
:root[data-theme="night"] .mo-spark { border-color: #0B0E18; }