/* index.css */

/* — Global defaults (Desktop) — */
:root {
  --vinyl-base-width:       800px;   /* desktop start */
  --vinyl-spin-duration:    6s;      /* one full spin */
  --vinyl-zoom-delay:       2s;      /* wait before zoom */
  --vinyl-zoom-duration:    6s;      /* duration of zoom */
  --vinyl-zoom-final-width: 10000px;  /* desktop end size */
  --vinyl-easing:           ease;    /* zoom easing */
}

/* — Tablet overrides (iPad) — */
@media (min-width: 601px) and (max-width: 1024px) {
  :root {
    --vinyl-base-width:       400px;
    --vinyl-spin-duration:    5s;
    --vinyl-zoom-delay:       1.5s;
    --vinyl-zoom-duration:    5s;
    --vinyl-zoom-final-width:  8000px;
  }
}

/* — Mobile overrides — */
@media (max-width: 600px) {
  :root {
    --vinyl-base-width:       400px;
    --vinyl-spin-duration:    4s;
    --vinyl-zoom-delay:       1s;
    --vinyl-zoom-duration:    4s;
    --vinyl-zoom-final-width:  6000px;
  }
}

/* Reset + base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s var(--vinyl-easing);
  opacity: 1;
}

/* Fade-out body when transitioning pages */
body.page-out {
  opacity: 0;
}

/* Spin keyframes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* The vinyl itself */
#vinyl {
  width: var(--vinyl-base-width);
  height: auto;
  transform-origin: center center;
  animation: spin var(--vinyl-spin-duration) linear infinite;
  transition: width var(--vinyl-zoom-duration) var(--vinyl-easing);
}

/* Zoomed state */
#vinyl.zoomed {
  width: var(--vinyl-zoom-final-width);
}