style: adjust music player hover transformation offsets and scale factor

resources/views/front/music-productions/index.blade.php

@@ -107,35 +107,36 @@
             $detailUrl = route('music-productions.show', $production->slug);
           @endphp
           <div class="project item xl:w-4/12 lg:w-6/12 md:w-6/12 w-full flex-[0_0_auto] max-w-full {{ $variant['filter'] }} px-[20px] xl:!px-[25px] lg:!px-[25px] !mt-[2rem] xl:!mt-[2.5rem] lg:!mt-[2.5rem]">
-            <div class="card !shadow-[0_0.25rem_1.75rem_rgba(30,34,40,0.07)]">
-              <figure class="card-img-top music-production-cover itooltip {{ $variant['tooltip'] }}" title='<h5 class="!mb-0">{{ e(__('music_productions.view_details_tooltip')) }}</h5>'>
-                <a href="{{ $detailUrl }}" class="music-production-cover__link">
-                  @if($production->cover_image_url)
-                    <img src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}" loading="lazy">
-                  @else
-                    <img src="{{ asset('assets/img/photos/pd6.jpg') }}" alt="{{ $production->translate('title') }}" loading="lazy">
-                  @endif
-                </a>
-              </figure>
-              <div class="card-body p-7">
-                <div class="post-header">
-                  <div class="d-none {{ $variant['label_class'] }}">
+            <div class="player-container">
+              <div class="player" data-player data-playlist="prod-{{ $production->id }}" data-track="0">
+                <div class="player__content">
+                  <div class="player__artist">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
+                  <div class="player__album">
                     @if($production->production_date)
-                      {{ $production->production_date->format('d.m.Y') }}
+                      {{ $production->production_date->format('Y') }}
                     @else
-                      {{ __('music_productions.production_date_unknown') }}
+                      &nbsp;
                     @endif
                   </div>
-             
-                  <h3 class="!mb-0 truncate" title="{{ $production->translate('title') }}">{{ $production->translate('title') }}</h3>
+                  <div class="player__track">{{ $production->translate('title') }}</div>
                 </div>
-                <!-- /.post-header -->
+
+                <a href="{{ $detailUrl }}" class="album" data-album>
+                  @if($production->cover_image_url)
+                    <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
+                  @else
+                    <div class="album__cover" style="background-image: url('{{ asset('assets/img/photos/pd6.jpg') }}');"></div>
+                  @endif
+                  <div class="vinyl">
+                    <div class="vinyl__shadow"></div>
+                    <div class="vinyl__circle">
+                      <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url ?: asset('assets/img/photos/pd6.jpg') }}')"></div>
+                    </div> 
+                  </div>
+                </a>
               </div>
-              <!-- /.card-body -->
             </div>
-            <!-- /.card -->
           </div>
-          <!-- /.project -->
         @endforeach
       </div>
       <!-- /.row -->
@@ -308,5 +309,253 @@
   opacity: 0.5;
   cursor: not-allowed;
 }
