/* =============================================
   ZapQ — 80s DISCO SKIN
============================================= */

/* Ingen scrollbar när disco är på */
html:has(body.disco-on),
body.disco-on {
  overflow-x: hidden;
}

/* ── Skin-knapp ── */
.skinBtn {
  background: linear-gradient(135deg, rgba(180,0,255,.18), rgba(0,200,255,.12));
  border: 1px solid rgba(200,100,255,.4);
  border-radius: 10px;
  padding: 6px 12px;
  cursor: pointer;
  display: flex; align-items: center; gap: 6px;
  color: #f0d0ff;
  font-size: 13px; font-weight: 700; letter-spacing: .04em;
  transition: all .15s;
  box-shadow: 0 0 12px rgba(180,0,255,.15);
  flex-shrink: 0;
}
.skinBtn:hover {
  background: linear-gradient(135deg, rgba(180,0,255,.30), rgba(0,200,255,.22));
  box-shadow: 0 0 22px rgba(200,50,255,.4);
  transform: scale(1.06);
}
.skinBtn:active { transform: scale(.95); }
.skinIcon { font-size: 18px; line-height:1; }

/* =============================================
   DISCOBOLL  — riktig 3D
============================================= */
#discoBallWrap {
  position: fixed;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
}

.d-wire {
  width: 2px; height: 32px;
  background: linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.15));
  border-radius: 1px;
}

/* 3D-scen */
.d-scene {
  width: 80px; height: 80px;
  perspective: 260px;
  perspective-origin: 50% 40%;
}

.d-ball {
  width: 80px; height: 80px;
  position: relative;
  transform-style: preserve-3d;
  border-radius: 50%;
  animation: ballSpin 5s linear infinite;
  /* Grundfärg på bollen (syns mellan plattor) */
  background: radial-gradient(circle at 38% 32%,
    #d0d8e8 0%, #8090a8 35%, #303848 70%, #101820 100%);
  box-shadow:
    0 0 40px rgba(255,255,255,.18),
    0 0 80px rgba(180,160,255,.12),
    inset -10px -10px 25px rgba(0,0,0,.6);
}

@keyframes ballSpin {
  from { transform: rotateY(0deg)   rotateX(12deg); }
  to   { transform: rotateY(360deg) rotateX(12deg); }
}

/* Spegelplatta — positionerad med 3D transform */
.d-tile {
  position: absolute;
  width: 10px; height: 10px;
  left: 50%; top: 50%;
  margin: -5px 0 0 -5px;
  border-radius: 1px;
  /* Flytta ut till ytan (r=40px) och rotera på plats */
  transform:
    rotateY(var(--theta))
    rotateX(var(--phi))
    translateZ(38px);
  background: linear-gradient(
    calc(var(--r) * 1deg),
    rgba(255,255,255,.95) 0%,
    rgba(220,240,255,.80) 40%,
    rgba(200,215,255,.60) 100%
  );
  box-shadow:
    0 0 3px rgba(255,255,255,.7),
    inset 0 0 2px rgba(255,255,255,.5);
  animation: tileFlash calc(1.2s + var(--r) * .012s) ease-in-out infinite alternate;
  backface-visibility: visible;
}

@keyframes tileFlash {
  0%   { opacity:.35; background: linear-gradient(calc(var(--r)*1deg),rgba(255,255,255,.7),rgba(180,220,255,.5)); }
  50%  { opacity:.75; background: linear-gradient(calc(var(--r)*1deg),rgba(255,250,200,.9),rgba(255,180,255,.7)); }
  100% { opacity:1;   background: linear-gradient(calc(var(--r)*1deg),rgba(255,255,255,1), rgba(180,255,240,.9)); }
}

/* Glansreflex (fast, ovanpå rotationen) */
#discoBallWrap::after {
  content: '';
  position: absolute;
  top: 36px; left: 50%;
  transform: translateX(-50%);
  width: 28px; height: 20px;
  border-radius: 50%;
  background: radial-gradient(rgba(255,255,255,.7), transparent 70%);
  pointer-events: none;
  z-index: 2;
}

/* =============================================
   BODY-PULS NÄR DISCO ÄR PÅ
============================================= */
body.disco-on {
  animation: discoPulse 2.5s ease-in-out infinite alternate;
}
@keyframes discoPulse {
  from { filter: brightness(1) saturate(1); }
  to   { filter: brightness(1.05) saturate(1.2); }
}

/* Intro-animationer */
#discoBallWrap {
  animation: ballDrop .7s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ballDrop {
  from { transform: translateX(-50%) translateY(-110px); opacity:0; }
  to   { transform: translateX(-50%) translateY(0);       opacity:1; }
}