/* ===== Motion: the red pen marks up the case file while you read =====
   One idea, carried through: ink draws itself (pen rings, strike-throughs), stamps thump, paper settles.
   Everything starts visible. Only html.motion (set by js/motion.js when motion is allowed) arms the "before" states. */
:root{
  --ease-out:cubic-bezier(.16,1,.3,1);      /* confident arrival */
  --ease-in:cubic-bezier(.7,0,.84,0);       /* quick exit */
  --ease-pen:cubic-bezier(.65,0,.35,1);     /* a hand dragging a pen */
  --ease-stamp:cubic-bezier(.3,1.6,.5,1);   /* rubber stamp: overshoot is the point */
  --dur-tap:120ms; --dur-state:240ms; --dur-move:420ms; --dur-focal:700ms;
}

/* --- pen ring around "unnecessarily": drawn by hand on arrival --- */
html.motion .ring ellipse{stroke-dasharray:1;stroke-dashoffset:1}
html.motion .ring.is-in ellipse{transition:stroke-dashoffset var(--dur-focal) var(--ease-pen)}
html.motion .ring.is-in ellipse:nth-child(2){transition-delay:.32s;transition-duration:.5s}
html.motion .ring.is-in ellipse{stroke-dashoffset:0}

/* --- strike-throughs: the pen crosses words out in front of you --- */
html.motion [data-strike] s{text-decoration:none;position:relative;display:inline-block}
html.motion [data-strike] s::after{content:"";position:absolute;left:-.04em;right:-.04em;top:52%;height:.075em;background:currentColor;transform:scaleX(0) rotate(-1.2deg);transform-origin:left center;border-radius:.04em}
html.motion [data-strike].is-in s::after{transform:scaleX(1) rotate(-1.2deg);transition:transform .5s var(--ease-pen)}
html.motion [data-strike].is-in s:nth-of-type(2)::after{transition-delay:.38s}
html.motion [data-strike] > span{transition:color var(--dur-move) var(--ease-out) .7s}
html.motion [data-strike]:not(.is-in) > span{color:color-mix(in srgb,currentColor 35%,transparent)}

/* --- stamps thump when they reach you --- */
html.motion .letter .stamp{opacity:0;scale:1.9}
html.motion .letter .stamp.is-in{opacity:.9;scale:1;transition:scale .45s var(--ease-stamp),opacity .12s linear}
.stamp.rethump{animation:rethump .45s var(--ease-stamp)}
@keyframes rethump{0%{scale:1}35%{scale:1.35}100%{scale:1}}

/* --- 17 → 0: the promise collapses (numbers driven by js/motion.js) --- */
.zero{font-variant-numeric:tabular-nums;display:inline-block}
.zero.is-counting{color:color-mix(in srgb,var(--loud) 70%,var(--paper))}
.zero.landed{animation:land .5s var(--ease-stamp)}
@keyframes land{0%{scale:1.12}100%{scale:1}}

/* --- pinned paper: lift when you reach for it, settle when you let go --- */
@media (hover:hover){
  .pin{transition:box-shadow var(--dur-move) var(--ease-out),translate var(--dur-move) var(--ease-out)}
  .pin:not(.collage .pin):hover{translate:0 -4px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 24px 40px -14px rgba(40,10,0,.5)}
  .pin::before{transition:rotate var(--dur-move) var(--ease-out)}
  .pin:hover::before{rotate:-3deg}
  .card{transition:transform var(--dur-move) var(--ease-out),box-shadow var(--dur-move) var(--ease-out)}
  .card.tilt:hover,.card.tilt2:hover{transform:rotate(0deg)}
  .card:hover{box-shadow:0 18px 30px -22px rgba(40,10,0,.45)}
}

/* --- buttons: answer the press --- */
.btn,.opt,.titles button,.claim button,.sw,.bowl,.chip,.radio{transition-timing-function:var(--ease-out)}
.btn{transition:transform var(--dur-state) var(--ease-out),background-color var(--dur-state),color var(--dur-state),scale var(--dur-tap) var(--ease-out)}
.btn:active,.opt:active,.titles button:active,.claim button:active,.vote-opt:active{scale:.97;transition-duration:var(--dur-tap)}
.sw:active{scale:.98}
.opt{transition:transform var(--dur-state) var(--ease-out),background-color var(--dur-state),color var(--dur-state),border-color var(--dur-state),scale var(--dur-tap)}
.opt[aria-pressed="true"]{animation:pick .3s var(--ease-stamp)}
@keyframes pick{0%{scale:.92}100%{scale:1}}

/* --- bowls: the one you tap spins on its plate; the reading flips in --- */
.bowl{transition:transform var(--dur-move) var(--ease-out)}
.bowl.spin{animation:spin .6s var(--ease-out)}
@keyframes spin{from{rotate:0deg}to{rotate:360deg}}
.bowl-read.flip > *{animation:flipin .35s var(--ease-out) both}
.bowl-read.flip > :nth-child(2){animation-delay:.04s}.bowl-read.flip > :nth-child(3){animation-delay:.08s}
@keyframes flipin{from{opacity:0;translate:0 6px}to{opacity:1;translate:0 0}}

/* --- Pantandoori: the new colour pours in from the bottom --- */
.pant-big .fill{position:relative;overflow:hidden;transition:none}
.pour{position:absolute;inset:0;pointer-events:none}
.pant-big .fill p{position:relative;z-index:1}

/* --- fact or friction: the verdict lands --- */
.claim{transition:border-color var(--dur-state) var(--ease-out),background-color var(--dur-state)}
.claim.done{background:color-mix(in srgb,var(--marigold) 6%,transparent)}
.claim .verdict:not(:empty){animation:flipin .35s var(--ease-out) both}
.claim button[aria-pressed="true"]{background:var(--cream);color:var(--soot)}
.claim.done button:not([aria-pressed="true"]){opacity:.4}

/* --- title chooser: the cover swaps worlds without a jump cut --- */
#bookTitle{view-transition-name:book-title}
::view-transition-old(book-title){animation:vt-out .22s var(--ease-in) both}
::view-transition-new(book-title){animation:vt-in .5s var(--ease-out) both}
::view-transition-old(root),::view-transition-new(root){animation-duration:.5s;animation-timing-function:var(--ease-out)}
@keyframes vt-out{to{opacity:0;translate:0 -10px;filter:blur(3px)}}
@keyframes vt-in{from{opacity:0;translate:0 14px;filter:blur(4px)}}

/* --- letterbox: the envelope gets franked --- */
.received:not([hidden]){animation:flipin .45s var(--ease-out) both}

/* --- reduced motion: keep every state change legible, drop the travel --- */
@media (prefers-reduced-motion: reduce){
  .bowl.spin,.opt[aria-pressed="true"],.zero.landed,.stamp.rethump{animation:none}
  .pin:hover,.pin:not(.collage .pin):hover{translate:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}