/* ──────────────────────────────────────────────────────────────────────
   Rörelse. Allt går att stänga av med "lugnt läge" (body.calm) eller
   systemets inställning för minskad rörelse.
   ────────────────────────────────────────────────────────────────────── */

@keyframes viewIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes popIn {
  0%   { opacity: 0; transform: scale(.86) translateY(14px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(24px) scale(.94); }
  100% { opacity: 1; transform: none; }
}

@keyframes toastOut {
  to { opacity: 0; transform: translateY(-14px) scale(.96); }
}

@keyframes twinkle {
  from { opacity: .55; }
  to   { opacity: 1; }
}

@keyframes flicker {
  0%, 100% { opacity: .85; }
  40%      { opacity: 1; }
  60%      { opacity: .7; }
}

/* ── Rätt svar ───────────────────────────────────────────────────────*/

@keyframes cardGlowOk {
  0%   { box-shadow: var(--shadow-lift), var(--shadow-inset); }
  25%  { box-shadow: 0 0 0 5px rgba(47,157,108,.55), 0 0 44px rgba(47,157,108,.45), var(--shadow-lift); }
  100% { box-shadow: var(--shadow-lift), var(--shadow-inset); }
}

@keyframes cardGlowBad {
  0%   { box-shadow: var(--shadow-lift), var(--shadow-inset); }
  25%  { box-shadow: 0 0 0 5px rgba(212,69,96,.55), 0 0 40px rgba(212,69,96,.4), var(--shadow-lift); }
  100% { box-shadow: var(--shadow-lift), var(--shadow-inset); }
}

.qcard[data-flash='ok']  { animation: cardGlowOk .85s ease-out; }
.qcard[data-flash='bad'] { animation: cardGlowBad .85s ease-out, shake .42s ease-in-out; }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-9px); }
  30% { transform: translateX(8px); }
  45% { transform: translateX(-6px); }
  60% { transform: translateX(5px); }
  80% { transform: translateX(-2px); }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.14); }
}

.streak[data-bump='true'] { animation: pulse .35s var(--ease-back); }

/* ── Konfetti och gnistor ────────────────────────────────────────────*/

.confetti {
  position: absolute;
  width: 11px;
  height: 15px;
  border-radius: 2px;
  will-change: transform, opacity;
  animation: confettiFall var(--dur, 1.5s) linear forwards;
}

@keyframes confettiFall {
  0%   { opacity: 1; transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 420px), 0) rotate(var(--spin, 700deg)); }
}

.spark {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, var(--gold) 55%, transparent 72%);
  will-change: transform, opacity;
  animation: sparkOut var(--dur, .8s) var(--ease-out) forwards;
}

@keyframes sparkOut {
  0%   { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  100% { opacity: 0; transform: translate3d(var(--dx,0), var(--dy,0), 0) scale(.2); }
}

.floater {
  position: absolute;
  font-weight: 900;
  font-size: 26px;
  color: var(--gold-hi);
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
  white-space: nowrap;
  will-change: transform, opacity;
  animation: floatUp 1.25s var(--ease-out) forwards;
}

@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  18%  { opacity: 1; transform: translate(-50%, -14px) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -92px) scale(1); }
}

/* Ljusstråle bakom viktiga resultat */
@keyframes rays {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

.rays {
  position: absolute;
  top: 50%; left: 50%;
  width: 560px; height: 560px;
  pointer-events: none;
  background: conic-gradient(from 0deg,
    rgba(240,177,53,.22) 0deg 8deg, transparent 8deg 30deg,
    rgba(240,177,53,.16) 30deg 38deg, transparent 38deg 60deg,
    rgba(240,177,53,.22) 60deg 68deg, transparent 68deg 90deg,
    rgba(240,177,53,.16) 90deg 98deg, transparent 98deg 120deg,
    rgba(240,177,53,.22) 120deg 128deg, transparent 128deg 150deg,
    rgba(240,177,53,.16) 150deg 158deg, transparent 158deg 180deg,
    rgba(240,177,53,.22) 180deg 188deg, transparent 188deg 210deg,
    rgba(240,177,53,.16) 210deg 218deg, transparent 218deg 240deg,
    rgba(240,177,53,.22) 240deg 248deg, transparent 248deg 270deg,
    rgba(240,177,53,.16) 270deg 278deg, transparent 278deg 300deg,
    rgba(240,177,53,.22) 300deg 308deg, transparent 308deg 330deg,
    rgba(240,177,53,.16) 330deg 338deg, transparent 338deg 360deg);
  mask-image: radial-gradient(circle, #000 20%, transparent 68%);
  animation: rays 26s linear infinite;
  z-index: -1;
}

/* ── Barden ──────────────────────────────────────────────────────────*/

@keyframes bardIdle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-6px) rotate(-1.5deg); }
}

