/* delight.css: depth, motion, data visuals. After style.css; theme variables only. Reduced motion = none. */
:root { --dz-glow: transparent; }
:root:is([data-theme="goth"], [data-theme="crimson"], [data-theme="violet"], [data-theme="emerald"], [data-theme="ocean"], [data-theme="gold"]) {
  --dz-glow: color-mix(in srgb, var(--accent) 38%, transparent);
}

/* ---------- the score ---------- */
.score-big:not(.muted) {
  background: linear-gradient(100deg, var(--ink) 8%, var(--accent) 68%, var(--accent-2, var(--accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px var(--dz-glow)); padding-bottom: .05em; transform-origin: 0 80%;
}
@media (forced-colors: active) { .score-big:not(.muted) { background: none; color: CanvasText; filter: none; } }

/* ---------- range ribbon (DESIGN.ribbon) ---------- */
.dz-ribbon { margin: 12px 0 2px; }
.dz-ribbon svg { display: block; width: 100%; max-width: 440px; height: auto; overflow: visible; }
.rr-track { fill: var(--surface-2); stroke: var(--line); }
.rr-tick { stroke: color-mix(in srgb, var(--muted) 45%, transparent); }
.rr-label, .rr-tlabel { font-family: var(--ui); font-size: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.rr-label { fill: var(--muted); }
.rr-tlabel { fill: var(--good); }
.rr-tline { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 3 3; }
.rr-halo { fill: color-mix(in srgb, var(--accent) 22%, transparent); }
.rr-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.rr-core { fill: var(--accent); }
.rr-bat { fill: var(--accent-2, var(--accent)); }
[data-deco="off"] .rr-bat { display: none; }

/* ---------- bars with depth ---------- */
.bar { box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent); }
.bar > i { position: relative; overflow: hidden; transform-origin: left center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22);
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 55%, var(--accent-2, var(--accent))), var(--accent)); }
.bar.good > i { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 72%, var(--accent-2, var(--good))), var(--good)); }
.bar.low > i { background: linear-gradient(90deg, color-mix(in srgb, var(--warn) 70%, var(--bad)), color-mix(in srgb, var(--warn) 85%, var(--accent))); }
.bar.neutral > i { background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 38%, var(--line)), color-mix(in srgb, var(--accent) 72%, var(--line))); }
.time-bar > span { background: linear-gradient(90deg, var(--accent-2, var(--accent)), var(--accent)); }
.spark { filter: drop-shadow(0 2px 5px var(--dz-glow)); }
/* stagger index; a bar inherits its row's */
.skill-row:nth-child(2), .calib-row:nth-child(2), .week-dots > :nth-child(2) { --i: 1; }
.skill-row:nth-child(3), .calib-row:nth-child(3), .week-dots > :nth-child(3) { --i: 2; }
.skill-row:nth-child(4), .calib-row:nth-child(4), .week-dots > :nth-child(4) { --i: 3; }
.skill-row:nth-child(5), .week-dots > :nth-child(5) { --i: 4; }
.skill-row:nth-child(6), .week-dots > :nth-child(6) { --i: 5; }
.skill-row:nth-child(7), .week-dots > :nth-child(7) { --i: 6; }
.skill-row:nth-child(n+8) { --i: 7; }

/* ---------- dots, streaks, skill map ---------- */
.week-dots .dot.on { background: linear-gradient(145deg, var(--accent), var(--accent-2, var(--accent))); border-color: transparent; box-shadow: 0 0 10px var(--dz-glow); }
.tour-dots span.on { background: linear-gradient(var(--accent), var(--accent-2, var(--accent))); transform: scale(1.4); }
.game-hud .stat { display: inline-block; }
.dz-hot { color: var(--accent); text-shadow: 0 0 12px var(--dz-glow); }
.skill-map svg { overflow: visible; }
.sm-edge:not(.done) { stroke-dasharray: 2 4; }
.sm-edge.done { stroke-width: 1.8; }
.sm-edge.dz-lead { stroke: var(--accent); stroke-width: 2; }
.dz-halo { fill: var(--accent); stroke: none; opacity: .4; pointer-events: none; }
.choice, .verdict-icon { position: relative; }

