/** Shopify CDN: Minification failed

Line 11:0 Unexpected "<"
Line 101:2 Unexpected "<"

**/
/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
<body>


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>OnePlus Nord 5 Showcase</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <style>
    body {
      margin: 0;
      padding: 0;
      background: #000;
      font-family: Arial, sans-serif;
      color: #fff;
    }
    .desktop-only {
      display: block;
    }
    @media (max-width: 1024px) {
      .desktop-only {
        display: none;
      }
    }
    .panel {
      width: 100vw;
      height: 100vh;
      position: relative;
      overflow: hidden;
    }
    .horizontal-scroll {
      height: 100vh;
      display: flex;
      flex-wrap: nowrap;
      width: 200vw;
      will-change: transform;
    }
    .frame {
      width: 100vw;
      padding: 60px;
      box-sizing: border-box;
    }
    .card {
      position: relative;
      background-size: cover;
      background-position: center;
      border-radius: 12px;
      color: white;
      overflow: hidden;
    }
    .card-content {
      position: absolute;
      z-index: 2;
      top: 20px;
      left: 20px;
      right: 20px;
    }
    .card-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 10px;
    }
    .card-subtitle {
      font-size: 16px;
      opacity: 0.75;
    }
    .card-img {
      position: absolute;
      max-width: 60%;
      max-height: 80%;
      right: 0;
      bottom: 0;
      z-index: 1;
    }
    .grid-2, .grid-3 {
      display: grid;
      gap: 20px;
    }
    .grid-2 {
      grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
      grid-template-columns: repeat(3, 1fr);
    }
    .second-frame {
      padding: 60px;
      display: flex;
      flex-direction: column;
      gap: 40px;
    }
  </style>


  <div class="desktop-only">
    <!-- Horizontal Scroll Section -->
    <section class="panel">
      <div class="horizontal-scroll" id="scroll-track">
        <!-- Frame 1 -->
        <div class="frame">
          <div style="display: flex; gap: 20px;">
            <div class="card" style="flex: 0 0 45%; height: 500px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-0-1-9237b5.jpg.webp');">
              <div class="card-content">
                <div class="card-title">Flagship Snapdragon™ 8 Series elite performance¹</div>
                <div class="card-subtitle">Latest DDR5X RAM. 144 FPS BGMI and CODM gaming.</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-0-1-90-c8075d.png.webp" alt="Snapdragon">
            </div>
            <div style="display: flex; flex-direction: column; gap: 20px; flex: 0 0 55%;">
              <div class="card" style="height: 240px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-1-1-a328c8.jpg.webp');">
                <div class="card-content">
                  <div class="card-title">50MP Front & Back Cameras</div>
                  <div class="card-subtitle">Low-light selfies, 4K 60 FPS video.</div>
                </div>
                <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-1-1-90-93d340.png.webp" alt="Camera">
              </div>
              <div class="card" style="height: 240px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-2-1-6f6e3e.jpg.webp');">
                <div class="card-content">
                  <div class="card-title">Dual AI for work & play</div>
                  <div class="card-subtitle">AI Writer, AI Perfect Shot, AI Unblur</div>
                </div>
                <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-logo-1-95-218f8b.png.webp" alt="AI">
              </div>
            </div>
          </div>
        </div>

        <!-- Frame 2 (Enter after scroll) -->
        <div class="frame second-frame">
          <div class="grid-2">
            <div class="card" style="height: 260px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-3-1-b2f8b9.jpg.webp');">
              <div class="card-content">
                <div class="card-title">144Hz AMOLED with Aqua Touch</div>
                <div class="card-subtitle">Ultra HDR brightness. Smooth visuals.</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-3-1-90-0ed38d.png.webp" alt="Display">
            </div>
            <div class="card" style="height: 260px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-4-1-d81bd5.jpg.webp');">
              <div class="card-content">
                <div class="card-title">Powered by 5G-Advanced</div>
                <div class="card-subtitle">3x internet speeds. Rock-solid signals.</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-4-1-90-a5734c.png.webp" alt="5G">
            </div>
          </div>
          <div class="grid-3">
            <div class="card" style="height: 260px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-5-1-8e7776.jpg.webp');">
              <div class="card-content">
                <div class="card-title">Open Canvas</div>
                <div class="card-subtitle">Multitasking game-changer.</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-5-1-90-78112e.png.webp" alt="Canvas">
            </div>
            <div class="card" style="height: 260px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-6-1-11f4ed.jpg.webp');">
              <div class="card-content">
                <div class="card-title">6800mAh Battery</div>
                <div class="card-subtitle">9.5 hours BGMI, 80W charging</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-6-1-90-027b30.png.webp" alt="Battery">
            </div>
            <div class="card" style="height: 260px; background-image: url('https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-bg-7-1-7681cd.jpg.webp');">
              <div class="card-content">
                <div class="card-title">6 Years of Smoothness</div>
                <div class="card-subtitle">4 Android versions, 6-year updates</div>
              </div>
              <img class="card-img" src="https://oneplus.com/content/dam/oneplus/2025/product-station/nord-5/assets/images-ksp-7-1-90-b9a992.png.webp" alt="Longevity">
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
  <script>
    gsap.registerPlugin(ScrollTrigger);
    let scrollContainer = document.querySelector("#scroll-track");
    gsap.to(scrollContainer, {
      xPercent: -100,
      ease: "none",
      scrollTrigger: {
        trigger: ".panel",
        start: "top top",
        end: "+=200%",
        scrub: true,
        pin: true,
        anticipatePin: 1
      }
    });
  </script>

</body>

/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}