@keyframes bardHappy {
  0%   { transform: translateY(0) scale(1); }
  30%  { transform: translateY(-22px) scale(1.08) rotate(6deg); }
  55%  { transform: translateY(0) scale(1); }
  75%  { transform: translateY(-11px) scale(1.04) rotate(-4deg); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes bardSad {
  0%   { transform: translateY(0) rotate(0deg); }
  40%  { transform: translateY(8px) rotate(-7deg) scale(.95); }
  100% { transform: translateY(0) rotate(0deg); }
}

@keyframes bardCheer {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  20%  { transform: translateY(-26px) rotate(-9deg) scale(1.1); }
  45%  { transform: translateY(-4px) rotate(5deg) scale(1.02); }
  70%  { transform: translateY(-18px) rotate(-5deg) scale(1.06); }
}

.bard[data-mood='idle']  svg { animation: bardIdle 3.6s ease-in-out infinite; }
.bard[data-mood='happy'] svg { animation: bardHappy .85s var(--ease-back); }
.bard[data-mood='sad']   svg { animation: bardSad .8s ease-in-out; }
.bard[data-mood='cheer'] svg { animation: bardCheer 1.5s var(--ease-back); }

/* Noter som stiger från luta n */
@keyframes noteUp {
  0%   { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(.6); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--nx, 26px), -70px) rotate(22deg) scale(1.1); }
}

.note {
  position: absolute;
  font-size: 21px;
  color: var(--gold-hi);
  text-shadow: 0 2px 6px rgba(0,0,0,.5);
  animation: noteUp 1.5s var(--ease-out) forwards;
}

/* ── Nedräkning ──────────────────────────────────────────────────────*/

@keyframes countPop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(2.4); }
  30%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  75%  { opacity: 1; transform: translate(-50%,-50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.7); }
}

.countdown {
  position: fixed;
  top: 50%; left: 50%;
  z-index: 75;
  font-family: var(--font-title);
  font-size: clamp(90px, 22vw, 190px);
  font-weight: 900;
  color: var(--gold-hi);
  text-shadow: 0 0 50px rgba(240,177,53,.7), 0 8px 24px rgba(0,0,0,.6);
  pointer-events: none;
  animation: countPop .9s var(--ease-out) forwards;
}

/* ── Nytt märke / ny rang ────────────────────────────────────────────*/

@keyframes bannerIn {
  0%   { opacity: 0; transform: translate(-50%, -34px) scale(.8); }
  22%  { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
  32%  { transform: translate(-50%, 0) scale(1); }
  82%  { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -24px) scale(.95); }
}

.banner {
  position: fixed;
  top: 68px; left: 50%;
  z-index: 75;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 11px 24px;
  border-radius: 999px;
  color: #3a2a10;
  background: linear-gradient(to bottom, var(--gold-hi), var(--gold) 60%, #d99a27);
  border: 2px solid #fff3d4;
  box-shadow: 0 0 40px rgba(240,177,53,.55), 0 16px 40px rgba(0,0,0,.4);
  font-weight: 900;
  pointer-events: none;
  animation: bannerIn 3.1s var(--ease-out) forwards;
  white-space: nowrap;
  max-width: calc(100vw - 32px);
}
.banner__icon { font-size: 28px; }
.banner__text { display: flex; flex-direction: column; line-height: 1.2; }
.banner__title { font-family: var(--font-title); font-size: 17px; }
.banner__sub { font-size: 13px; font-weight: 800; opacity: .78; }

/* ── Lugnt läge ──────────────────────────────────────────────────────*/

body.calm .confetti,
body.calm .spark,
body.calm .note,
body.calm .rays { display: none; }

body.calm .bard svg { animation: none !important; }
body.calm .qcard[data-flash] { animation: none; }
body.calm .streak[data-bump='true'] { animation: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}