/* Motion vocabulary, lifted from design/lab.template.html. Entrance / continuous
   / interactive — all gated behind prefers-reduced-motion: no-preference. */
@media (prefers-reduced-motion:no-preference){
  .ico .lift,.ico .swing,.ico .pop,.ico .spin,.ico .fade{transform-box:fill-box;transform-origin:center;transition:transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard)}
  .ico .swing{transform-origin:50% 100%}
  :is(.nav,.course,.search,.status,.submit,.undo,.icard):hover .ico .lift{transform:translateY(-1.5px)}
  :is(.nav,.course,.search,.status,.submit,.undo,.icard):hover .ico .swing{transform:rotate(-9deg)}
  :is(.nav,.course,.search,.status,.submit,.undo,.icard):hover .ico .pop{transform:scale(1.18)}
  :is(.nav,.course,.search,.status,.submit,.undo,.icard):hover .ico .spin{transform:rotate(90deg)}
  :is(.nav,.course,.search,.status,.submit,.undo,.icard):hover .ico .draw{animation:draw var(--dur-slow) var(--ease-decel)}
  :is(.nav,.step,.course,.person,.status,.submit,.search,.undo,.modetoggle,.linkbtn,.chipfilter,.addbtn):active{transform:scale(.96)}
  :is(.nav,.step,.course,.person,.status,.submit,.search,.undo,.modetoggle){transition:transform var(--dur-instant) var(--ease-standard),color var(--dur-fast),background-color var(--dur-fast),border-color var(--dur-fast)}
  .step.just .draw{animation:draw calc(260ms * var(--motion)) var(--ease-decel) both}
  .step.just .pop{animation:ringpop calc(320ms * var(--motion)) var(--ease-spring) both}
  .status.just .ico{animation:ringpop calc(320ms * var(--motion)) var(--ease-spring) both}
  .status.just .lbl{animation:fadein var(--dur-fast) var(--ease-decel) both}
  .submit.stamp .ico{animation:stamp calc(420ms * var(--motion)) var(--ease-spring) both}
  .next .swap-out{animation:slideout var(--dur-base) var(--ease-accel) both}
  .next .swap-in{animation:slidein calc(280ms * var(--motion)) var(--ease-decel) both}
  .toast.in{animation:toastin var(--dur-base) var(--ease-decel) both}
  .toast.out{animation:toastout var(--dur-fast) var(--ease-accel) both}
  .palette-back.open{animation:fadein var(--dur-fast) var(--ease-standard) both}
  .palette-back.open .palette{animation:palettein var(--dur-fast) var(--ease-decel) both}
  .chip.u2{animation:urge calc(600ms * var(--motion)) var(--ease-decel) 1 both}
  /* Entrance plays once per page visit (#view.entering), never on in-place updates. */
  #view.entering :is(.banner,.card,.queue,.weekgrp){animation:rise var(--dur-slow) var(--ease-decel) both}
  #view.entering :is(.card,.weekgrp):nth-child(2){animation-delay:calc(40ms * var(--motion))}
  /* Today icon: rays sway left–right around the sun's centre on hover. */
  .ico .rays{transform-box:view-box;transform-origin:12px 16px}
  :is(.nav,.icard):hover .ico .rays{animation:rays calc(900ms * var(--motion)) var(--ease-standard)}
  .stepitem:has(.step.just) .step .ico{animation:ringpop calc(320ms * var(--motion)) var(--ease-spring) both}
  .perch{animation:sway calc(6s * var(--motion)) ease-in-out infinite}
  .perch.hop{animation:hop calc(520ms * var(--motion)) var(--ease-spring) 1}
  .perch.dragging{animation:none;transform:rotate(var(--tilt,0deg)) scale(1.06);transition:transform 60ms linear}
  .perch.landed{animation:plop calc(380ms * var(--motion)) var(--ease-spring) 1}
  .petal{animation:burst calc(var(--pd,900ms) * var(--motion)) var(--ease-decel) forwards}
}
@keyframes draw{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}
@keyframes ringpop{0%{transform:scale(.7)}100%{transform:scale(1)}}
@keyframes stamp{0%{transform:translateY(-4px) scale(1.15)}55%{transform:translateY(1px) scale(.92)}100%{transform:none}}
@keyframes fadein{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes slideout{to{opacity:0;transform:translateY(-14px)}}
@keyframes slidein{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes toastin{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes toastout{to{opacity:0;transform:translateY(10px)}}
@keyframes palettein{from{opacity:0;transform:scale(.98) translateY(-6px)}to{opacity:1;transform:none}}
@keyframes plop{0%{transform:scale(1.06,.9)}45%{transform:scale(.95,1.07)}100%{transform:none}}
@keyframes rays{0%,100%{transform:rotate(0)}30%{transform:rotate(-14deg)}70%{transform:rotate(12deg)}}
@keyframes urge{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
@keyframes sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes hop{0%{transform:translateY(0)}35%{transform:translateY(-14px) rotate(-4deg)}100%{transform:none}}
@keyframes burst{from{opacity:1;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--px),var(--py)) rotate(var(--pr))}}

/* View Transitions: Lok<->Zi Xuan swap and dark-mode toggle, circular reveal */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-new(root){animation:reveal var(--dur-slow) var(--ease-decel)}
}
@keyframes reveal{from{clip-path:circle(0 at var(--vx,50%) var(--vy,90%))}to{clip-path:circle(150% at var(--vx,50%) var(--vy,90%))}}