/* ============================================================
   SORIAN VEGA // EUPHORIA — style.css
   ============================================================ */
:root {
  --pink:   #ff2d78;
  --cyan:   #00f0ff;
  --purple: #9b30ff;
  --dark:   #050510;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  width:100%; height:100%;
  background: var(--dark);
  overflow: hidden;
  font-family: 'Rajdhani', sans-serif;
  color: #fff;
}

/* SCANLINES */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9999;
  background: repeating-linear-gradient(0deg,
    transparent, transparent 2px,
    rgba(0,240,255,0.012) 2px, rgba(0,240,255,0.012) 4px);
}

/* ============================================================ PARTICLES */
.particle {
  position:fixed; width:2px; height:2px; border-radius:50%;
  pointer-events:none; animation:floatUp linear infinite; z-index:1;
}
@keyframes floatUp {
  0%  { transform:translateY(100vh); opacity:0; }
  10% { opacity:1; }
  90% { opacity:1; }
  100%{ transform:translateY(-20px); opacity:0; }
}

/* ============================================================ LOADING */
.loading-screen {
  position:fixed; inset:0; background:var(--dark);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; z-index:9998; transition:opacity 0.5s;
}
.loading-screen.hidden { opacity:0; pointer-events:none; }
.loading-logo { font-family:'Orbitron',monospace; font-size:1.4rem; font-weight:900; letter-spacing:6px; }
.loading-logo span { color:var(--pink); }
.loading-bar-wrap { width:200px; height:3px; background:rgba(255,255,255,0.1); border-radius:2px; overflow:hidden; }
.loading-bar { height:100%; width:0%; background:linear-gradient(90deg,var(--pink),var(--cyan)); animation:loadBar 1.4s ease-out forwards; }
@keyframes loadBar { to { width:100%; } }
.loading-sub { font-size:0.65rem; letter-spacing:3px; color:rgba(255,255,255,0.35); }

/* ============================================================ TRACK CONTAINER */
#trackContainer {
  width:100%; height:100%;
  display:flex; flex-direction:column;
  transition: transform 0.65s cubic-bezier(0.77,0,0.175,1);
  will-change: transform;
}

/* ============================================================ SLOT */
.slot {
  width:100%; height:100vh;
  flex-shrink:0; position:relative; overflow:hidden;
  background: var(--dark);
}

.slot-bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center center;
  filter:saturate(1.6) brightness(0.6);
  user-select:none; pointer-events:none;
}

.slot-overlay-top {
  position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to bottom,
    rgba(5,5,16,0.75) 0%,
    rgba(5,5,16,0.05) 25%,
    rgba(5,5,16,0.05) 60%,
    rgba(5,5,16,0.90) 100%);
}

.slot-grid {
  position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(rgba(0,240,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,240,255,0.05) 1px, transparent 1px);
  background-size:44px 44px;
  animation:gridDrift 25s linear infinite;
}
@keyframes gridDrift { 0%{transform:translateY(0)} 100%{transform:translateY(44px)} }

/* ============================================================ TOP BAR */
.slot-topbar {
  position:absolute; top:0; left:0; right:0; z-index:10;
  padding:14px 18px;
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(to bottom, rgba(5,5,16,0.75) 0%, transparent 100%);
}
.slot-logo {
  font-family:'Orbitron',monospace; font-size:0.7rem; font-weight:900;
  letter-spacing:4px; color:rgba(255,255,255,0.55);
}
.slot-counter {
  font-family:'Orbitron',monospace; font-size:0.65rem;
  color:var(--cyan); letter-spacing:2px;
}

/* ============================================================ SIDE ACTIONS */
.side-actions {
  position:absolute; right:14px; bottom:130px; z-index:10;
  display:flex; flex-direction:column; align-items:center; gap:20px;
}
.side-btn {
  display:flex; flex-direction:column; align-items:center; gap:4px;
  cursor:pointer; background:none; border:none; color:#fff;
}
.side-btn-icon {
  width:46px; height:46px; border-radius:50%;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
  display:flex; align-items:center; justify-content:center; font-size:1.25rem;
  transition:all 0.2s;
}
.side-btn:hover .side-btn-icon,
.side-btn.liked  .side-btn-icon { background:rgba(255,45,120,0.25); border-color:var(--pink); }
.side-btn span { font-size:0.68rem; letter-spacing:1px; color:rgba(255,255,255,0.55); }

/* ============================================================ BOTTOM */
.slot-bottom {
  position:absolute; bottom:0; left:0; right:0; z-index:10;
  padding:0 18px 22px;
}

/* WAVEFORM */
.waveform-wrap { margin-bottom:12px; height:48px; }
.waveform-canvas { width:100%; height:48px; display:block; opacity:0.85; }

/* PROGRESS */
.progress-wrap {
  height:4px; background:rgba(255,255,255,0.1); border-radius:2px;
  margin-bottom:14px; cursor:pointer; position:relative;
}
.progress-fill {
  height:100%; border-radius:2px; width:0%;
  background:linear-gradient(90deg, var(--pink), var(--purple), var(--cyan));
  box-shadow:0 0 8px rgba(255,45,120,0.6);
  transition:width 0.1s linear;
  pointer-events:none;
}
.progress-thumb {
  position:absolute; top:50%; right:100%;
  transform:translate(50%,-50%);
  width:13px; height:13px; border-radius:50%;
  background:var(--pink); box-shadow:0 0 8px var(--pink);
  transition:right 0.1s linear; pointer-events:none;
}

