/* '92 Subaru — global styles.
   Keyframes + pseudo-state rules that the design prototype expressed through
   its runtime (style-hover / style-focus / style-active). Everything else is
   inline in index.html, exactly as the prototype authored it. */

* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
a:hover { color: #d83a2b; }
::selection { background: #d83a2b; color: #efe8d6; }

@keyframes eqbar { 0%, 100% { transform: scaleY(.22); } 50% { transform: scaleY(1); } }
@keyframes xpulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes xscan { 0% { transform: translateY(-160px); } 100% { transform: translateY(700px); } }
@keyframes xflick { 0%, 100% { opacity: 1; } 91% { opacity: 1; } 93% { opacity: .6; } 95% { opacity: 1; } 97% { opacity: .82; } }
@keyframes cass-reel-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Cassette flip (Side A/B) + perspective wrapper. */
.cass-persp { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; perspective: 1400px; }
.cass-flip {
  width: 100%;
  transform: rotateY(var(--cass-flip, 0deg));
  transition: transform .8s cubic-bezier(.34, 1.2, .4, 1);
  transform-style: preserve-3d;
}

/* Deck play/pause button — nudge on press (was style-active). */
.deck-play:active { transform: translate(2px, 2px); }

/* Mixtape rows — hover wash (was style-hover). */
.mix-row:hover { background: #0000000a; }

/* Form inputs — focus ring (was style-focus). */
.spec-field:focus { border-color: #d83a2b; box-shadow: 0 0 0 3px rgba(216, 58, 43, .18); }

/* Submit button — press nudge (was style-active). */
.submit-btn:active { transform: translate(3px, 3px); box-shadow: 2px 2px 0 #17140f; }

/* ============ Mobile responsive pass (FR-020 / SC-005) ============
   The markup keeps the prototype's inline styles, so these overrides
   need !important to win. No horizontal overflow at 360–414px; booking
   form single-column in FR-001 order with ≥44px tap targets. */

.spec-field { min-height: 44px; }
.g-recaptcha { max-width: 100%; }

@media (max-width: 700px) {
  .nav-bar { padding: 12px 16px !important; }
  .nav-bar > div { gap: 14px !important; }

  .wrap { padding-left: 18px !important; padding-right: 18px !important; }

  /* Hero: BOOK ▸ drops out of the corner into the flow above the title. */
  .hero-inner { padding-top: 30px !important; }
  #hero-book { position: static !important; margin-bottom: 22px; transform: rotate(2deg); }
  .hero-title { font-size: clamp(52px, 17.5vw, 96px) !important; text-shadow: 4px 4px 0 #d83a2b !important; }

  .page-title { font-size: clamp(44px, 14.5vw, 96px) !important; text-shadow: 4px 4px 0 #d83a2b !important; }

  /* Book page: form + info panel stack; form rows collapse to one column
     (DOM order is the FR-001 field order). */
  .book-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  #form-body { padding: 20px 14px !important; }
}

/* The reCAPTCHA v2 checkbox iframe is a fixed 304px wide — scale it down
   slightly where the single column gets narrower than that. */
@media (max-width: 380px) {
  .g-recaptcha { transform: scale(.9); transform-origin: 0 0; }
}