/* ============================================
   DEVICE SHOWCASE COMPONENT
   ============================================

   HTML STRUCTURE:
   ---------------
   <div class="device-showcase-container">
     <div class="device-showcase">
       <div class="device-tablet device device-ipad-pro">
         <div class="device-frame">
           <img class="device-screen" src="./assets/img/tablet-screen.jpg" alt="">
         </div>
       </div>
       <div class="device-phones">
         <div class="device device-iphone-14-pro">
           <div class="device-frame">
             <img class="device-screen" src="./assets/img/iphone-screen.jpg" alt="">
           </div>
           <div class="device-stripe"></div>
           <div class="device-header"></div>
           <div class="device-sensors"></div>
           <div class="device-btns"></div>
           <div class="device-power"></div>
         </div>
         <div class="device device-galaxy-s8">
           <div class="device-frame">
             <img class="device-screen" src="./assets/img/samsung-screen.jpg" alt="">
           </div>
           <div class="device-stripe"></div>
           <div class="device-header"></div>
           <div class="device-sensors"></div>
           <div class="device-btns"></div>
           <div class="device-power"></div>
         </div>
       </div>
     </div>
   </div>

   REQUIRES:
   ---------
   - devices.css library (CDN or local)
   
   ============================================ */

.device-showcase {
  
  --showcase-width: 700px;
  --showcase-height: 550px;
  
  --tablet-scale: 0.65;
  --phone-scale: 0.5;
  
  --phone-gap: 100px;
  --phone-rotation: 18deg;
  --phone-offset-y: 25%;
  
  position: relative;
  width: var(--showcase-width);
  height: var(--showcase-height);
  
}

.device-showcase .device-tablet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(var(--tablet-scale));
  z-index: 1;
}

.device-showcase .device-phones {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--phone-gap);
  z-index: 2;
}

.device-showcase .device-phones .device-iphone-14-pro {
  transform: 
    scale(var(--phone-scale)) 
    rotate(calc(-1 * var(--phone-rotation))) 
    translateY(var(--phone-offset-y));
}

.device-showcase .device-phones .device-galaxy-s8 {
  transform: 
    scale(var(--phone-scale)) 
    rotate(var(--phone-rotation)) 
    translateY(var(--phone-offset-y));
}

.device-showcase-container {

  --scale: clamp(0.35, calc(100vw / 1400px), 1);
  width: calc(700px * var(--scale));
  height: calc(550px * var(--scale));
  
  display: flex;
  justify-content: center;
  align-items: center;
  
  overflow: visible;
}

.device-showcase-container .device-showcase {
  transform: scale(var(--scale));
  transform-origin: center center;
  flex-shrink: 0;
}