/* VGP TimeTrack — shared anime-inspired styling */
:root{
  --bg:#070c1a;--card:#111a33;--card2:#0d1530;--ink:#eef3ff;--mut:#8592b8;
  --acc:#5b8cff;--ok:#22c17b;--out:#ff6b57;--line:#20305c;--amber:#f6c445;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  min-height:100vh;overflow-x:hidden;position:relative;background:#070c1a}

/* ---------- real photo background: rotates hourly through 5 scenes, cinematic zoom + scrim ---------- */
.bg-anim{position:fixed;inset:0;z-index:-3;overflow:hidden;background:#060a16}
.bg-anim .bgimg{position:absolute;inset:-8%;
  background-size:cover;background-position:center;
  animation:ken 34s ease-in-out infinite alternate;
  transition:opacity 1.2s ease}
@keyframes ken{0%{transform:scale(1.05) translate(0,0)}100%{transform:scale(1.2) translate(-3%,-2%)}}
/* dark scrim keeps light text/cards readable over the photo */
.stars{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,#060a1699 0%,#060a1666 38%,#060a16e6 100%)}

/* ---------- anime analog clock ---------- */
.analog{--sz:210px;width:var(--sz);height:var(--sz);margin:8px auto;position:relative;
  animation:floaty 5s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
/* rotating aura ring behind */
.analog::before{content:"";position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 0deg,#5b8cff,#22c17b,#f6c445,#ff6b57,#5b8cff);
  filter:blur(12px);opacity:.55;animation:spin 8s linear infinite;z-index:0}
.analog::after{content:"";position:absolute;inset:-6px;border-radius:50%;
  border:2px solid #ffffff22;box-shadow:0 0 30px #5b8cff88,inset 0 0 30px #5b8cff44;z-index:0}
@keyframes spin{to{transform:rotate(360deg)}}
.face{position:absolute;inset:0;border-radius:50%;z-index:2;
  background:radial-gradient(circle at 50% 38%,#182a58,#0a1330 72%);
  border:3px solid #33477f;
  box-shadow:0 12px 40px rgba(0,0,0,.55),inset 0 0 26px rgba(91,140,255,.25)}
/* orbiting sparkle particles (anime feel) */
.orbit{position:absolute;inset:0;z-index:3;animation:spin 12s linear infinite}
.orbit.rev{animation:spin 18s linear infinite reverse;opacity:.7}
.spark{position:absolute;top:-3px;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;
  background:radial-gradient(circle,#fff,#8bd0ff);box-shadow:0 0 10px #8bd0ff,0 0 18px #5b8cff}
.spark.g{background:radial-gradient(circle,#fff,#7ff0bd);box-shadow:0 0 10px #22c17b}
.spark.a{background:radial-gradient(circle,#fff,#ffe08a);box-shadow:0 0 10px #f6c445}
.tick{position:absolute;left:50%;top:8px;width:2px;height:9px;background:#4a5a8c;transform-origin:50% calc(var(--sz)/2 - 8px);border-radius:2px;z-index:3}
.tick.h{height:14px;width:3px;background:#8ea3d8}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:6px;z-index:4}
.hand.hr{width:6px;height:26%;margin-left:-3px;background:linear-gradient(#dfe8ff,#9fb4ff);box-shadow:0 0 8px #9fb4ff}
.hand.mn{width:4px;height:36%;margin-left:-2px;background:linear-gradient(#ffffff,#cdd8ff);box-shadow:0 0 8px #cdd8ff}
.hand.sc{width:2px;height:40%;margin-left:-1px;background:linear-gradient(#ff6b57,#ffd0c8);box-shadow:0 0 10px #ff6b57}
.cap{position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;border-radius:50%;
  background:radial-gradient(circle,#eaf0ff,#5b8cff);box-shadow:0 0 16px #5b8cff;z-index:6}
.digital{text-align:center;font-variant-numeric:tabular-nums;font-size:26px;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#eef3ff,#a9c0ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 20px rgba(91,140,255,.3)}
.date{text-align:center;color:var(--mut);font-size:13px;margin-bottom:16px}