+
+/* --- Vinyl Player Styles --- */
+:root {
+  --color-black: #000;
+  --color-gray: #5e6062;
+  --color-white: #fff;
+  --color-yellow: #f0f39c;
+  --color-yellow-light: #fff99e;
+  --transition-time: 250ms;
+  --transition-method: ease-in-out;
+  --album-size: 260px;
+  --vinyl-offset: 15px;
+  --vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
+  --vinyl-center-size: 110px;
+}
+
+.player-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 15px 0;
+  perspective: 1000px;
+}
+
+.player {
+  color: var(--color-gray);
+  font-family: 'Raleway', 'Outfit', sans-serif;
+  height: var(--album-size);
+  line-height: 1.2;
+  position: relative;
+  width: var(--album-size);
+  transition: all var(--transition-time) var(--transition-method);
+  margin: 0 auto;
+}
+
+.player::after {
+  transform: rotate(-2deg);
+  transition: all var(--transition-time) var(--transition-method);
+  background: #777;
+  bottom: 12px;
+  box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
+  content: '';
+  height: 10px;
+  left: 2%;
+  opacity: 0;
+  padding-left: 5%;
+  position: absolute;
+  width: 96%;
+  z-index: 5;
+}
+
+.player:hover::after {
+  opacity: 0.6;
+}
+
+.player .player__content {
+  background-color: var(--color-white);
+  height: 100%;
+  padding: 50px 15px 0 15px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  text-align: left;
+  width: 100%;
+  z-index: 50;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border: 1px solid rgba(8, 60, 130, 0.05);
+  transition: all var(--transition-time) var(--transition-method);
+}
+
+.player .player__artist {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 3px;
+  max-width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #343f52;
+}
+
+.player .player__album {
+  font-size: 13px;
+  font-weight: 300;
+  margin-bottom: 15px;
+  max-width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #a4aec6;
+}
+
+.player .player__track {
+  font-size: 12px;
+  font-weight: 400;
+  margin-bottom: 15px;
+  max-width: 140px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #60697b;
+}
+
+.player .player__track::before,
+.player .player__track::after {
+  content: '"';
+  font-size: 14px;
+  vertical-align: middle;
+}
+
+.album {
+  transition: all var(--transition-time) var(--transition-method);
+  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  border-radius: 8px;
+}
+
+.project.item:has(.player:hover) {
+  z-index: 9999 !important;
+}
+
+.player:hover {
+  z-index: 999;
+}
+
+.player:hover .player__content {
+  transform: translateX(-160px);
+  box-shadow: -10px 15px 35px rgba(0,0,0,0.1);
+}
+
+.player:hover .album {
+  transform: scale(1.2);
+  z-index: 150;
+  box-shadow: 0px 15px 35px rgba(0, 0, 0, 0.25);
+}
+
+.album__cover {
+  background-color: var(--color-black);
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 20;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.vinyl {
+  transition: all var(--transition-time) var(--transition-method);
+  left: calc(var(--vinyl-offset) / 2);
+  position: absolute;
+  top: calc(var(--vinyl-offset) / 2);
+  height: var(--vinyl-size);
+  width: var(--vinyl-size);
+  z-index: 10;
+}
+
+.vinyl__shadow,
+.vinyl__circle {
+  border-radius: 100%;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.vinyl__shadow {
+  box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.2);
+  z-index: 5;       
+}
+
+.vinyl__circle {
+  animation: rotate-vinyl 3s linear infinite both paused;
+  background-color: #1e1b1b;
+  background-image: radial-gradient(circle, #2c2727 10%, transparent 10%), 
+                    repeating-radial-gradient(circle, #2c2727, #1e1b1b 2px, #2c2727 4px);
+  z-index: 10;
+  transition: box-shadow var(--transition-time) var(--transition-method);
+}
+
+.player:hover .vinyl {
+  left: 60%;
+}
+
+.player:hover .vinyl__circle {
+  animation-play-state: running;
+  box-shadow: 0 0 25px rgba(0, 0, 0, 0.35), 0 0 50px rgba(3, 3, 3, 0.35);
+}
+
+.vinyl__center {
+  transform: translate(-50%, -50%);
+  background-color: #292424;
+  border-radius: 100%;
+  height: var(--vinyl-center-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  width: var(--vinyl-center-size);
+}
+
+.vinyl__center::before,
+.vinyl__center::after {
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  content: '';
+  left: 50%;
+  position: absolute;
+  top: 50%;
+}
+
+.vinyl__center::before {
+  background-color: #e31e24;
+  background-image: var(--center-bg);
+  background-size: cover;
+  background-position: center;
+  height: calc(var(--vinyl-center-size) - 20px);
+  width: calc(var(--vinyl-center-size) - 20px);
+  z-index: 5;
+}
+
+.vinyl__center::after {
+  background-color: #fff;
+  height: 20px;
+  width: 20px;
+  z-index: 10;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+}
+
+@keyframes rotate-vinyl {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
 </style>
 @endpush

resources/views/front/music-productions/show.blade.php

@@ -29,11 +29,70 @@
     <div class="flex flex-wrap mx-[-15px]">
       <div class="w-full flex-[0_0_auto] !px-[15px] max-w-full">
         <article class="!mt-[-12.5rem]">
-          {{-- Cover Image --}}
+          @php
+            $videoId = null;
+            if ($production->youtube_video_id) {
+                $videoId = $production->youtube_video_id;
+            } elseif ($production->youtube_url) {
+                if (preg_match('%(?:youtube(?:-nocookie)?\.com/(?:[^/]+/.+/|(?:v|e(?:mbed)?)/|.*[?&]v=)|youtu\.be/)([^"&?/ ]{11})%i', $production->youtube_url, $match)) {
+                    $videoId = $match[1];
+                }
+            }
+          @endphp
+
+          {{-- Vinyl Player Mockup --}}
           @if($production->cover_image_url)
-          <figure class="!rounded-[.4rem] !mb-8 xl:!mb-[3.5rem] lg:!mb-[3.5rem] md:!mb-[3.5rem] overflow-hidden shadow-lg">
-            <img class="!rounded-[.4rem] w-full" src="{{ $production->cover_image_url }}" alt="{{ $production->translate('title') }}">
-          </figure>
+          <div class="player-container flex justify-center !mb-12 xl:!mb-16">
+              <div class="player player--open" id="detail-vinyl-player" data-player>
+                <div class="player__content">
+                  <div class="player__artist has-fade-in">{{ $production->translate('client_name') ?: __('music_productions.card_category_default') }}</div>
+                  <div class="player__album has-fade-in">
+                    @if($production->production_date)
+                      {{ $production->production_date->format('Y') }}
+                    @else
+                      &nbsp;
+                    @endif
+                  </div>
+                  <div class="player__track has-fade-in">{{ $production->translate('title') }}</div>
+
+                  <div class="album" data-album>
+                    <div class="album__cover" style="background-image: url('{{ $production->cover_image_url }}');"></div>
+                    <div class="vinyl">
+                      <div class="vinyl__shadow"></div>
+                      <div class="vinyl__circle">
+                        <div class="vinyl__center" style="--center-bg: url('{{ $production->cover_image_url }}')"></div>
+                      </div> 
+                    </div>
+                  </div>
+
+                  <div class="player__controls has-fade-in">
+                    @if($prev)
+                    <a href="{{ route('music-productions.show', $prev->slug) }}" class="player__controls-item player__controls-item--prev" title="{{ __('music_productions.prev') }}"></a>
+                    @else
+                    <div class="player__controls-item player__controls-item--prev opacity-30 cursor-not-allowed"></div>
+                    @endif
+                    
+                    <div class="player__controls-item player__controls-item--play" id="play-cd-btn" title="{{ __('music_productions.youtube_watch_on_youtube') }}">
+                      <div class="rectangle"></div>
+                      <div class="triangle"></div>
+                    </div>
+
+                    @if($next)
+                    <a href="{{ route('music-productions.show', $next->slug) }}" class="player__controls-item player__controls-item--next" title="{{ __('music_productions.next') }}"></a>
+                    @else
+                    <div class="player__controls-item player__controls-item--next opacity-30 cursor-not-allowed"></div>
+                    @endif
+                  </div>
+                </div>
+              </div>
+          </div>
+          @endif
+
+          {{-- Hidden Background YouTube Player --}}
+          @if($videoId)
+          <div id="hidden-youtube-player-container" style="position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; left: -9999px;">
+            <div id="hidden-youtube-player"></div>
+          </div>
           @endif
 
           {{-- Content & Meta --}}
@@ -49,7 +108,7 @@
                 </div>
 
                 {{-- Sidebar - Date & Client --}}
-                <div class="xl:w-2/12 lg:w-2/12 md:w-2/12 w-full flex-[0_0_auto] max-w-full !ml-auto">
+                <div class="xl:w-3/12 lg:w-3/12 md:w-3/12 w-full flex-[0_0_auto] max-w-full !ml-auto">
                   <ul class="pl-0 list-none">
                     @if($production->production_date)
                     <li>
@@ -64,17 +123,27 @@
                     </li>
                     @endif
                     @if($production->spotify_url)
-                    <li>
+                    <li class="!mb-3">
                       <h5 class="!mb-1">Spotify</h5>
                       <p>
-                        <a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-primary !rounded-[50rem]">
+                        <a href="{{ $production->spotify_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-primary !rounded-[50rem] w-full text-center">
                           {{ __('music_productions.spotify_listen_on_spotify') }}
                         </a>
                       </p>
                     </li>
                     @endif
+                    @if($production->youtube_url)
+                    <li class="!mb-3">
+                      <h5 class="!mb-1">YouTube</h5>
+                      <p>
+                        <a href="{{ $production->youtube_url }}" target="_blank" rel="noopener noreferrer" class="btn btn-sm btn-soft-red !rounded-[50rem] w-full text-center" style="background-color: rgba(227, 30, 36, 0.1); color: #e31e24;">
+                          {{ __('music_productions.youtube_watch_on_youtube') }}
+                        </a>
+                      </p>
+                    </li>
+                    @endif
                   </ul>
-                  <a href="{{ route('music-productions.index') }}" class="more hover">
+                  <a href="{{ route('music-productions.index') }}" class="more hover mt-4 inline-block">
                     <i class="uil uil-arrow-left before:content-['\e949'] !mr-1"></i>
                     {{ __('music_productions.back_to_list') }}
                   </a>
@@ -134,6 +203,415 @@
 
 @push('styles')
 <style>
+/* --- Vinyl Player Styles --- */
+:root {
+  --color-black: #000;
+  --color-gray: #5e6062;
+  --color-white: #fff;
+  --color-yellow: #f0f39c;
+  --color-yellow-light: #fff99e;
+  --transition-time: 250ms;
+  --transition-method: ease-in-out;
+  --album-size: 310px;
+  --vinyl-offset: 20px;
+  --vinyl-size: calc(var(--album-size) - var(--vinyl-offset));
+  --vinyl-center-size: 130px;
+}
+
+.player-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 0;
+  perspective: 1000px;
+}
+
+.player {
+  color: var(--color-gray);
+  font-family: 'Raleway', 'Outfit', sans-serif;
+  height: var(--album-size);
+  line-height: 1.2;
+  position: relative;
+  width: var(--album-size);
+  transition: all var(--transition-time) var(--transition-method);
+  margin: 0 auto;
+}
+
+.player::after {
+  transform: rotate(-2deg);
+  transition: all var(--transition-time) var(--transition-method);
+  background: #777;
+  bottom: 12px;
+  box-shadow: 0 15px 23px rgba(0, 0, 0, 0.3);
+  content: '';
+  height: 10px;
+  left: 2%;
+  opacity: 0;
+  padding-left: 5%;
+  position: absolute;
+  width: 96%;
+  z-index: 5;
+}
+
+.player--open::after {
+  opacity: 0.6;
+}
+
+.player .player__content {
+  background-color: var(--color-white);
+  height: 100%;
+  padding: 70px 20px 0 20px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  z-index: 10;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  border: 1px solid rgba(8, 60, 130, 0.05);
+}
+
+.player .player__artist {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 5px;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #343f52;
+}
+
+.player .player__album {
+  font-size: 15px;
+  font-weight: 300;
+  margin-bottom: 20px;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #a4aec6;
+}
+
+.player .player__track {
+  font-size: 14px;
+  font-weight: 400;
+  margin-bottom: 20px;
+  max-width: 180px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  color: #60697b;
+}
+
+.player .player__track::before,
+.player .player__track::after {
+  content: '"';
+  font-size: 16px;
+  vertical-align: middle;
+}
+
+.player--open {
+  border-radius: 8px;
+  height: 320px;
+  position: relative;
+  width: 440px;
+}
+
+.player__controls {
+  position: absolute;
+  bottom: 25px;
+  left: 20px;
+  text-align: left;
+  white-space: nowrap;
+  width: 180px;
+  z-index: 15;
+}
+
+.player__controls-item {
+  user-select: none;
+  -webkit-user-select: none;
+  cursor: pointer;
+  display: inline-block;
+  height: 26px;
+  margin-right: 15px;
+  position: relative;
+  width: 26px;
+  vertical-align: middle;
+}
+
+.player__controls-item--play {
+  overflow: hidden;
+}
+
+.player__controls-item--play .rectangle,
+.player__controls-item--play .triangle {
+  height: 26px;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 26px;
+}
+
+.player__controls-item--play .rectangle {
+  z-index: 5;
+}
+
+.player__controls-item--play .rectangle::before,
+.player__controls-item--play .rectangle::after {
+  transition: all 0.3s ease;
+  background-color: #e31e24;
+  content: '';
+  height: 100%;
+  width: 50%;
+}
+
+.player--playing .player__controls-item--play .rectangle::before,
+.player--playing .player__controls-item--play .rectangle::after {
+  width: 30%;
+}
+
+.player__controls-item--play .rectangle::before {
+  float: left;
+  overflow: hidden;
+}
+
+.player__controls-item--play .rectangle::after {
+  float: right;
+}
+
+.player__controls-item--play .triangle {
+  z-index: 10;
+}
+
+.player__controls-item--play .triangle::before,
+.player__controls-item--play .triangle::after {
+  transition: all 0.3s ease;
+  background-color: transparent;
+  border-bottom: 13px solid transparent;
+  border-right: 26px solid #fff;
+  border-top: 13px solid transparent;
+  content: '';
+  height: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 0;
+}
+
+.player__controls-item--play .triangle::before {
+  transform: translate(0, -50%);
+}
+
+.player--playing .player__controls-item--play .triangle::before {
+  transform: translate(0, -100%);
+}
+
+.player__controls-item--play .triangle::after {
+  transform: translate(0, 50%);
+}
+
+.player--playing .player__controls-item--play .triangle::after {
+  transform: translate(0, 100%);
+}
+
+.player__controls-item--play:hover .rectangle::before,
+.player__controls-item--play:hover .rectangle::after {
+  background-color: #c1181d;
+}
+
+.player__controls-item--next,
+.player__controls-item--prev {
+  width: 32px;
+}
+
+.player__controls-item--next::before,
+.player__controls-item--next::after,
+.player__controls-item--prev::before,
+.player__controls-item--prev::after {
+  transition: all 0.3s ease;
+  border-bottom: 13px solid transparent;
+  border-top: 13px solid transparent;
+  content: '';
+  height: 0;
+  position: absolute;
+  top: 0;
+  width: 0;
+}
+
+.player__controls-item--next::before,
+.player__controls-item--next::after {
+  border-left: 16px solid #e31e24;
+}
+
+.player__controls-item--next::before {
+  left: 0;
+}
+
+.player__controls-item--next::after {
+  left: 10px;
+}
+
+.player__controls-item--next:hover::before,
+.player__controls-item--next:hover::after {
+  border-left-color: #c1181d;
+}
+
+.player__controls-item--prev::before,
+.player__controls-item--prev::after {
+  border-right: 16px solid #e31e24;
+}
+
+.player__controls-item--prev::before {
+  right: 0;
+}
+
+.player__controls-item--prev::after {
+  right: 10px;
+}
+
+.player__controls-item--prev:hover::before,
+.player__controls-item--prev:hover::after {
+  border-right-color: #c1181d;
+}
+
+.album {
+  transform: translateY(-50%);
+  transition: all var(--transition-time) var(--transition-method);
+  box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+  height: var(--album-size);
+  position: absolute;
+  right: 0;
+  top: 50%;
+  width: var(--album-size);
+  z-index: 100;
+  border-radius: 8px;
+}
+
+.player--open .album {
+  cursor: default;
+  right: -80px;
+}
+
+.album__cover {
+  background-color: var(--color-black);
+  background-size: cover;
+  background-position: center;
+  height: 100%;
+  position: relative;
+  width: 100%;
+  z-index: 20;
+  border-radius: 8px;
+  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.vinyl {
+  transition: all var(--transition-time) var(--transition-method);
+  left: calc(var(--vinyl-offset) / 2);
+  position: absolute;
+  top: calc(var(--vinyl-offset) / 2);
+  height: var(--vinyl-size);
+  width: var(--vinyl-size);
+  z-index: 10;
+}
+
+.vinyl__shadow,
+.vinyl__circle {
+  border-radius: 100%;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+
+.vinyl__shadow {
+  box-shadow: 2px 8px 15px rgba(0, 0, 0, 0.2);
+  z-index: 5;       
+}
+
+.vinyl__circle {
+  animation: rotate-vinyl 3s linear infinite both paused;
+  background-color: #1e1b1b;
+  background-image: radial-gradient(circle, #2c2727 10%, transparent 10%), 
+                    repeating-radial-gradient(circle, #2c2727, #1e1b1b 2px, #2c2727 4px);
+  z-index: 10;
+}
+
+.player--open .vinyl {
+  left: 0 !important;
+}
+
+.player--playing .vinyl {
+  left: 45% !important;
+}
+
+.player--playing .vinyl__circle {
+  animation-play-state: running;
+}
+
+.vinyl__center {
+  transform: translate(-50%, -50%);
+  background-color: #292424;
+  border-radius: 100%;
+  height: var(--vinyl-center-size);
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  width: var(--vinyl-center-size);
+}
+
+.vinyl__center::before,
+.vinyl__center::after {
+  transform: translate(-50%, -50%);
+  border-radius: 100%;
+  content: '';
+  left: 50%;
+  position: absolute;
+  top: 50%;
+}
+
+.vinyl__center::before {
+  background-color: #e31e24;
+  background-image: var(--center-bg);
+  background-size: cover;
+  background-position: center;
+  height: calc(var(--vinyl-center-size) - 20px);
+  width: calc(var(--vinyl-center-size) - 20px);
+  z-index: 5;
+}
+
+.vinyl__center::after {
+  background-color: #fff;
+  height: 20px;
+  width: 20px;
+  z-index: 10;
+  box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+}
+
+@keyframes rotate-vinyl {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.has-fade-in {
+  transition: all calc(var(--transition-time) * 2) var(--transition-method);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.player--open .has-fade-in {
+  opacity: 1;
+  pointer-events: auto;
+}
+
 /* Content styling */
 .music-production-content p {
   margin-bottom: 1rem;
@@ -167,6 +645,121 @@ article {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
 }
+
+/* Flatten elements when lightbox is open to fix stacking context issues */
+body.lightbox-open .player-container,
+body.lightbox-open .player {
+  transform: none !important;
+  perspective: none !important;
+  z-index: 1 !important;
+}
 </style>
 @endpush
+
+@push('scripts')
+<script>
+// Load YouTube Iframe Player API dynamically
+var tag = document.createElement('script');
+tag.src = "https://www.youtube.com/iframe_api";
+var firstScriptTag = document.getElementsByTagName('script')[0];
+firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
+
+var ytPlayer;
+var isPlayerReady = false;
+
+window.onYouTubeIframeAPIReady = function() {
+    ytPlayer = new YT.Player('hidden-youtube-player', {
+        height: '1',
+        width: '1',
+        videoId: "{{ $videoId }}",
+        playerVars: {
+            'autoplay': 0,
+            'controls': 0,
+            'disablekb': 1,
+            'fs': 0,
+            'modestbranding': 1,
+            'rel': 0,
+            'showinfo': 0
+        },
+        events: {
+            'onReady': onPlayerReady,
+            'onStateChange': onPlayerStateChange
+        }
+    });
+}
+
+function onPlayerReady(event) {
+    isPlayerReady = true;
+    
+    // Check if auto-play was active from previous page
+    const autoPlayActive = localStorage.getItem('vinyl_auto_play') === 'true';
+    if (autoPlayActive) {
+        startPlayback();
+    }
+}
+
+function onPlayerStateChange(event) {
+    const playerEl = document.getElementById('detail-vinyl-player');
+    if (!playerEl) return;
+
+    if (event.data === YT.PlayerState.PLAYING) {
+        playerEl.classList.add('player--playing');
+        localStorage.setItem('vinyl_auto_play', 'true');
+    } else if (event.data === YT.PlayerState.PAUSED || event.data === YT.PlayerState.ENDED) {
+        playerEl.classList.remove('player--playing');
+        if (event.data === YT.PlayerState.ENDED) {
+            localStorage.setItem('vinyl_auto_play', 'false');
+        }
+    }
+}
+
+function startPlayback() {
+    if (isPlayerReady && ytPlayer && typeof ytPlayer.playVideo === 'function') {
+        ytPlayer.playVideo();
+    }
+}
+
+function pausePlayback() {
+    if (isPlayerReady && ytPlayer && typeof ytPlayer.pauseVideo === 'function') {
+        ytPlayer.pauseVideo();
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    const playBtn = document.getElementById('play-cd-btn');
+    const playerEl = document.getElementById('detail-vinyl-player');
+
+    if (playBtn) {
+        playBtn.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (!isPlayerReady) return;
+
+            if (playerEl.classList.contains('player--playing')) {
+                pausePlayback();
+                localStorage.setItem('vinyl_auto_play', 'false');
+            } else {
+                startPlayback();
+                localStorage.setItem('vinyl_auto_play', 'true');
+            }
+        });
+    }
+
+    // Capture next/prev clicks to persist play state
+    const prevBtn = document.querySelector('.player__controls-item--prev');
+    const nextBtn = document.querySelector('.player__controls-item--next');
+
+    [prevBtn, nextBtn].forEach(btn => {
+        if (btn && btn.tagName === 'A') {
+            btn.addEventListener('click', function() {
+                if (playerEl && playerEl.classList.contains('player--playing')) {
+                    localStorage.setItem('vinyl_auto_play', 'true');
+                } else {
+                    localStorage.setItem('vinyl_auto_play', 'false');
+                }
+            });
+        }
+    });
+});
+</script>
+@endpush
 @endsection