/* =========================================================
   Sporlo · Glassy 3D primitives
   --------------------------------------------------------
   All objects are built from layered radial gradients + soft
   shadows + a single highlight stroke. Tints come from the
   --tint-* CSS vars set on each instance. Animation is one
   slow bob + a touch of yaw — never anything jittery.
   ========================================================= */

.g-stage {
  position: relative;
  width: 100%;
  height: 100%;
  perspective: 1400px;
  transform-style: preserve-3d;
}

.g-obj {
  position: absolute;
  transform-style: preserve-3d;
  will-change: transform;
}

/* --- Bob loops, each offset for parallax ----------------- */
@keyframes bobA { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(2deg); } }
@keyframes bobB { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-22px) rotate(-3deg); } }
@keyframes bobC { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(4deg); } }
@keyframes spinSlow { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@keyframes shimmer { 0%,100% { opacity: .55; } 50% { opacity: .95; } }

.bob-a { animation: bobA 7s ease-in-out infinite; }
.bob-b { animation: bobB 9s ease-in-out infinite; }
.bob-c { animation: bobC 11s ease-in-out infinite; }


/* =========================================================
   1 · GLASS SPHERE  (the ball)
   Built entirely in CSS from stacked radial gradients.
   ========================================================= */
.glass-sphere {
  --size: 260px;
  --tint: 180 220 200;       /* mint cast */
  --tint-edge: 120 180 160;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  background:
    /* rim light bottom-right */
    radial-gradient(circle at 72% 78%, rgba(var(--tint), .55), transparent 38%),
    /* deep tint at edges */
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.0) 55%, rgba(var(--tint-edge), .35) 72%, rgba(var(--tint-edge), .55) 92%),
    /* top highlight bloom */
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.95), rgba(255,255,255,.4) 22%, rgba(255,255,255,0) 48%),
    /* main glass body */
    radial-gradient(circle at 50% 45%, #ffffff 0%, #f0f5f3 55%, #d6e4dd 100%);
  box-shadow:
    inset 6px 8px 24px rgba(255,255,255,.7),
    inset -10px -14px 36px rgba(120,160,140,.18),
    0 38px 60px -24px rgba(40,80,60,.25),
    0 6px 14px -4px rgba(40,80,60,.12);
}
.glass-sphere::before {
  /* the small sparkle highlight */
  content: "";
  position: absolute;
  inset: 14% 60% 60% 18%;
  background: radial-gradient(ellipse at 30% 30%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%);
  border-radius: 50%;
  filter: blur(1px);
}
.glass-sphere::after {
  /* lower hemisphere caustic reflection */
  content: "";
  position: absolute;
  inset: 62% 12% 8% 14%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.55), rgba(255,255,255,0) 65%);
  filter: blur(2px);
  opacity: .8;
}

/* tint variants */
.glass-sphere.tint-mint  { --tint: 158 220 192; --tint-edge: 90 168 134; }
.glass-sphere.tint-blue  { --tint: 178 210 240; --tint-edge: 100 150 200; }
.glass-sphere.tint-warm  { --tint: 240 215 200; --tint-edge: 200 165 145; }
.glass-sphere.tint-clear { --tint: 220 228 232; --tint-edge: 150 175 185; }


/* =========================================================
   2 · GLASS HEX  (scoreboard / module tile)
   ========================================================= */
.glass-hex {
  --size: 220px;
  --tint: 180 220 200;
  --tint-edge: 110 170 140;
  width: var(--size);
  height: calc(var(--size) * 1.08);
  position: relative;
  clip-path: polygon(50% 2%, 96% 26%, 96% 74%, 50% 98%, 4% 74%, 4% 26%);
  background:
    radial-gradient(120% 80% at 35% 18%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 24%, rgba(255,255,255,0) 50%),
    radial-gradient(140% 100% at 75% 90%, rgba(var(--tint), .55) 0%, rgba(var(--tint), 0) 60%),
    linear-gradient(160deg, #ffffff 0%, #eef4f1 50%, #d9e8e1 100%);
  filter: drop-shadow(0 30px 40px rgba(40,80,60,.22));
}
.glass-hex::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 2%, 96% 26%, 96% 74%, 50% 98%, 4% 74%, 4% 26%);
  background:
    /* inner stroke faked with double gradient */
    linear-gradient(160deg, rgba(255,255,255,.85), rgba(255,255,255,0) 18%),
    linear-gradient(-20deg, rgba(var(--tint-edge), .35), rgba(var(--tint-edge), 0) 25%);
  pointer-events: none;
}