/* ---------- celebration burst (DESIGN.burst) ---------- */
.dz-burst { position: fixed; z-index: 80; width: 0; height: 0; pointer-events: none; }
.dz-burst i { position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; opacity: 0; background: var(--c);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.dz-burst.bats i { left: -10px; top: -5px; width: 20px; height: 10px; clip-path: none;
  -webkit-mask: var(--bat) center / contain no-repeat; mask: var(--bat) center / contain no-repeat; }

/* ================= motion, only when wanted ================= */
@media (prefers-reduced-motion: no-preference) {
  /* views arrive; never during a set or a game */
  body:not(.in-session) main > * { animation: dz-rise .32s ease-out backwards; }
  body:not(.in-session) main > :nth-child(2) { animation-delay: 45ms; }
  body:not(.in-session) main > :nth-child(n+3) { animation-delay: 90ms; }
  .toast { animation: dz-toast .3s ease-out backwards; }
  .modal-wrap { animation: dz-fade .2s ease-out backwards; }
  .modal { animation: dz-modal .26s cubic-bezier(.2, .8, .2, 1) backwards; }

  /* bars draw in, one sheen; report bars keep their own before-to-after growth */
  .bar > i { animation: dz-grow .8s cubic-bezier(.2, .8, .2, 1) calc(.08s + var(--i, 0) * 60ms) backwards; }
  .bar > i::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .32) 50%, transparent 70%);
    animation: dz-sheen 1.1s ease-in-out calc(.75s + var(--i, 0) * 60ms) both; }
  .bar-grow .bar > i { animation: none; }

  /* ribbon: band spreads from the estimate, dot lands, bat perches */
  .rr-band { transform-box: fill-box; animation: dz-spread .7s cubic-bezier(.2, .8, .2, 1) .1s backwards; }
  .rr-tgt { animation: dz-fade .5s ease-out .35s backwards; }
  .rr-mark { transform-box: fill-box; transform-origin: center; animation: dz-pop .45s ease-out .55s backwards; }
  .rr-bat { transform-box: fill-box; transform-origin: 50% 100%; animation: dz-land .6s ease-out .85s backwards; }

  .week-dots .dot.on { animation: dz-pop .4s ease-out calc(.1s + var(--i, 0) * 50ms) backwards; }
  .tour-dots span { transition: transform .25s ease; }
  .sm-node { animation: dz-rise .45s ease-out calc(var(--i, 0) * 30ms) backwards; }
  .sm-node.passed .sm-check { transform-box: fill-box; transform-origin: center; animation: dz-pop .4s ease-out calc(.3s + var(--i, 0) * 30ms) backwards; }
  .sm-edge:not(.done) { animation: dz-fade .6s ease-out .1s backwards; }
  /* the one paint-only exception: one short stroke draw, like the sparkline */
  .sm-edge.done { animation: dz-draw .9s ease-out .2s backwards; }
  .sm-edge.dz-lead { animation-delay: .65s; }
  .dz-halo { animation: dz-breathe 3.6s ease-in-out 1s infinite alternate; }

  /* right and wrong; this ring replaces style.css's box-shadow ring */
  .choice.right { animation: none; }
  .choice.right::after { content: ""; position: absolute; inset: -2px; border-radius: 13px; border: 2px solid var(--good);
    pointer-events: none; opacity: 0; animation: dz-ring .7s ease-out both; }
  .choice.wrong .letter { transform-origin: 50% 100%; animation: dz-tilt .5s ease-out backwards; }
  .verdict-banner.ok .verdict-icon { animation: dz-pop .4s ease-out .05s backwards; }
  .verdict-banner.ok .verdict-icon::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--good); opacity: 0; animation: dz-halo .8s ease-out .15s both; }
  .verdict-banner.no .verdict-icon { transform-origin: 50% 90%; animation: dz-tilt .55s ease-out .05s backwards; }
  .game-opts .btn.right, .btn.right-btn { animation: dz-soft .35s ease-out; }
  .game-opts .btn.wrong, .btn.wrong-btn { animation: dz-nudge .3s ease-out; }
  .dz-pulse { animation: dz-bump .4s ease-out; }

  /* presses */
  .btn, .qnav button, .strike { transition: transform .12s ease, border-color .15s, background-color .15s; }
  .choice { transition: transform .12s ease, border-color .15s; }
  .btn:active:not(:disabled), .qnav button:active { transform: scale(.97); }
  .choice:active:not(.locked):not(.first-pick) { transform: scale(.995); }

  /* burst: fly on translate/rotate/opacity, flap or twinkle on scale */
  .dz-burst i { animation: dz-fly 1.05s cubic-bezier(.15, .7, .3, 1) var(--t) both, dz-twinkle .35s ease-in-out var(--t) 3 alternate; }
  .dz-burst.bats i { animation: dz-fly 1.25s cubic-bezier(.15, .7, .3, 1) var(--t) both, dz-flap .14s ease-in-out var(--t) 8 alternate; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn.primary:hover:not(:disabled) { transform: translateY(-1px); }
  .next-card, .learn-card, .grid-2 > .card { transition: transform .2s ease; }
  .next-card:hover, .learn-card:hover, .grid-2 > .card:hover { transform: translateY(-2px); }
  .skill-row { transition: transform .15s ease; }
  .skill-row:hover { transform: translateX(3px); }
  .skill-row:hover .name { color: var(--accent); }
}
/* reduced motion means none, from any sheet */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .dz-burst { display: none; }
}

