/* ==========================================================================
   Vinyl Loop — Minimalist Seaside & Editorial Layout Stylesheet
   Pure, clean, breathable white and sky blue. Bold & Iconic Typography.
   ========================================================================== */

:root {
  --sea-blue: #0284c7;
  --sea-sky: #38bdf8;
  --sea-ice: #f0f9ff;
  --sand-white: #ffffff;
}

/* Base Body */
body {
  background-color: #f8fafc;
  background-image: 
    radial-gradient(circle at 50% 0%, rgba(56, 189, 248, 0.08) 0%, transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f0f9ff 50%, #f8fafc 100%);
  background-attachment: fixed;
  color: #0f172a;
  font-feature-settings: "palt" 1;
  overflow-x: hidden;
}

/* Editorial Deck Container */
.editorial-deck {
  background: #ffffff;
  border: 1px solid rgba(224, 242, 254, 0.9);
  box-shadow: 0 10px 35px -10px rgba(2, 132, 199, 0.08);
  border-radius: 2rem;
}

/* Full Size Active Playing Vinyl Disc */
.full-vinyl-disc {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 50%,
    #1e293b 0%,
    #0f172a 24%,
    #1e293b 46%,
    #090d16 68%,
    #1e293b 88%,
    #020617 100%
  );
  box-shadow: 
    0 20px 40px -10px rgba(15, 23, 42, 0.4),
    0 0 0 1px rgba(15, 23, 42, 0.9),
    inset 0 0 25px rgba(0, 0, 0, 0.95);
  overflow: hidden;
  cursor: pointer;
  margin: 0 auto;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Vinyl Sheen Reflection */
.full-vinyl-disc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: conic-gradient(
    from 35deg,
    rgba(255, 255, 255, 0.22) 0deg,
    transparent 55deg,
    rgba(255, 255, 255, 0.12) 120deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.22) 240deg,
    transparent 300deg,
    rgba(255, 255, 255, 0.12) 360deg
  );
  border-radius: 50%;
  pointer-events: none;
}

/* Subtle Vinyl Concentric Grooves */
.full-vinyl-disc::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-shadow: 
    0 0 0 3px rgba(0, 0, 0, 0.35),
    0 0 0 7px rgba(255, 255, 255, 0.03),
    0 0 0 14px rgba(0, 0, 0, 0.35),
    0 0 0 21px rgba(255, 255, 255, 0.03),
    0 0 0 30px rgba(0, 0, 0, 0.35),
    0 0 0 40px rgba(255, 255, 255, 0.03),
    0 0 0 52px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* Tone Arm on Player */
.tone-arm-wrapper {
  position: absolute;
  top: 6px;
  right: 12px;
  width: 70px;
  height: 160px;
  transform-origin: 58px 20px;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 10;
  pointer-events: none;
}

.tone-arm-wrapper.is-playing {
  transform: rotate(24deg);
}

.tone-arm-wrapper.is-stopped {
  transform: rotate(0deg);
}

/* Vinyl Center Label */
.vinyl-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  height: 38%;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6), inset 0 0 8px rgba(0,0,0,0.4);
  z-index: 2;
}

/* Vinyl Spindle */
.vinyl-spindle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 3;
}

/* Vinyl Rotation Animation */
@keyframes spin-vinyl {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.is-spinning {
  animation: spin-vinyl 3.2s linear infinite;
}

.is-paused {
  animation-play-state: paused;
}

/* Catalog Card Style */
.catalog-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 1.25rem;
  padding: 1rem;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.catalog-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -8px rgba(2, 132, 199, 0.12);
  border-color: rgba(56, 189, 248, 0.6);
}

.catalog-card.is-selected {
  border-color: #0284c7;
  box-shadow: 0 0 0 2px #0284c7, 0 14px 28px -8px rgba(2, 132, 199, 0.15);
}

/* Catalog Card 1/3 Tucked Vinyl Sleeve */
.catalog-sleeve {
  position: relative;
  width: 100%;
  aspect-ratio: 1.18 / 1;
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.catalog-jacket-box {
  position: relative;
  width: 82%;
  aspect-ratio: 1 / 1;
  border-radius: 0.875rem;
  z-index: 2;
  border: 1px solid rgba(226, 232, 240, 0.8);
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.catalog-disc-peek {
  position: absolute;
  right: 0;
  width: 78%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #1e293b 0%, #0f172a 100%);
  z-index: 1;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.catalog-card:hover .catalog-disc-peek {
  transform: translateX(6px);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(241, 245, 249, 0.5);
}
::-webkit-scrollbar-thumb {
  background: rgba(186, 230, 253, 0.8);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}