/* =========================================================
   3 · GLASS RING (track lane / stopwatch bezel)
   ========================================================= */
.glass-ring {
  --size: 240px;
  --thickness: 26px;
  --tint: 180 220 200;
  --tint-edge: 110 170 140;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  position: relative;
  background:
    conic-gradient(from 220deg,
      rgba(var(--tint-edge), .55) 0deg,
      rgba(255,255,255,.95) 90deg,
      rgba(var(--tint), .35) 200deg,
      rgba(var(--tint-edge), .55) 360deg);
  box-shadow:
    0 30px 50px -18px rgba(40,80,60,.28),
    inset 0 0 18px rgba(255,255,255,.6);
}
.glass-ring::before {
  content: "";
  position: absolute;
  inset: var(--thickness);
  border-radius: 50%;
  background: #f3f5f3;
  box-shadow:
    inset 8px 12px 20px rgba(255,255,255,.9),
    inset -8px -10px 22px rgba(120,160,140,.18);
}
.glass-ring::after {
  /* top inner highlight */
  content: "";
  position: absolute;
  inset: 8% 30% 60% 30%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.7), rgba(255,255,255,0) 70%);
  filter: blur(1px);
}


/* =========================================================
   4 · GLASS PILL (whistle / capsule)
   ========================================================= */
.glass-pill {
  --w: 280px;
  --h: 110px;
  --tint: 180 220 200;
  --tint-edge: 110 170 140;
  width: var(--w);
  height: var(--h);
  border-radius: 999px;
  position: relative;
  background:
    radial-gradient(100% 140% at 25% 20%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 40%),
    radial-gradient(100% 140% at 80% 90%, rgba(var(--tint), .5) 0%, rgba(var(--tint), 0) 55%),
    linear-gradient(150deg, #ffffff 0%, #eef4f1 50%, #d8e8e0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -2px 0 rgba(var(--tint-edge), .35),
    inset 4px 6px 14px rgba(255,255,255,.8),
    inset -6px -8px 18px rgba(120,160,140,.18),
    0 24px 36px -14px rgba(40,80,60,.24);
}
.glass-pill::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 50%;
  top: 12%;
  height: 26%;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  filter: blur(1px);
}

/* =========================================================
   5 · GLASS PLATE  (jersey/card panel · soft slab)
   ========================================================= */
.glass-plate {
  --w: 280px;
  --h: 340px;
  --r: 36px;
  --tint: 180 220 200;
  --tint-edge: 110 170 140;
  width: var(--w);
  height: var(--h);
  border-radius: var(--r);
  position: relative;
  background:
    radial-gradient(120% 80% at 22% 12%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(110% 80% at 80% 88%, rgba(var(--tint), .5) 0%, rgba(var(--tint), 0) 55%),
    linear-gradient(160deg, #ffffff 0%, #eef4f1 55%, #d6e6dd 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 4px 8px 22px rgba(255,255,255,.7),
    inset -6px -10px 24px rgba(120,160,140,.18),
    0 36px 56px -22px rgba(40,80,60,.28);
  overflow: hidden;
}
.glass-plate::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(160deg, rgba(255,255,255,.9), rgba(255,255,255,0) 28%);
  pointer-events: none;
}
.glass-plate::after {
  /* refraction streak */
  content: "";
  position: absolute;
  top: -20%;
  left: -10%;
  width: 70%;
  height: 140%;
  background: linear-gradient(110deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 70%);
  transform: rotate(-12deg);
  filter: blur(2px);
  pointer-events: none;
  opacity: .6;
}


/* =========================================================
   6 · Floor shadow (under any glass object)
   ========================================================= */
.g-shadow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(30,60,46,.22), rgba(30,60,46,0) 70%);
  filter: blur(6px);
  pointer-events: none;
}