/* ============================================================
   LANDING PAGE
   ============================================================ */
.landing-page {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.5vmin, 24px);
  background: #08080c;
  overflow: hidden;
  transition: opacity 1.6s ease, filter 1.6s ease;
}
.landing-page.exiting { opacity: 0; filter: blur(12px); pointer-events: none; }
.landing-page.hidden  { display: none; }

#firefly-canvas {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* ---- Title ---- */
.tt-title {
  text-align: center; z-index: 1;
  opacity: 0; animation: fadeUp 0.7s 0.2s ease forwards;
}
.tt-greeting {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.7rem, 1.3vmin, 0.85rem);
  color: rgba(255,255,255,0.25);
  letter-spacing: 0.14em; text-transform: uppercase;
  margin-bottom: 4px;
}
.tt-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(1.3rem, 3.2vmin, 2rem);
  font-weight: 700;
  color: rgba(255,255,255,0.82);
  letter-spacing: -0.02em;
}

/* ---- Scene ---- */
.tt-scene {
  position: relative; z-index: 1;
  opacity: 0; animation: fadeUp 0.7s 0.4s ease forwards;
}

/* Platter */
.tt-platter {
  position: relative;
  width: clamp(200px, 46vmin, 360px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #0e0e12;
  box-shadow: 0 8px 30px rgba(0,0,0,0.35);
}

/* ---- Vinyl ---- */
.tt-vinyl { position: absolute; inset: 5%; border-radius: 50%; background: #060608; }
.tt-vinyl.spinning { animation: spin 1.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.tt-grooves {
  position: absolute; inset: 10%; border-radius: 50%;
  background: repeating-radial-gradient(circle, #080808 0px, #080808 1px, #0c0c0e 1px, #0c0c0e 2.2px);
}
.tt-shimmer {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(255,255,255,0.02) 10%, transparent 20%,
    rgba(255,255,255,0.015) 42%, transparent 54%,
    rgba(255,255,255,0.025) 68%, transparent 80%);
}
.tt-label {
  position: absolute; width: 24%; aspect-ratio: 1;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  border-radius: 50%; background: #12121a; z-index: 2;
}

/* ============================================================
   TONEARM
   The .tt-arm is 48px wide — an invisible grab zone.
   It has a transparent background so it captures click/touch.
   On hover it shows a subtle glow so users know it's interactive.
   ============================================================ */
.tt-pivot {
  position: absolute;
  top: 7%; right: 13%;
  width: clamp(14px, 2.6vmin, 20px);
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #b0b0b0, #666);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  z-index: 12;
  pointer-events: none;  /* Don't block arm clicks */
}

.tt-arm {
  position: absolute;
  top: calc(7% + clamp(14px, 2.6vmin, 20px) / 2);
  right: calc(13% + clamp(14px, 2.6vmin, 20px) / 2 - 24px);
  width: 48px;
  height: clamp(85px, 22vmin, 170px);
  transform-origin: 24px 0;
  transform: rotate(-30deg);
  z-index: 15;              /* Above everything */
  cursor: grab;
  touch-action: none;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  /* CRITICAL: transparent background ensures click capture on all browsers */
  background: rgba(255, 255, 255, 0.001);
  border-radius: 4px;
}
.tt-arm:hover {
  background: rgba(255, 255, 255, 0.04);
}
.tt-arm.dragging {
  cursor: grabbing;
  transition: none !important;
  background: rgba(255, 255, 255, 0.06);
}

/* Tapered shaft */
.tt-arm-shaft {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  width: 3px; height: 75%;
  background: linear-gradient(180deg, #b0b0b0, #888);
  border-radius: 2px;
  pointer-events: none;
  clip-path: polygon(20% 0%, 80% 0%, 60% 100%, 40% 100%);
}

/* Angled connector at bottom */
.tt-headshell-arm {
  position: absolute;
  bottom: 18%; left: 50%;
  transform: translateX(-50%) rotate(12deg);
  width: 2px; height: 16%;
  background: #999;
  border-radius: 1px;
  pointer-events: none;
  transform-origin: top center;
}

/* Cartridge */
.tt-headshell {
  position: absolute;
  bottom: 4px; left: 50%;
  transform: translateX(-50%);
  width: clamp(10px, 2vmin, 14px);
  height: clamp(6px, 1.2vmin, 9px);
  background: linear-gradient(180deg, #888, #555);
  border-radius: 1px 1px 2px 2px;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* Needle — gold triangle */
.tt-headshell::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 5px solid #d4a017;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.4));
}

/* Counterweight */
.tt-counterweight {
  position: absolute;
  top: -2px; left: 50%;
  transform: translateX(-50%);
  width: clamp(8px, 1.6vmin, 12px);
  aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, #aaa, #555);
  pointer-events: none;
}

/* ---- Bottom: button + hint ---- */
.tt-bottom {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; z-index: 1;
  opacity: 0; animation: fadeUp 0.5s 0.8s ease forwards;
}

.tt-start-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 32px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 50px;
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.75);
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.82rem, 1.3vmin, 0.92rem);
  font-weight: 500; letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(6px);
}
.tt-start-btn:hover {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(99,102,241,0.12);
}
.tt-start-btn:active { transform: translateY(0); }
.tt-start-btn svg { opacity: 0.65; }

.tt-hint-text {
  font-family: 'Inter', sans-serif;
  font-size: clamp(0.65rem, 1vmin, 0.75rem);
  color: rgba(255,255,255,0.16);
  letter-spacing: 0.04em;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
  .tt-platter { width: 60vmin; }
  .tt-start-btn { padding: 11px 26px; }
}
@media (min-width: 481px) and (max-width: 1024px) {
  .tt-platter { width: 42vmin; }
}
@media (min-width: 1921px) {
  .tt-platter { width: 30vmin; }
}
@media (max-height: 480px) and (orientation: landscape) {
  .tt-platter { width: 34vmin; }
  .tt-title { display: none; }
  .tt-bottom { gap: 4px; }
}
@media (min-width: 2560px) {
  .tt-platter { width: 22vmin; }
  .tt-name { font-size: 2.4rem; }
}