/* META */
.track-meta {
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin-bottom:14px;
}
.track-info { flex:1; min-width:0; }
.track-number {
  font-family:'Orbitron',monospace; font-size:0.58rem;
  color:var(--pink); letter-spacing:3px; text-transform:uppercase; margin-bottom:3px;
}
.track-title {
  font-family:'Orbitron',monospace; font-size:1.2rem; font-weight:900;
  color:#fff; letter-spacing:1px; line-height:1.1;
  text-shadow:0 0 20px rgba(255,45,120,0.5);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.track-artist { font-size:0.78rem; color:var(--cyan); letter-spacing:2px; margin-top:3px; }
.track-time {
  font-family:'Orbitron',monospace; font-size:0.75rem;
  color:rgba(255,255,255,0.4); letter-spacing:1px; white-space:nowrap; flex-shrink:0;
}

/* CONTROLS */
.controls-row { display:flex; align-items:center; gap:12px; }

.btn-play {
  width:54px; height:54px; flex-shrink:0; border-radius:50%; border:none; cursor:pointer;
  background:linear-gradient(135deg, var(--pink), var(--purple));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 20px rgba(255,45,120,0.5); transition:all 0.2s; position:relative; overflow:hidden;
}
.btn-play::before {
  content:''; position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,0.2), transparent 60%);
}
.btn-play:hover { transform:scale(1.08); box-shadow:0 0 30px rgba(255,45,120,0.8); }
.btn-play svg { width:22px; height:22px; fill:#fff; position:relative; z-index:1; }

.btn-video {
  flex:1; height:46px;
  border:1px solid rgba(0,240,255,0.4); border-radius:4px; cursor:pointer;
  background:rgba(0,240,255,0.07); color:var(--cyan);
  font-family:'Orbitron',monospace; font-size:0.6rem; letter-spacing:2px; text-transform:uppercase;
  display:flex; align-items:center; justify-content:center; gap:8px; transition:all 0.3s;
}
.btn-video:hover { background:rgba(0,240,255,0.18); box-shadow:0 0 14px rgba(0,240,255,0.3); }
.btn-video svg { width:16px; height:16px; fill:var(--cyan); flex-shrink:0; }

/* ============================================================ SCROLL HINT */
.scroll-hint {
  position:absolute; bottom:6px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:2px;
  z-index:10; opacity:0.45; pointer-events:none;
  animation:scrollBob 2s ease-in-out infinite;
}
@keyframes scrollBob {
  0%,100%{ transform:translateX(-50%) translateY(0); }
  50%    { transform:translateX(-50%) translateY(5px); }
}
.scroll-hint span { font-size:0.52rem; letter-spacing:2px; color:rgba(255,255,255,0.5); }
.scroll-hint svg  { width:16px; height:16px; fill:rgba(255,255,255,0.4); }

/* ============================================================ NAV DOTS */
.nav-dots {
  position:fixed; right:8px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:8px; z-index:100;
}
.nav-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.22); cursor:pointer; transition:all 0.35s;
}
.nav-dot.active {
  background:var(--pink); box-shadow:0 0 8px var(--pink);
  height:20px; border-radius:3px;
}

/* ============================================================ VIDEO OVERLAY */
.video-overlay {
  position:absolute; inset:0; z-index:50;
  background:#000; display:none; flex-direction:column;
}
.video-overlay.active { display:flex; }
.video-overlay video { width:100%; height:100%; object-fit:cover; }

.video-topbar {
  position:absolute; top:0; left:0; right:0; z-index:51;
  padding:14px 18px;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(to bottom, rgba(0,0,0,0.75) 0%, transparent 100%);
}
.btn-close-video {
  width:40px; height:40px; border-radius:50%;
  background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.2);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; color:#fff; flex-shrink:0; transition:all 0.2s;
}
.btn-close-video:hover { background:rgba(255,45,120,0.4); border-color:var(--pink); }
.video-track-title {
  font-family:'Orbitron',monospace; font-size:0.82rem; font-weight:700;
  letter-spacing:2px; color:#fff; text-shadow:0 0 15px rgba(255,45,120,0.6);
}
.video-watermark {
  position:absolute; top:62px; right:18px; z-index:51; pointer-events:none;
  font-family:'Orbitron',monospace; font-size:0.6rem;
  letter-spacing:3px; color:rgba(255,255,255,0.25); text-align:right; line-height:1.6;
}

/* ============================================================ RESPONSIVE */
@media (max-width: 480px) {
  .track-title { font-size:1rem; }
  .slot-logo   { font-size:0.6rem; letter-spacing:2px; }
  .btn-play    { width:48px; height:48px; }
  .btn-video   { font-size:0.55rem; }
  .side-actions{ right:10px; bottom:140px; }
  .side-btn-icon{ width:40px; height:40px; }
}