/* polish layer (design lane) — loaded last. "Dewy Lab": spec-sheet skeleton, glow at reward moments. */

/* ---------- tokens ---------- */
:root {
  --mute: #574e48;
  --line: #e2d5ca;
  --radius: 20px;
  --shadow: 0 1px 0 rgba(31, 26, 23, .04), 0 2px 6px -2px rgba(31, 26, 23, .08), 0 18px 36px -20px rgba(194, 0, 106, .28);
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --halo-a: rgba(255, 62, 157, .30);
  --halo-b: rgba(214, 200, 255, .45);
  --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .65) 50%, transparent 65%);
  --hair: color-mix(in srgb, var(--line) 70%, transparent);
  --chip-lift: 0 2px 0 color-mix(in srgb, var(--lav-ink) 30%, transparent);
  --confetti-1: #ff3e9d; --confetti-2: #9b7bff; --confetti-3: #ffb0d6; --confetti-4: #c9b8ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --mute: #b8ada4;
    --line: #3d342e;
    --card: #211c1a;
    --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 36px -20px rgba(0, 0, 0, .7);
    --halo-a: rgba(238, 31, 134, .38);
    --halo-b: rgba(123, 92, 240, .16);
    --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
  }
}
:root[data-theme="dark"] {
  --mute: #b8ada4;
  --line: #3d342e;
  --card: #211c1a;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 18px 36px -20px rgba(0, 0, 0, .7);
  --halo-a: rgba(238, 31, 134, .38);
  --halo-b: rgba(123, 92, 240, .16);
  --gloss: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .16) 50%, transparent 65%);
}

/* ---------- global touches ---------- */
body::before {
  content: ""; position: fixed; inset: 0 0 auto; height: 32rem; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 28rem at 10% -10%, var(--halo-a), transparent 60%),
    radial-gradient(50rem 24rem at 95% -5%, var(--halo-b), transparent 60%);
}
@media (min-width: 760px) { .tabs a { min-height: 44px; } }
.score, [data-count], .count, .topic b, td, .ck-n-num, .pf-cohort b { font-variant-numeric: tabular-nums; }
.eyebrow { letter-spacing: .08em; }
#view[data-tab="ask"] .toolchip { font-size: .8rem; }

/* ---------- H1 tab transitions ---------- */
@keyframes fx-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes fx-out-l { to { opacity: 0; transform: translateX(-16px); } }
@keyframes fx-in-r { from { opacity: 0; transform: translateX(16px); } }
@keyframes fx-out-r { to { opacity: 0; transform: translateX(16px); } }
@keyframes fx-in-l { from { opacity: 0; transform: translateX(-16px); } }

#view.fx-enter { animation: fx-in .22s var(--ease-out) both; }
#view { view-transition-name: fx-view; }
.tabs { view-transition-name: fx-tabs; }
::view-transition-old(fx-view) { animation: fx-out-l .16s ease-in both; }
::view-transition-new(fx-view) { animation: fx-in-r .26s var(--ease-out) both; }
[data-fx-dir="back"]::view-transition-old(fx-view) { animation-name: fx-out-r; }
[data-fx-dir="back"]::view-transition-new(fx-view) { animation-name: fx-in-l; }

/* ---------- H2 verdict reveal + proof seal ---------- */
#view[data-tab="proof"] .pf-verdict.fx-sealed { position: relative; }
#view[data-tab="proof"] .fx-sealed .pf-vhead { padding-right: clamp(72px, 18vw, 104px); }
.fx-seal {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: clamp(56px, 14vw, 84px); aspect-ratio: 1;
  color: var(--accent-ink); opacity: .92; pointer-events: none;
}
.fx-seal svg { display: block; width: 100%; height: 100%; }
.fx-seal[data-level="few"] { color: var(--sig-few); }
.fx-seal[data-level="some"] { color: var(--sig-some); }
.fx-seal[data-level="many"] { color: var(--sig-many); }
@media (max-width: 360px) {
  .fx-seal { width: 52px; top: 10px; right: 8px; }
  #view[data-tab="proof"] .fx-sealed .pf-vhead { padding-right: 62px; }
}

@keyframes fx-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.fx-gloss { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 2; }
.fx-gloss::after { content: ""; position: absolute; inset: 0; background: var(--gloss); transform: translateX(-100%); animation: fx-sweep .9s .2s var(--ease-out) forwards; }

@keyframes fx-up { from { opacity: 0; transform: translateY(6px); } }
.pf-reasons li.fx-li { animation: fx-up .32s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 300ms); }

