@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-3xl my-2 font-semibold leading-7 text-gray-900;
  }

  h2 {
    @apply text-2xl my-2 font-semibold leading-7 text-gray-900;
  }

  h3 {
    @apply text-lg font-semibold leading-8 tracking-tight text-gray-900;
  }

  a {
    @apply text-blue-500 transition duration-150 ease-in-out hover:text-blue-600 focus:text-blue-600 active:text-blue-700 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 dark:active:text-blue-600;
  }
}

@layer components {
  .form-label {
    @apply block font-medium leading-6 text-gray-900;
  }

  .form-input {
    @apply block w-full rounded-md border-0 py-2 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-gray-600 sm:leading-6
  }

  .form-file-input {
    @apply file:mr-6 file:px-3 file:py-2 file:rounded-md file:cursor-pointer file:bg-white file:border file:border-gray-700 hover:file:bg-gray-100
  }

  .btn-primary {
    @apply rounded-md bg-gray-600 px-3 py-2 text-white shadow-sm no-underline hover:bg-gray-500 hover:no-underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-600
  }

  .btn-secondary {
    @apply rounded-md bg-white px-3 py-2 text-gray-900 shadow-sm no-underline hover:bg-gray-100 hover:text-gray-900 hover:no-underline border border-gray-900
  }

  .btn-alert {
    @apply rounded-md border border-red-600 bg-red-600 px-3 py-2 text-white shadow-sm no-underline hover:bg-red-700 hover:text-white hover:no-underline
  }
}
/* ── Cassette Tape Player ─────────────────────────── */

.cassette {
  position: relative;
  width: 586px;
  height: 391px;
  margin: 0 auto;
}

/* Shell image overlay - covers entire cassette, transparent cutouts for reel/tape windows */
.cassette-shell {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: url(/assets/cassette-shell-ade8fadf25330e4a65e9214da311040b7c3a079186433593cac1729e2ce83643.png) no-repeat center center;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ── Tape Layer (behind shell) ──────────────────── */
.cassette-tape-layer {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── Reel Hubs ──────────────────────────────────── */
.cassette-reel {
  position: absolute;
  width: 131px;
  height: 131px;
  border-radius: 50%;
  z-index: 2;
}

.cassette-reel--left {
  left: 109px;
  top: 96px;
}

.cassette-reel--right {
  right: 110px;
  top: 93px;
  width: 140px;
  height: 140px;
}

/* Tape spool - dark ring of tape around each reel */
.cassette-reel-tape {
  position: absolute;
  border-radius: 50%;
  background: #2a1a0e;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  transition: width 0.3s ease, height 0.3s ease;
}

.cassette-reel--left .cassette-reel-tape {
  width: 160px;
  height: 160px;
}

.cassette-reel--right .cassette-reel-tape {
  width: 55px;
  height: 55px;
}

/* Spinning hub - SVG reel wheel */
.cassette-reel-hub {
  position: absolute;
  width: 64px;
  height: 64px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.cassette-reel-hub svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Tape Path SVG ────────────────────────────────── */
.cassette-tape-path {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.cassette-tape-line {
  fill: none;
  stroke: #2a1a0e;
  stroke-width: 2;
}

/* ── Spin Animations ──────────────────────────────── */
@keyframes cassette-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.cassette.is-playing .cassette-reel-hub {
  animation: cassette-spin 1.5s linear infinite;
}

.cassette.is-ff .cassette-reel-hub {
  animation: cassette-spin 0.3s linear infinite;
}

.cassette.is-rew .cassette-reel-hub {
  animation: cassette-spin 0.3s linear infinite reverse;
}

/* ── SoundCloud-style Waveform Hover ─────────────── */
.sc-hover {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  pointer-events: none;
  height: 100%;
  width: 0;
  mix-blend-mode: overlay;
  background: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.sc-waveform:hover .sc-hover {
  opacity: 1;
}

/* ── SoundCloud-style Volume Slider ──────────────── */
.sc-volume-slider {
  -webkit-appearance: none;
  appearance: none;
  background: #d1d5db;
  border-radius: 2px;
  outline: none;
}

.sc-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EE772F;
  cursor: pointer;
  border: none;
  margin-top: -8px;
}

.sc-volume-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #EE772F;
  cursor: pointer;
  border: none;
}

.sc-volume-slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
}

.sc-volume-slider::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: #d1d5db;
}

/* ── Handwritten Label ────────────────────────────── */
.cassette-label-handwriting {
  position: absolute;
  z-index: 4;
  top: 48px;
  left: 60px;
  right: 80px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-family: 'Rock Salt', cursive;
  font-size: 28px;
  color: rgba(40, 35, 25, 0.65);
  line-height: 1.6;
  padding: 0;
  text-align: center;
  pointer-events: none;
  transform: rotate(-1deg);
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */