/*! Enhanced iPhone Mockup for Sleepmate - Based on Devices.css */

/* Base device styles */
.device,
.device::before,
.device::after,
.device *,
.device *::before,
.device *::after {
  box-sizing: border-box;
  display: block;
}

.device {
  position: relative;
  transform: scale(1);
  z-index: 1;
}

.device .device-frame {
  z-index: 1;
}

.device .device-content {
  background-color: #000;
  background-position: center center;
  background-size: cover;
  position: relative;
  overflow: hidden;
}

/* iPhone 14 Pro Mockup */
.device-iphone-14 {
  height: 720px;
  width: 350px;
  margin: 0 auto;
}

.device-iphone-14 .device-frame {
  background: linear-gradient(145deg, #1a1a1a, #2d2d2d);
  border-radius: 58px;
  box-shadow: 
    inset 0 0 2px 2px rgba(141, 141, 142, 0.8),
    inset 0 0 0 6px #d4d4d4,
    0 25px 50px rgba(0, 0, 0, 0.4),
    0 10px 25px rgba(139, 92, 246, 0.15);
  height: 720px;
  padding: 24px;
  width: 350px;
  transition: all 0.3s ease;
}

.device-iphone-14 .device-content {
  border-radius: 36px;
  height: 672px;
  width: 302px;
  position: relative;
  overflow: hidden;
}

/* App Screenshot Container */
.device-iphone-14 .app-screenshot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 36px;
  transition: transform 0.3s ease;
}

/* Screen Glow Effect */
.device-iphone-14 .screen-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
    rgba(139, 92, 246, 0.1), 
    rgba(6, 182, 212, 0.1));
  border-radius: 36px;
  pointer-events: none;
  opacity: 0.6;
  animation: screenPulse 4s ease-in-out infinite;
}

/* Dynamic Island */
.device-iphone-14 .device-header {
  background: #1a1a1a;
  border-radius: 20px;
  height: 32px;
  left: 50%;
  margin-left: -60px;
  position: absolute;
  top: 24px;
  width: 120px;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.device-iphone-14 .device-header::after,
.device-iphone-14 .device-header::before {
  content: "";
  height: 8px;
  position: absolute;
  top: 0;
  width: 8px;
}

.device-iphone-14 .device-header::after {
  background: radial-gradient(circle at bottom left, transparent 0, transparent 75%, #1a1a1a 75%, #1a1a1a 100%);
  left: -8px;
}

.device-iphone-14 .device-header::before {
  background: radial-gradient(circle at bottom right, transparent 0, transparent 75%, #1a1a1a 75%, #1a1a1a 100%);
  right: -8px;
}

/* Side Buttons */
.device-iphone-14 .device-btns {
  background: linear-gradient(145deg, #c8cacb, #a8aaab);
  height: 32px;
  left: -3px;
  position: absolute;
  top: 120px;
  width: 4px;
  border-radius: 2px;
}

.device-iphone-14 .device-btns::after,
.device-iphone-14 .device-btns::before {
  background: linear-gradient(145deg, #c8cacb, #a8aaab);
  content: "";
  left: 0;
  position: absolute;
  width: 4px;
  border-radius: 2px;
}

.device-iphone-14 .device-btns::after {
  height: 55px;
  top: 50px;
}

.device-iphone-14 .device-btns::before {
  height: 55px;
  top: 120px;
}

.device-iphone-14 .device-power {
  background: linear-gradient(145deg, #c8cacb, #a8aaab);
  height: 85px;
  position: absolute;
  right: -3px;
  top: 180px;
  width: 4px;
  border-radius: 2px;
}

/* Phone Showcase Container */
.phone-showcase {
  perspective: 1200px;
  margin: 3rem 0;
}

.phone-container {
  position: relative;
  max-width: 350px;
  margin: 0 auto;
  transform-style: preserve-3d;
}

/* Floating Animation */
.device-iphone-14 {
  animation: phoneFloat 6s ease-in-out infinite;
  transition: transform 0.3s ease;
}

.device-iphone-14:hover {
  transform: rotateY(8deg) rotateX(5deg) scale(1.02);
  animation-play-state: paused;
}

.device-iphone-14:hover .app-screenshot {
  transform: scale(1.02);
}

.device-iphone-14:hover .device-frame {
  box-shadow: 
    inset 0 0 2px 2px rgba(141, 141, 142, 0.9),
    inset 0 0 0 6px #d4d4d4,
    0 35px 70px rgba(0, 0, 0, 0.5),
    0 15px 35px rgba(139, 92, 246, 0.25);
}

/* Background Elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.bg-element-1 {
  position: absolute;
  top: -30px;
  right: -50px;
  width: 80px;
  height: 80px;
  background: rgba(139, 92, 246, 0.1);
  border-radius: 50%;
  filter: blur(25px);
  animation: float 8s ease-in-out infinite;
}

.bg-element-2 {
  position: absolute;
  bottom: -40px;
  left: -60px;
  width: 100px;
  height: 100px;
  background: rgba(6, 182, 212, 0.1);
  border-radius: 50%;
  filter: blur(30px);
  animation: float 10s ease-in-out infinite reverse;
}

.bg-element-3 {
  position: absolute;
  top: 50%;
  right: -80px;
  width: 60px;
  height: 60px;
  background: rgba(74, 144, 226, 0.08);
  border-radius: 50%;
  filter: blur(20px);
  animation: float 7s ease-in-out infinite 2s;
}

/* Animations */
@keyframes phoneFloat {
  0%, 100% { 
    transform: translateY(0px) rotateY(0deg) rotateX(0deg); 
  }
  33% { 
    transform: translateY(-8px) rotateY(1deg) rotateX(1deg); 
  }
  66% { 
    transform: translateY(-5px) rotateY(-1deg) rotateX(-1deg); 
  }
}

@keyframes screenPulse {
  0%, 100% { 
    opacity: 0.4; 
  }
  50% { 
    opacity: 0.7; 
  }
}

@keyframes float {
  0%, 100% { 
    transform: translateY(0px) scale(1); 
  }
  50% { 
    transform: translateY(-20px) scale(1.05); 
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .device-iphone-14 {
    transform: scale(0.8);
    height: 576px;
    width: 280px;
  }
  
  .device-iphone-14 .device-frame {
    height: 576px;
    width: 280px;
    padding: 19px;
  }
  
  .device-iphone-14 .device-content {
    height: 538px;
    width: 242px;
  }
  
  .device-iphone-14:hover {
    transform: scale(0.82) rotateY(4deg) rotateX(2deg);
  }
  
  .bg-element-1,
  .bg-element-2,
  .bg-element-3 {
    display: none;
  }
}

@media (max-width: 480px) {
  .device-iphone-14 {
    transform: scale(0.7);
    height: 504px;
    width: 245px;
  }
  
  .device-iphone-14 .device-frame {
    height: 504px;
    width: 245px;
    padding: 17px;
  }
  
  .device-iphone-14 .device-content {
    height: 470px;
    width: 211px;
  }
}

/* Performance Optimizations */
.device-iphone-14 {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

.app-screenshot {
  will-change: transform;
  backface-visibility: hidden;
}

.screen-glow {
  will-change: opacity;
}