/* FeG Buxtehude – Spenden-Röhre (js/donation-tube.js). Die Schriftgröße des Containers
   bestimmt alle Maße – so passt dieselbe Röhre auf den Foyer-Bildschirm und in die Verwaltung. */
/* Colours come from variables, so screen styles (night, blueprint, chalk …) can redraw the tube */
.dt{
  --dt-ink:var(--feg-ink);--dt-muted:var(--ink-muted);--dt-font:var(--font-heading);--dt-font-body:var(--font-body);
  --dt-back:rgba(255,255,255,.42);--dt-back-line:rgba(30,34,36,.16);--dt-glass-line:rgba(30,34,36,.28);
  --dt-rim:var(--feg-ink);--dt-slot:#5B5650;--dt-tick:rgba(30,34,36,.42);--dt-done:var(--done);--dt-scale:rgba(30,34,36,.28);
  --dt-now-bg:var(--feg-ink);--dt-now-fg:#fff;--dt-next-bg:var(--need);--dt-next-fg:var(--feg-ink);
  --dt-ring:var(--feg-ink);--dt-shell:rgba(255,255,255,.55);--dt-engrave:rgba(40,18,4,.82);--dt-engrave-hi:rgba(255,226,190,.45);
  position:relative;overflow:hidden;font-family:var(--dt-font);color:var(--dt-ink)}
.dt-svg{position:absolute;inset:0;display:block}
.dt-back{fill:var(--dt-back);stroke:var(--dt-back-line);stroke-width:1.5}
.dt-glass{stroke:var(--dt-glass-line);stroke-width:2}
.dt-rim{fill:var(--dt-rim)}
.dt-slot{fill:var(--dt-slot)}
.dt-tick{stroke:var(--dt-tick);stroke-width:2;stroke-dasharray:6 5;fill:none}
.dt-tick.is-done{stroke:var(--dt-done);stroke-dasharray:none}

/* Labels: milestones and goal to the right of the tube */
.dt-ms{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;line-height:1.15;max-width:calc(100% - 1em);padding:.18em .5em .22em;margin-left:-.5em;border-radius:.45em;color:var(--dt-muted)}
.dt-ms b{display:flex;align-items:center;gap:.25em;font-size:1em;font-weight:700;color:var(--dt-ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.dt-ms span{font-family:var(--dt-font-body);font-size:.72em;font-weight:600;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.dt-ms.is-done b{color:var(--dt-done)}
.dt-ms.is-next{background:var(--dt-next-bg);color:var(--dt-next-fg)}
.dt-ms.is-next span,.dt-ms.is-next b{color:var(--dt-next-fg)}
.dt-check{display:inline-flex}
.dt-check .ic{stroke-width:3}
.dt-goal small{font-family:var(--dt-font-body);font-size:.62em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--dt-muted)}
.dt-goal b{font-size:1.45em;letter-spacing:-.01em}
.dt-goal.is-next small,.dt-goal.is-next b{color:var(--dt-next-fg)}
.dt-goal.is-done b{color:var(--dt-done)}

/* Current amount on top of the heap */
.dt-now{position:absolute;transform:translate(-50%,-100%);background:var(--dt-now-bg);color:var(--dt-now-fg);font-weight:700;font-size:.95em;padding:.22em .6em;border-radius:999px;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 .2em .8em rgba(30,34,36,.3);transition:top .9s var(--ease-out)}
.dt-now::after{content:'';position:absolute;left:50%;bottom:-.3em;width:.6em;height:.6em;background:inherit;transform:translateX(-50%) rotate(45deg);border-radius:0 0 .1em 0;z-index:-1}

/* New balls fall in from the slot at the top */
.dt-drop{animation:dt-drop 1.1s both}
@keyframes dt-drop{
  0%{transform:translateY(var(--dy));animation-timing-function:cubic-bezier(.5,0,1,.6)}
  68%{transform:translateY(0);animation-timing-function:cubic-bezier(0,.5,.5,1)}
  82%{transform:translateY(calc(var(--b) * -1));animation-timing-function:cubic-bezier(.5,0,1,.5)}
  100%{transform:translateY(0)}
}

/* Measuring scale, engraving in the wooden foot */
.dt-scale{stroke:var(--dt-scale);stroke-width:1.5}
.dt-engrave{fill:var(--dt-engrave);font-family:var(--font-heading);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.dt-engrave-hi{fill:var(--dt-engrave-hi);font-family:var(--font-heading);font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* The next ball above the slot: fills up with every euro, breathes gently */
.dt-next-shell{fill:var(--dt-shell);stroke:none}
.dt-next-ring{fill:none;stroke:var(--dt-ring);stroke-width:2;stroke-dasharray:5 4;opacity:.55}
.dt-next.is-alive{animation:dt-breathe 2.8s ease-in-out infinite}
@keyframes dt-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.09)}}
.dt-nextlbl{position:absolute;transform:translateY(-50%);display:flex;flex-direction:column;line-height:1.1;font-family:var(--dt-font)}
.dt-nextlbl{color:var(--dt-ink)}
.dt-nextlbl small{font-family:var(--dt-font-body);font-size:.62em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dt-muted)}
.dt-nextlbl b{font-size:.9em;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}

/* Alive: top balls wobble, today's glow, gold sparkles, a light sweep crosses the glass */
.dt-wob{animation:dt-wob 3s ease-in-out infinite alternate}
@keyframes dt-wob{from{transform:translate(0,0)}to{transform:translate(var(--wx),var(--wy))}}
.dt-glow{fill:none;stroke-width:3;animation:dt-glow 2.2s ease-in-out infinite}
@keyframes dt-glow{0%,100%{opacity:.15}50%{opacity:.85}}
.dt-spark{transform-box:fill-box;transform-origin:center;animation:dt-spark 3s ease-in-out infinite}
@keyframes dt-spark{0%,60%,100%{opacity:.35;transform:scale(.7)}75%{opacity:1;transform:scale(1.15)}}
.dt-sweep{transform-box:fill-box;animation:dt-sweep 9s ease-in-out infinite}
@keyframes dt-sweep{0%{transform:translateX(-130%)}40%,100%{transform:translateX(330%)}}
.dt-shaking .dt-balls{animation:dt-shake 1.3s cubic-bezier(.36,.07,.19,.97)}
@keyframes dt-shake{0%,100%{transform:translate(0,0)}10%{transform:translate(-4px,-2px)}25%{transform:translate(5px,-6px)}40%{transform:translate(-5px,-3px)}55%{transform:translate(4px,-4px)}70%{transform:translate(-2px,-1px)}85%{transform:translate(1px,0)}}
.dt-still .dt-wob,.dt-still .dt-next,.dt-still .dt-spark{animation:none}
.dt-still .dt-spark{opacity:.8}

/* Stamp when the goal is reached (hidden unless a screen style shows it) */
.dt-stamp{display:none;position:absolute;transform:translate(0,-50%) rotate(-14deg);transform-origin:0 50%;font-family:var(--font-heading);font-weight:800;font-size:1.05em;letter-spacing:.12em;text-transform:uppercase;padding:.25em .6em;border:.18em solid currentColor;border-radius:.3em;white-space:nowrap;pointer-events:none;animation:dt-stamp .6s cubic-bezier(.2,1.6,.4,1) both}
.dt-stamp-b{display:none}
@keyframes dt-stamp{from{transform:translate(0,-50%) rotate(-14deg) scale(2.2);opacity:0}to{transform:translate(0,-50%) rotate(-14deg) scale(1);opacity:1}}