@keyframes vinyl-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    @keyframes ticker-scroll {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }

    @keyframes fade-up {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes fade-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    @keyframes clip-in-left {
      from { clip-path: inset(0 100% 0 0); }
      to   { clip-path: inset(0 0% 0 0); }
    }

    @keyframes scale-in {
      from { opacity: 0; transform: scale(0.92); }
      to   { opacity: 1; transform: scale(1); }
    }

    @keyframes float {
      0%, 100% { transform: translateY(0px) rotate(var(--float-rot, 0deg)); }
      50%       { transform: translateY(-14px) rotate(var(--float-rot, 0deg)); }
    }

    @keyframes pulse-glow {
      0%, 100% { box-shadow: 0 0 20px rgba(0, 200, 255, 0.15); }
      50%       { box-shadow: 0 0 50px rgba(0, 200, 255, 0.35); }
    }

    @keyframes scanline {
      from { transform: translateY(-100%); }
      to   { transform: translateY(100vh); }
    }

    @keyframes waveform-dance {
      0%, 100% { transform: scaleY(0.4); }
      50%       { transform: scaleY(1); }
    }

    @keyframes number-count {
      from { opacity: 0; transform: translateY(8px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    @keyframes dot-float-1 {
      0%, 100% { transform: translate(0, 0); opacity: 0.4; }
      33%       { transform: translate(20px, -30px); opacity: 0.8; }
      66%       { transform: translate(-15px, 10px); opacity: 0.3; }
    }

    @keyframes dot-float-2 {
      0%, 100% { transform: translate(0, 0); opacity: 0.3; }
      50%       { transform: translate(-25px, 20px); opacity: 0.7; }
    }

    @keyframes hero-line-grow {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    /* ─── VINYL SPIN ─────────────────────────────────────────── */
    .vinyl-disc {
      animation: vinyl-spin 4s linear infinite;
    }

    /* ─── TICKER ─────────────────────────────────────────────── */
    .ticker__track {
      animation: ticker-scroll 22s linear infinite;
    }

    .ticker:hover .ticker__track {
      animation-play-state: paused;
    }

    /* ─── SCROLL REVEAL — Base State ─────────────────────────── */
    /* Elements start invisible; JS adds .revealed when in viewport */
    [data-reveal] {
      opacity: 0;
      transform: translateY(32px);
      transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo);
    }

    [data-reveal="clip"] {
      opacity: 1;
      transform: none;
      clip-path: inset(0 100% 0 0);
      transition: clip-path 0.8s var(--ease-out-expo);
    }

    [data-reveal="scale"] {
      opacity: 0;
      transform: scale(0.93);
      transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo);
    }

    [data-reveal="left"] {
      opacity: 0;
      transform: translateX(-32px);
      transition:
        opacity var(--dur-slow) var(--ease-out-expo),
        transform var(--dur-slow) var(--ease-out-expo);
    }

    [data-reveal].revealed {
      opacity: 1;
      transform: translateY(0) translateX(0) scale(1);
      clip-path: inset(0 0% 0 0);
    }

    /* Stagger delays — applied via data-delay attribute in HTML */
    [data-delay="1"] { transition-delay: 0.1s; }
    [data-delay="2"] { transition-delay: 0.2s; }
    [data-delay="3"] { transition-delay: 0.3s; }
    [data-delay="4"] { transition-delay: 0.4s; }
    [data-delay="5"] { transition-delay: 0.5s; }
    [data-delay="6"] { transition-delay: 0.6s; }

    /* ─── HERO ENTRY ANIMATIONS ──────────────────────────────── */
    .hero__eyebrow    { animation: fade-up 0.7s 0.3s var(--ease-out-expo) both; }
    .hero__title      { animation: fade-up 0.9s 0.5s var(--ease-out-expo) both; }
    .hero__subtitle   { animation: fade-up 0.7s 0.7s var(--ease-out-expo) both; }
    .hero__actions    { animation: fade-up 0.7s 0.85s var(--ease-out-expo) both; }
    .hero__stats      { animation: fade-up 0.7s 1.0s var(--ease-out-expo) both; }
    .hero__visual     { animation: scale-in 1.2s 0.4s var(--ease-out-expo) both; }

    /* ─── FLOATING PARTICLES ─────────────────────────────────── */
    .hero__dot:nth-child(1) { animation: dot-float-1 6s ease-in-out infinite; }
    .hero__dot:nth-child(2) { animation: dot-float-2 8s ease-in-out infinite 1s; }
    .hero__dot:nth-child(3) { animation: dot-float-1 7s ease-in-out infinite 2s; }

    /* ─── WAVEFORM BARS ──────────────────────────────────────── */
    .waveform-bar:nth-child(odd) {
      animation: waveform-dance 1.2s ease-in-out infinite;
    }

    .waveform-bar:nth-child(even) {
      animation: waveform-dance 1.0s ease-in-out infinite 0.15s;
    }

    /* Vary wave heights via nth-child selectors */
    .waveform-bar:nth-child(3n)   { animation-duration: 0.9s; }
    .waveform-bar:nth-child(4n)   { animation-duration: 1.4s; }
    .waveform-bar:nth-child(5n)   { animation-duration: 1.1s; }

    /* ─── VINYL PULSE ────────────────────────────────────────── */
    .vinyl-disc {
      animation: vinyl-spin 4s linear infinite, pulse-glow 3s ease-in-out infinite;
    }

    /* ─── SCAN LINE ──────────────────────────────────────────── */
    .hero__scanline {
      position: absolute;
      left: 0; right: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(0,200,255,0.15), transparent);
      animation: scanline 5s linear infinite;
      pointer-events: none;
      z-index: 3;
    }

    /* ─── CARD HOVER SHIMMER ─────────────────────────────────── */
    .release-card::after,
    .artist-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(0, 200, 255, 0.04) 50%,
        transparent 60%
      );
      transform: translateX(-100%);
      transition: transform 0.6s var(--ease-out-expo);
    }

    .release-card:hover::after,
    .artist-card:hover::after {
      transform: translateX(100%);
    }