:root {
    --bg: #e0d8c3; /* vintage paper */
    --black: #1a1a1a;
    --red: #d32f2f;
    --font-head: 'Anton', sans-serif;
    --font-body: 'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: var(--bg); color: var(--black); font-family: var(--font-body); overflow: hidden; }

.loader { position: fixed; top:0; left:0; width: 100vw; height: 100vh; background: var(--black); color: white; display: flex; align-items: center; justify-content: center; z-index: 1000; font-family: var(--font-head); font-size: 3rem; animation: fadeOut 1s 1s forwards; }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

.wrapper { display: flex; height: 100vh; padding: 4rem; }

.header { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.header h1 { font-family: var(--font-head); font-size: 8rem; line-height: 0.9; text-transform: uppercase; cursor: pointer; transition: color 0.3s; }
.header h1:hover { color: var(--red); }

/* Bounce Text Animation on hover */
.bounce-text { display: inline-block; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.bounce-text:hover { transform: scale(1.1) rotate(-2deg); }

/* Audio Visualizer */
.audio-visualizer { display: flex; gap: 5px; height: 100px; align-items: flex-end; margin-top: 4rem; }
.bar { width: 15px; background: var(--black); height: 10px; transition: height 0.1s ease; }
.playing .bar { animation: eq 0.5s infinite alternate; }
.playing .bar:nth-child(even) { animation-delay: 0.2s; animation-duration: 0.7s; }
.playing .bar:nth-child(3n) { animation-delay: 0.4s; animation-duration: 0.4s; }
@keyframes eq { 0% { height: 10px; } 100% { height: 100px; } }

/* Record Player */
.record-player { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.record { width: 450px; height: 450px; background: #111; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5), inset 0 0 20px rgba(255,255,255,0.2); transition: transform 0.3s; cursor: pointer; }
.record:hover { transform: scale(1.02); }
.grooves { position: absolute; width: 90%; height: 90%; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); border-top-color: rgba(255,255,255,0.2); border-bottom-color: rgba(255,255,255,0.2); }
.record-label { width: 150px; height: 150px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; border: 4px solid #111; }
.record-label::after { content: ''; width: 20px; height: 20px; background: var(--bg); border-radius: 50%; position: absolute; }
.record-label span { color: white; font-family: var(--font-head); font-size: 1.5rem; position: absolute; top: 20px; }

/* Spin animation */
.spin { animation: spin 2s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.record.spin:hover { transform: scale(1.02) rotate(10deg); } /* keeps scaling while spinning */

.controls { margin-top: 3rem; display: flex; gap: 2rem; }
.controls button { background: var(--black); color: white; border: none; padding: 1rem 3rem; font-family: var(--font-head); font-size: 1.5rem; cursor: pointer; border-radius: 50px; transition: 0.3s; }
.controls button:hover { background: var(--red); transform: translateY(-5px); box-shadow: 0 10px 20px rgba(211, 47, 47, 0.3); }

@media (max-width: 900px) {
    .wrapper { flex-direction: column; padding: 2rem; height: auto; }
    .header h1 { font-size: 5rem; }
    .record { width: 300px; height: 300px; margin-top: 4rem; }
}