/* =====================================================================================================
   THE MICROGAME TIMER (js/work.js buildTimer): an alarm clock in the bottom-left corner and a tape of time draining
   into it. NEEDS IT BY FIVE: the minute hand ticks round once, a beat at a time, while the hour hand creeps to the red
   dot at five. Layers: .wt-clock hops on every beat (tick / tock) > .wt-shake rattles (the last 4 beats, the alarm) > the SVG.
   ===================================================================================================== */
.ww-timer { position: absolute; left: 0; right: 0; bottom: 0; height: 100px; z-index: 4; pointer-events: none; }

/* ---------- the tape ---------- */
.wt-rail { position: absolute; left: 112px; right: 46px; bottom: 34px; height: 22px; }
.wt-track { position: absolute; inset: 0; overflow: hidden; border-radius: 999px; background: #f3e9f2; border: 3px solid #3a2433; box-shadow: 0 4px 0 #3a2433; }
/* one notch per beat, over the fill */
.wt-track::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(58,36,51,.3) 0 2px, rgba(58,36,51,0) 2px) 0 0 / calc(100% / var(--beats, 8)) 100%; }
.wt-fill { position: absolute; inset: 0; transform-origin: 0 50%; background-color: #7fdcb0; }
/* candy stripes running towards the clock, and a gloss line */
.wt-fill::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.38) 0 7px, rgba(255,255,255,0) 7px 14px);
  background-size: 19.8px 19.8px; animation: wt-flow .9s linear infinite; }