@keyframes dz-rise { from { opacity: 0; transform: translateY(6px); } }
@keyframes dz-fade { from { opacity: 0; } }
@keyframes dz-toast { from { opacity: 0; translate: 0 10px; } }
@keyframes dz-modal { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes dz-grow { from { transform: scaleX(0); } }
@keyframes dz-sheen { to { transform: translateX(100%); } }
@keyframes dz-spread { from { transform: scaleX(0); opacity: .3; } }
@keyframes dz-pop { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.22); opacity: 1; } 100% { transform: scale(1); } }
@keyframes dz-land { 0% { transform: translateY(-10px) scaleY(.5); opacity: 0; } 60% { transform: translateY(1px) scaleY(1.1); opacity: 1; } 100% { transform: none; } }
@keyframes dz-draw { from { stroke-dasharray: 600; stroke-dashoffset: 600; } to { stroke-dasharray: 600; stroke-dashoffset: 0; } }
@keyframes dz-breathe { from { opacity: .18; } to { opacity: .5; } }
@keyframes dz-ring { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.015, 1.08); } }
@keyframes dz-halo { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2); } }
/* the wrong mark wobbles like a loose headstone, then settles */
@keyframes dz-tilt { 30% { transform: rotate(-12deg); } 55% { transform: rotate(8deg); } 78% { transform: rotate(-3deg); } }
@keyframes dz-soft { 50% { transform: scale(1.03); } }
@keyframes dz-nudge { 20% { transform: translateX(-4px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
@keyframes dz-bump { 40% { transform: scale(1.18); } }
@keyframes dz-fly { 0% { opacity: 0; translate: 0 0; rotate: 0deg; } 12%, 72% { opacity: 1; } 100% { opacity: 0; translate: var(--dx) var(--dy); rotate: var(--r); } }
@keyframes dz-twinkle { from { scale: .5; } to { scale: 1.25; } }
@keyframes dz-flap { from { scale: 1 1; } to { scale: 1 .45; } }