.laptop-phone-mockup-devices {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;

  /* Animation States */
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

  &.animate-in {
    opacity: 1;
    transform: translateY(0);
  }

  .device-mockups {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 1100px;
    margin: 0;
  }

  /* Laptop Mockup Styles */
  .laptop-mockup {
    position: relative;
    z-index: 2;
    max-width: 900px;
    width: 100%;
    opacity: 0;
    transform: translateX(-80px) rotateY(15deg) rotate(3deg);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;

    &:hover .laptop-frame {
      transform: translateX(-20px) rotate(-1deg) scale(1.02);
    }
  }

  &.animate-in .laptop-mockup {
    opacity: 1;
    transform: translateX(0) rotateY(0deg) rotate(0deg);
  }

  .laptop-frame {
    position: relative;
    aspect-ratio: 3560 / 2200;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('/static/showcases/devices/mbp-13-spacegrey.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 2;
      pointer-events: none;
    }
  }

  .laptop-screen {
    position: absolute;
    /* MacBook screen coordinates: top-left (500,300) to bottom-right (3060,1900) on 3560×2200 image */
    left: 14.04%; /* 500/3560 */
    top: 13.64%; /* 300/2200 */
    width: 71.91%; /* 2560/3560 */
    height: 72.73%; /* 1600/2200 */
    z-index: 1;
    overflow: hidden;

    /* Black shadow layer for laptop */
    &::before {
      content: '';
      position: absolute;
      top: -5%;
      left: -5%;
      width: 110%;
      height: 110%;
      background-color: #000;
      z-index: 0;
    }
  }

  .laptop-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.6s;
    position: relative;
    z-index: 1;
  }

  &.animate-in .laptop-screenshot {
    opacity: 1;
    transform: scale(1);
  }

  /* Phone Mockup Styles */
  .phone-mockup {
    position: absolute;
    right: 8%;
    bottom: 0;
    z-index: 2;
    width: 22%;
    max-width: 220px;
    opacity: 0;
    transform: translateX(60px) translateY(30px) rotateZ(-5deg);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;

    &:hover .phone-frame {
      transform: translateX(15px) rotate(3deg) scale(1.05);
    }
  }

  &.animate-in .phone-mockup {
    opacity: 1;
    transform: translateX(0) translateY(0) rotateZ(0deg);
  }

  .phone-frame {
    position: relative;
    aspect-ratio: 1684 / 3178;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('/static/showcases/devices/iphone13pm-graphite.png');
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      z-index: 2;
      pointer-events: none;
    }
  }

  .phone-screen {
    position: absolute;
    /* iPhone screen coordinates: top-left (200,200) to bottom-right (1480,2980) on 1684×3178 image */
    left: 11.88%; /* 200/1684 */
    top: 6.29%; /* 200/3178 */
    width: 76.01%; /* 1280/1684 */
    height: 87.47%; /* 2780/3178 */
    z-index: 1;
    overflow: hidden;
    border-radius: 8%;

    /* Black shadow layer for phone */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000;
      border-radius: 8%;
      z-index: 0;
    }
  }

  .phone-screenshot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 8%;
    opacity: 0;
    transform: scale(1.1);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.8s;
    position: relative;
    z-index: 1;
  }

  &.animate-in .phone-screenshot {
    opacity: 1;
    transform: scale(1);
  }

  /* Mockup Search Bar Styles */
  .mockup-searchbar {
    position: absolute;
    bottom: -2%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1s;
    pointer-events: none;
    user-select: none;



  .searchbar-container {
    display: flex;
    align-items: center;
    background: var(--background);
    border: 1px solid color-mix(in srgb, var(--text) 20%, transparent);
    border-radius: 24px;
    padding: 12px 20px;
    min-width: 300px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    pointer-events: none;
    user-select: none;
  }

    &[data-clickable="true"] {
      pointer-events: auto;
      user-select: auto;

      .searchbar-container {
        pointer-events: auto;
        user-select: auto;
      }
    }
  }

  &.animate-in .mockup-searchbar {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  .searchbar-icon {
    margin-right: 12px;
    color: var(--text);
    display: flex;
    align-items: center;
  }

  .searchbar-url {
    color: var(--text);
    font-size: var(--font-sm);
    font-weight: var(--font-weight-regular);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;

    [data-last-segment] {
      font-weight: var(--font-weight-bold);
    }
  }

  /* Responsive Styles */
  @media (max-width: 992px) {
    .phone-mockup {
      right: 5%;
      width: 25%;
    }
    
    .searchbar-container {
      min-width: 250px;
      padding: 10px 16px;
    }
  }

  @media (max-width: 768px) {
    .device-mockups {
      justify-content: center;
      align-items: flex-end;
    }
    
    .laptop-mockup {
      width: 100%;
      max-width: 500px;
      transform: translateY(-30px);
      transition-delay: 0.1s;

      &:hover .laptop-frame {
        transform: translateX(-10px) rotate(-2deg) scale(1.01);
      }
    }
    
    &.animate-in .laptop-mockup {
      transform: translateY(0);
    }
    
    .mockup-searchbar {
      bottom: -3%;
    }
    
    .searchbar-container {
      min-width: 200px;
      padding: 8px 14px;
    }
    
    .phone-mockup {
      position: absolute;
      right: 8%;
      bottom: 0;
      width: 22%;
      max-width: 180px;
      opacity: 0;
      transform: translateX(60px) translateY(30px) rotateZ(-5deg);
      transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;

      &:hover .phone-frame {
        transform: translateX(8px) rotate(2deg) scale(1.03);
      }
    }
    
    &.animate-in .phone-mockup {
      opacity: 1;
      transform: translateX(0) translateY(0) rotateZ(0deg);
    }
  }

  @media (max-width: 576px) {
    .phone-mockup {
      width: 25%;
      max-width: 150px;
      right: 5%;
    }
    
    .mockup-searchbar {
      bottom: -5%;
    }
    
    .searchbar-container {
      min-width: 180px;
    }
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .laptop-phone-mockup-devices,
  .laptop-phone-mockup-devices .laptop-mockup,
  .laptop-phone-mockup-devices .phone-mockup,
  .laptop-phone-mockup-devices .laptop-screenshot,
  .laptop-phone-mockup-devices .phone-screenshot,
  .laptop-phone-mockup-devices .laptop-frame,
  .laptop-phone-mockup-devices .phone-frame {
    transition: none;
    animation: none;
  }
}

:where(.showcase[data-showcase-fit="fill"]) > .laptop-phone-mockup-devices {
  height: 100%;
  display: grid;
  place-items: center;
}