/* ---------- H3 signal shift ---------- */
@keyframes fx-badge-pop { 0% { transform: scale(.9); } 60% { transform: scale(1.08); } 100% { transform: none; } }
@keyframes fx-fade-out { to { opacity: 0; } }
@keyframes fx-bar { from { transform: scaleY(0); } }
.signal.fx-shift { position: relative; isolation: isolate; animation: fx-badge-pop .52s var(--spring) .3s both; }
.signal.fx-shift::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--prev); animation: fx-fade-out .42s .3s ease forwards; }
.fx-shift .pf-meter i { animation: fx-bar .3s var(--spring) both; }
.fx-shift .pf-meter i:nth-child(1) { animation-delay: .35s; }
.fx-shift .pf-meter i:nth-child(2) { animation-delay: .41s; }
.fx-shift .pf-meter i:nth-child(3) { animation-delay: .47s; }
.fx-spark { position: absolute; left: 50%; top: 50%; color: var(--sig-few); font-size: .8rem; pointer-events: none; }

/* ---------- H4 check-in delight ---------- */
#view[data-tab="checkin"] .ck-opt input:checked + .ck-tile .ck-art svg { animation-iteration-count: 3; }
#view[data-tab="checkin"] .ck-drop .ck-tile { position: relative; isolation: isolate; }
@keyframes fx-ripple { from { transform: scale(.4); opacity: .45; } to { transform: scale(1.7); opacity: 0; } }
.ck-tile.fx-ripple::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  border: 2px solid var(--accent); pointer-events: none;
  animation: fx-ripple .52s var(--ease-out) forwards;
}
.fx-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.fx-piece { position: absolute; width: 16px; height: 16px; }
.fx-piece svg { width: 100%; height: 100%; display: block; }

@keyframes fx-rise-in { from { opacity: 0; transform: translateY(20px); } }
@keyframes fx-blink { 0%, 90%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
.fx-tglowy { display: inline-block; width: 28px; height: 28px; margin: -6px 6px -8px 0; vertical-align: middle; animation: fx-rise-in .36s var(--spring) both; }
.fx-tglowy svg, .fx-glowy svg { width: 100%; height: 100%; display: block; overflow: visible; }
.glowy-eyes { transform-origin: 48px 62px; transform-box: view-box; }
.fx-tglowy .glowy-eyes { animation: fx-blink 1.4s .5s 1; }

/* ---------- H5 odometer ---------- */
.fx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fx-digit { display: inline-flex; flex-direction: column; height: 1lh; overflow: hidden; vertical-align: bottom; }
.fx-digit > span { display: block; animation: fx-roll .38s var(--spring) forwards; }
@keyframes fx-roll { to { transform: translateY(-100%); } }
#view[data-tab="checkin"] .ck-n-num b { position: relative; isolation: isolate; }
@keyframes fx-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
.ck-n-num b.fx-flash::before { content: ""; position: absolute; inset: -2px -8px; z-index: -1; border-radius: 999px; background: var(--mint); animation: fx-flash .6s ease forwards; }

/* ---------- H6 tool chips ---------- */
@keyframes fx-chip { from { opacity: 0; transform: translateY(6px) scale(.6); } }
@keyframes fx-spin { from { transform: rotate(0); } to { transform: rotate(180deg); } }
.toolchip.fx-pop { position: relative; overflow: hidden; box-shadow: var(--chip-lift); animation: fx-chip .38s var(--spring) both; animation-delay: calc(var(--i, 0) * 140ms); }
.toolchip.fx-pop::after { content: ""; position: absolute; inset: 0; background: var(--gloss); transform: translateX(-100%); animation: fx-sweep .6s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 140ms + 200ms); }
.fx-gear { display: inline-block; animation: fx-spin .6s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 140ms + 120ms); }

@keyframes fx-stamp { from { opacity: 0; transform: scale(1.3) rotate(-4deg); } }
#view[data-tab="ask"] .ak-tag { animation: fx-stamp .4s var(--spring) .25s both; }

/* ---------- H7 Glowy on For You ---------- */
@keyframes fx-land { 0% { opacity: 0; transform: translateY(-24px); } 60% { opacity: 1; transform: translateY(0) scaleY(.86); } 100% { transform: none; } }
@keyframes fx-hover { 50% { transform: translateY(-3px); } }
.fx-glowy { display: inline-block; width: 1.6em; height: 1.6em; margin-left: .3em; vertical-align: -.35em; transform-origin: 50% 100%; animation: fx-land .52s var(--spring) both; }
.fx-glowy svg { animation: fx-hover 3.2s ease-in-out .6s infinite; }
.fx-glowy .glowy-eyes { animation: fx-blink 4.5s 1s infinite; }
@media (max-width: 340px) { .fx-glowy { display: none; } }

/* ---------- empty-state art ---------- */
.fx-peek { display: block; width: min(120px, 40%); margin: 0 auto 8px; }
.fx-peek svg { display: block; width: 100%; height: auto; }

/* ---------- reduced motion: final states, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  #view.fx-enter, .fx-gloss, .pf-reasons li.fx-li, .signal.fx-shift, .fx-shift .pf-meter i,
  .fx-tglowy, .fx-glowy, .fx-glowy svg, .glowy-eyes, .toolchip.fx-pop, .fx-gear, #view[data-tab="ask"] .ak-tag { animation: none !important; }
  .signal.fx-shift::before, .toolchip.fx-pop::after, .ck-tile.fx-ripple::after { display: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}