/* Rolling Ball Clock · Ràdio La Torregassa · Versió 1.16 */
:root { color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 13% 18%, rgba(25, 181, 168, .38) 0, rgba(25, 181, 168, 0) 35%),
    radial-gradient(circle at 87% 16%, rgba(234, 103, 43, .38) 0, rgba(234, 103, 43, 0) 34%),
    radial-gradient(ellipse at 51% 84%, rgba(207, 164, 49, .22) 0, rgba(207, 164, 49, 0) 48%),
    linear-gradient(140deg, #2b1936 0%, #0c3437 48%, #101626 100%);
  background-attachment: fixed;
  color: #eef8fa;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.page-shell { width: 100%; padding: clamp(8px, 2vw, 24px); }
#rollingBallClock { width: min(100%, 1100px); margin-inline: auto; position: relative; }
.rbc-frame {
  position: relative;
  isolation: isolate;
  filter: drop-shadow(0 24px 25px rgba(0,0,0,.55));
  perspective: 1200px;
}
.rbc-frame::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 8% 4% 10%;
  border-radius: 48%;
  background:
    radial-gradient(circle at 28% 40%, rgba(42, 199, 186, .22), transparent 42%),
    radial-gradient(circle at 76% 34%, rgba(243, 130, 55, .22), transparent 38%);
  filter: blur(24px);
}
.rbc-machine { display: block; width: 100%; height: auto; overflow: visible; }
.rbc-title { text-align: center; margin-top: 4px; min-height: 1.4em; font: 600 13px/1.4 ui-monospace, monospace; color: #9bcbd0; letter-spacing: .12em; }
.rbc-badge {
  position: absolute; top: 10px; right: 12px; padding: 5px 8px; border: 1px solid #8f7635;
  border-radius: 4px; background: #2b240fdd; color: #f5d77a; font: 700 10px/1 ui-monospace, monospace;
  letter-spacing: .1em; box-shadow: 0 2px 8px #0008;
}
.rbc-refresh {
  position: absolute;
  z-index: 4;
  top: 10px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid rgba(242,181,68,.62);
  border-radius: 999px;
  background: rgba(12,45,49,.88);
  color: #ffe29b;
  box-shadow: 0 4px 12px rgba(0,0,0,.35), inset 0 1px rgba(255,255,255,.12);
  cursor: pointer;
  font: 750 10px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: .06em;
}
.rbc-refresh:hover,
.rbc-refresh:focus-visible { background: rgba(24,85,86,.94); border-color: #f2b544; outline: none; }
.rbc-refresh:active { transform: translateY(1px); }
.rbc-refresh span { font-size: 15px; line-height: .7; }
.rbc-debug {
  position: absolute; left: 12px; bottom: 14px; width: 205px; margin: 0; padding: 8px 10px;
  border: 1px solid #4f565e; border-radius: 6px; background: #090b0ee8; color: #bff5cb;
  font: 11px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; pointer-events: none;
}
.rbc-hidden { display: none !important; }
.is-embedded {
  min-height: 0;
  background: transparent;
}
.is-embedded .page-shell { padding: 0; }
.is-embedded .rbc-badge,
.is-embedded .rbc-debug,
.is-embedded .rbc-title { display: none !important; }
.is-embedded .rbc-frame { filter: drop-shadow(0 15px 18px rgba(0,0,0,.48)); }
.rail-group { transform-box: fill-box; transform-origin: 91% 50%; transition: transform var(--rail-duration, 620ms) cubic-bezier(.2,.85,.25,1); }
.rail-group.is-tipping { transform: rotate(10.5deg); }
.clock-ball { filter: url(#ballShadow); transform-box: view-box; transition: transform var(--rail-duration, 620ms) cubic-bezier(.2,.85,.25,1); }
.clock-ball.is-moving { filter: url(#movingShadow); }
.ball-spin { pointer-events: none; mix-blend-mode: screen; }
.second-rotor { transform-box: view-box; transform-origin: 335px 151px; transition: transform .18s cubic-bezier(.2,.85,.3,1.12); }
.ampm-flap { transform-box: fill-box; transform-origin: center; }
.ampm-flap.is-flipping { animation: flipPeriod var(--flip-duration, 580ms) cubic-bezier(.3,.05,.25,1); }
.elevator-chain { stroke-dasharray: 8 7; }
.elevator-chain.is-running { animation: chainMove .36s linear infinite; }
.elevator-chain.is-returning { animation: chainMoveBack .46s linear infinite; }
.elevator-wheel { transform-box: fill-box; transform-origin: center; }
.elevator-wheel.is-running { animation: spin .36s linear infinite; }
.elevator-wheel.is-returning { animation: spinBack .46s linear infinite; }
.lift-carriage { opacity: 1; filter: drop-shadow(0 3px 4px rgba(0,0,0,.75)); }
.lift-carriage.is-active { opacity: 1; }
.machine-glint { animation: glint 5.5s ease-in-out infinite; }
@keyframes chainMove { to { stroke-dashoffset: -30; } }
@keyframes chainMoveBack { to { stroke-dashoffset: 30; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spinBack { to { transform: rotate(-360deg); } }
@keyframes flipPeriod { 0% { transform: scaleY(1); } 47% { transform: scaleY(.06); } 53% { transform: scaleY(.06); } 100% { transform: scaleY(1); } }
@keyframes glint { 0%,75%,100% { opacity:.08 } 84% { opacity:.5 } }
@media (prefers-reduced-motion: reduce) {
  .elevator-chain, .elevator-wheel, .machine-glint { animation: none; }
  .rail-group, .second-rotor, .ampm-flap { transition-duration: 1ms; animation-duration: 1ms; }
}
@media (max-width: 580px) {
  .page-shell { padding: 2px; }
  .rbc-refresh { top: 5px; left: 5px; padding: 5px 7px; font-size: 8px; }
  .rbc-badge { top: 5px; right: 5px; font-size: 8px; }
  .rbc-debug { left: 5px; bottom: 5px; width: 175px; font-size: 9px; }
}