.wt-fill::after { content: ''; position: absolute; left: 6px; right: 6px; top: 3px; height: 3px; border-radius: 3px; background: rgba(255,255,255,.65); }
@keyframes wt-flow { to { background-position: -19.8px 0; } }
/* the bead at the end of the tape */
.wt-knob { position: absolute; top: 50%; left: 100%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; box-sizing: border-box;
  background: #fff7f0; border: 3px solid #3a2433; box-shadow: 0 3px 0 #3a2433, inset 0 -4px 0 #f3d9e4; }

/* ---------- the clock ---------- */
.wt-clock { position: absolute; left: 8px; bottom: 2px; width: 100px; height: 100px; transform-origin: 50% 92%; }
.wt-shake { width: 100%; height: 100%; transform-origin: 50% 60%; filter: drop-shadow(0 5px 0 rgba(58,36,51,.85)); }
.wt-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.wt-svg .wt-hr, .wt-svg .wt-min { transform-box: view-box; transform-origin: 60px 66px; }
.wt-svg .wt-min { transition: transform .2s cubic-bezier(.3,1.9,.5,1); }
.wt-svg .wt-hr { transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.ww-timer.snap .wt-min, .ww-timer.snap .wt-hr { transition: none; }
.wt-svg .wt-ham { transform-box: view-box; transform-origin: 60px 26px; }
.wt-svg .wt-bell { transform-box: view-box; }
.wt-svg .wt-bell.l { transform-origin: 31px 34px; } .wt-svg .wt-bell.r { transform-origin: 89px 34px; }
.wt-svg .wt-buzz { opacity: 0; transform-box: view-box; transform-origin: 60px 30px; }
.wt-svg .wt-face { transition: fill .25s; }

/* tick, tock: a squash-hop on every beat, leaning one way then the other */
.wt-clock.tk { animation: wt-tick .24s cubic-bezier(.3,1.6,.5,1); }
.wt-clock.tk2 { animation: wt-tock .24s cubic-bezier(.3,1.6,.5,1); }
@keyframes wt-tick { 0% { transform: scale(1.12, .86) rotate(-5deg); } 45% { transform: translateY(-7px) scale(.95, 1.06) rotate(2deg); } 100% { transform: none; } }
@keyframes wt-tock { 0% { transform: scale(1.12, .86) rotate(5deg); } 45% { transform: translateY(-7px) scale(.95, 1.06) rotate(-2deg); } 100% { transform: none; } }

/* ---------- the last 4 beats: it rattles, the bells shiver, the face blushes, the tape throbs ---------- */
.ww-timer.hot .wt-shake { animation: wt-rattle .1s linear infinite; }
@keyframes wt-rattle { 0% { transform: translate(1.5px, 0) rotate(2deg); } 50% { transform: translate(-1.5px, -1px) rotate(-2deg); } 100% { transform: translate(1.5px, 0) rotate(2deg); } }
.ww-timer.hot .wt-bell { animation: wt-shiver .08s linear infinite alternate; }
@keyframes wt-shiver { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.ww-timer.hot .wt-buzz { opacity: .7; animation: wt-buzz .16s steps(2) infinite; }
@keyframes wt-buzz { 0% { transform: scale(.92); } 100% { transform: scale(1.08); } }
.ww-timer.hot .wt-face { fill: #ffe6ec; }
.ww-timer.hot .wt-track { animation: wt-throb var(--beat, .5s) ease-out infinite; }
@keyframes wt-throb { 0% { border-color: #d6102e; box-shadow: 0 4px 0 #3a2433, 0 0 0 0 rgba(255,58,90,.7); } 100% { box-shadow: 0 4px 0 #3a2433, 0 0 0 12px rgba(255,58,90,0); } }
.ww-timer.hot .wt-knob { animation: wt-bead var(--beat, .5s) ease-out infinite; }
@keyframes wt-bead { 0% { transform: scale(1.3); background: #ffe36a; } 100% { transform: none; } }

/* ---------- a win: the clock stops dead, a happy hop, a mint ring, sparkles; the tape freezes mint ---------- */
.ww-timer.won .wt-clock { animation: wt-won .55s cubic-bezier(.3,1.7,.5,1); }
@keyframes wt-won { 0% { transform: scale(.85, 1.15); } 35% { transform: translateY(-16px) scale(1.18) rotate(-6deg); } 70% { transform: scale(1.06, .94); } 100% { transform: none; } }
.ww-timer.won .wt-face { fill: #dff7ea; }
.ww-timer.won .wt-fill { background-color: #7fdcb0 !important; }
.ww-timer.won .wt-fill::before { animation: none; }
.ww-timer.won .wt-knob { background: #b9f0d6; }
.wt-ring { position: absolute; left: 50%; top: 56%; width: 70px; height: 70px; margin: -35px 0 0 -35px; border-radius: 50%; border: 6px solid #7fdcb0; opacity: 0; pointer-events: none; }
.ww-timer.won .wt-ring { animation: wt-ring .6s ease-out both; }
@keyframes wt-ring { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.3); opacity: 0; border-width: 1px; } }
.wt-clock .ww-pt { z-index: 6; }

/* ---------- decided early on a miss: it droops and keeps ticking ---------- */
.ww-timer.lost .wt-face { fill: #efe3ea; }
.ww-timer.lost .wt-fill { filter: saturate(.5); }

/* ---------- time up on a miss: the alarm goes off ---------- */
.ww-timer.ring .wt-clock { animation: wt-jump .5s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes wt-jump { 0% { transform: none; } 35% { transform: translateY(-22px) scale(1.4) rotate(-8deg); } 100% { transform: translateY(-8px) scale(1.28) rotate(4deg); } }
.ww-timer.ring .wt-shake { animation: wt-rattle .05s linear infinite; }
.ww-timer.ring .wt-ham { animation: wt-ham .05s linear infinite alternate; }
@keyframes wt-ham { from { transform: rotate(-38deg); } to { transform: rotate(38deg); } }
.ww-timer.ring .wt-bell { animation: wt-shiver .04s linear infinite alternate; }
.ww-timer.ring .wt-buzz { opacity: 1; animation: wt-buzz .08s steps(2) infinite; }
.ww-timer.ring .wt-face { fill: #ffd0d8; }
.ww-timer.ring .wt-track { border-color: #d6102e; }
.ww-timer.ring .wt-fill::before { animation: none; }

/* ---------- reduce shake: no rattling (the ticks, the colours and the alarm hammer still tell the story) ---------- */
.ww-timer.calm .wt-shake, .ww-timer.calm .wt-bell { animation: none !important; }

/* ---------- phone held upright: under the microgame band ---------- */
html.portrait .ww-timer { bottom: auto; top: calc(50% + 214px); height: 130px; }
html.portrait .wt-clock { width: 128px; height: 128px; left: 14px; }
html.portrait .wt-rail { left: 150px; right: 34px; bottom: 44px; height: 26px; }
html.portrait .wt-knob { width: 34px; height: 34px; margin: -17px 0 0 -17px; }

@media (prefers-reduced-motion: reduce) {
  .wt-clock, .wt-shake, .wt-bell, .wt-buzz, .wt-fill::before, .wt-track, .wt-knob { animation: none !important; }
  .wt-svg .wt-min, .wt-svg .wt-hr { transition: none; }
}