/* ========================================================
   AIO 24/7 Custom Stylesheet
   Theme: Cyber-Kopitiam, Analog Hi-Fi & Agentic Terminal
   ======================================================== */

/* Smooth custom scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #080c14;
}

::-webkit-scrollbar-thumb {
  background: #1e293b;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #334155;
}

/* Vinyl Disc Styling & Spin */
.vinyl-disc {
  background: radial-gradient(
    circle at center,
    #171717 0%,
    #0a0a0a 40%,
    #1f1f1f 43%,
    #0f0f0f 45%,
    #1c1c1c 60%,
    #0a0a0a 70%,
    #171717 85%,
    #050505 100%
  );
  box-shadow: 
    0 20px 40px -10px rgba(0, 0, 0, 0.9),
    0 0 30px rgba(0, 242, 254, 0.1),
    inset 0 0 15px rgba(255, 255, 255, 0.05);
}

/* Vinyl Platter Grooves */
#vinyl-record {
  background: radial-gradient(
    circle at center,
    #171717 0%,
    #0f0f0f 25%,
    #1a1a1a 26%,
    #0a0a0a 45%,
    #1c1c1c 46%,
    #080808 65%,
    #141414 66%,
    #050505 100%
  );
  box-shadow: 
    0 15px 35px rgba(0,0,0,0.8),
    0 0 20px rgba(255, 0, 127, 0.15),
    inset 0 0 20px rgba(255, 255, 255, 0.04);
}

/* Spinning Class applied via JS when needle is down */
.is-spinning {
  animation: vinylSpin 2s linear infinite !important;
}

@keyframes vinylSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Metallic Tonearm Swivel */
.tonearm-active {
  transform: rotate(26deg) !important;
}

/* Ikat Tepi Drink Bag Animations */
#bag-outer {
  box-shadow: 
    0 15px 30px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.4),
    inset 0 -1px 2px rgba(0, 0, 0, 0.3);
}

/* Condensation Shimmer */
@keyframes condensationGlisten {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.7; transform: translateY(1px); }
}

/* Liquid Shimmer */
#liquid-fill {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Card Hover Elevation */
.drink-card, .merchant-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.drink-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 15px rgba(255, 179, 0, 0.15);
}

/* Glassmorphism utility */
.glass-panel {
  background: rgba(15, 23, 42, 0.75);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Glow effects */
.glow-cyan {
  box-shadow: 0 0 25px rgba(0, 242, 254, 0.35);
}

.glow-pink {
  box-shadow: 0 0 25px rgba(255, 0, 127, 0.35);
}

.glow-amber {
  box-shadow: 0 0 25px rgba(255, 179, 0, 0.35);
}

/* Custom marquee timing & smoothness */
.animate-marquee {
  display: flex;
  width: 200%;
}