/* Zirva – animation + emotional moments. Only transform/opacity/stroke animate. */
:root{--ease-out:cubic-bezier(.23,1,.32,1);--ease-spring:cubic-bezier(.34,1.56,.64,1)}

/* self-drawing check mark */
.drawcheck{width:112px;height:112px;margin:0 auto}
.drawcheck circle{fill:var(--color-success-tint);stroke:var(--color-success);stroke-width:4;stroke-dasharray:302;stroke-dashoffset:302;animation:draw 700ms var(--ease-out) 100ms forwards;transform-origin:center}
.drawcheck path{fill:none;stroke:var(--color-success);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:draw 380ms var(--ease-out) 650ms forwards}
.drawcheck.ink circle{fill:var(--color-surface-sunken);stroke:var(--color-text)}
.drawcheck.ink path{stroke:var(--color-text)}
@keyframes draw{to{stroke-dashoffset:0}}

/* pop-in with a gentle spring, never from scale(0) */
.zpop{animation:pop 420ms var(--ease-spring) backwards}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(6px)}to{opacity:1;transform:none}}
.d1{animation-delay:900ms}.d2{animation-delay:1000ms}.d3{animation-delay:1100ms}.d4{animation-delay:1250ms}.d5{animation-delay:1400ms}

/* highlighter swipe draws left→right */
.swipe.anim{background:linear-gradient(var(--color-accent),var(--color-accent)) no-repeat 0 88%/0% 40%;animation:swipe 700ms var(--ease-out) 450ms forwards}
@keyframes swipe{to{background-size:100% 40%}}

/* soft rise for content blocks */
.rise{animation:rise2 360ms var(--ease-out) backwards}
@keyframes rise2{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .drawcheck circle,.drawcheck path{animation:none;stroke-dashoffset:0}
  .zpop,.rise{animation:fade 200ms ease both}
  .swipe.anim{animation:none;background-size:100% 40%}
}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- pages ---------- */
.moment{flex:1;display:flex;flex-direction:column;width:100%;max-width:520px;margin:0 auto;padding:12px 24px 0}
.moment .x{align-self:flex-start;margin-left:-12px}
.moment .center{margin:auto 0;text-align:center;display:flex;flex-direction:column;align-items:center}
.moment h1{font:600 36px/42px var(--font-family-display);letter-spacing:-.02em;margin-top:28px}
.moment .human{font:500 18px/26px var(--font-family-ui);color:var(--color-text-secondary);margin-top:12px;max-width:30ch}
.moment .badges{width:100%;margin-top:32px}
.moment-foot{width:100%;max-width:520px;margin:0 auto;padding:16px 24px 32px;display:flex;flex-direction:column;gap:12px;align-items:center}

/* quiz intro */
.qwho{display:flex;align-items:center;gap:8px;font:var(--type-body-sm);color:var(--color-text-secondary);margin-top:28px}
.intro h1{font:600 32px/38px var(--font-family-ui);letter-spacing:-.015em;margin-top:10px;text-align:left}
.facts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}
.facts2 div{background:var(--color-surface);border-radius:16px;box-shadow:inset 0 0 0 1px var(--color-border);padding:16px}
.facts2 i{font-size:22px;color:var(--color-text-secondary)}
.facts2 b{display:block;font:600 20px/26px var(--font-family-ui);margin-top:10px}
.facts2 span{font:var(--type-body-sm);color:var(--color-text-secondary)}
.calm{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px;border-radius:16px;background:var(--color-accent-tint);font:var(--type-body-md)}
.calm i{font-size:22px;flex:none;margin-top:1px}

/* low score */
.topic{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--color-surface);box-shadow:inset 0 0 0 1px var(--color-border-strong);font:var(--type-label-md);margin-top:14px}
.b-neutral{--tone-b:#E3DFD6;--tone-t:#4A5162;--tone-i:var(--color-text-secondary)}
.low-sec{width:100%;text-align:left;margin-top:36px}
.low-sec h2{font:600 18px/24px var(--font-family-ui)}
.low-sec p{font:var(--type-body-md);color:var(--color-text-secondary);margin-top:6px}

/* returned for redo */
.ret-status{display:flex;align-items:center;gap:8px;margin-top:14px;font:var(--type-label-md);color:var(--color-attention)}
.ret-status i{font-size:18px}
.note{margin-top:24px;background:var(--color-surface);border-radius:18px;box-shadow:inset 0 0 0 1px var(--color-border);padding:20px;display:flex;flex-direction:column;gap:12px}
.nwho{display:flex;align-items:center;gap:10px;font:var(--type-body-sm);color:var(--color-text-secondary)}
.nwho b{color:var(--color-text);font:var(--type-label-md)}
.note blockquote{margin:0;font:500 18px/27px var(--font-family-ui)}
.next-step{margin-top:24px;display:flex;flex-direction:column;gap:6px}
.next-step h3{font:600 18px/24px var(--font-family-ui)}
.next-step p{font:var(--type-body-md);color:var(--color-text-secondary)}
.prev{margin-top:24px;display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-top:1px solid var(--color-border);border-bottom:1px solid var(--color-border);font:var(--type-label-md)}
.prev span{color:var(--color-text-secondary);font:var(--type-body-sm)}

/* all-done states */
.alldone{display:flex;flex-direction:column;align-items:center;text-align:center;padding:40px 0 8px}
.alldone h2{font:600 28px/34px var(--font-family-display);letter-spacing:-.02em;margin-top:22px}
.alldone p{font:var(--type-body-lg);color:var(--color-text-secondary);margin-top:8px;max-width:32ch}
.alldone .week2{width:100%;margin-top:28px;text-align:left}
.alldone .btn{margin-top:24px}

/* wide screens: keep the moment and its action together, centred */
@media (min-width:900px){
  .moment{flex:none;margin-top:auto;padding-top:56px}
  .moment .center{margin:0}
  .moment .x{position:fixed;top:20px;left:24px;margin:0}
  .moment-foot{margin-bottom:auto;padding-top:36px}
}