/* ==========================================================================
   DROP DRIP — product showcase page styles
   Fully isolated stylesheet: every selector is scoped to a `.pp-*` /
   `#pp-*` class or id specific to this page type, and every design token
   is a locally-scoped custom property. Nothing here touches a bare
   element selector (body, img, h1, .container, etc), so this file is
   safe to load without any risk of altering the existing site if it were
   ever present on the same page. It shares no class names, custom
   properties, or IDs with style.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

.pp-root{
  /* local design tokens, copied from the main site so the visual language
     matches — this file never reads a variable from style.css */
  --pp-bg: #0a0a0b;
  --pp-bg-2: #131315;
  --pp-bg-3: #1b1b1e;
  --pp-line: rgba(244,240,232,.14);
  --pp-ink: #f4f0e8;
  --pp-ink-dim: #b3b0aa;
  --pp-ink-faint: #6a6864;
  --pp-orange: #ff4d15;
  --pp-orange-2: #ffb020;
  --pp-acid: #ccff33;
  --pp-pink: #ff3fa4;

  --pp-font-display: 'Bebas Neue', Impact, sans-serif;
  --pp-font-body: 'Space Grotesk', sans-serif;
  --pp-font-mono: 'Space Mono', monospace;

  --pp-edge: clamp(20px, 6vw, 64px);
  --pp-ease: cubic-bezier(.22,1,.36,1);

  background: var(--pp-bg);
  color: var(--pp-ink);
  font-family: var(--pp-font-body);
  min-height: 100svh;
}

.pp-root *{ box-sizing: border-box; }
.pp-root img{ max-width:100%; display:block; }
.pp-root figure{ margin:0; }
.pp-root a{ color:inherit; text-decoration:none; }
.pp-root ul{ list-style:none; margin:0; padding:0; }
.pp-root button{ font:inherit; background:none; border:none; color:inherit; cursor:pointer; }

/* ---------- header / nav (visual copy of the main site, isolated) ---------- */
.pp-header{
  position: sticky; top:0; z-index: 500;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px var(--pp-edge);
  background: rgba(10,10,11,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
}
.pp-header.pp-is-scrolled{ background: rgba(10,10,11,.92); border-color: var(--pp-line); }

.pp-logo-link{ display:inline-flex; align-items:center; }
.pp-logo-svg{ width: clamp(128px, 22vw, 168px); height:auto; display:block; }

.pp-nav-links{
  display:none;
  font-family: var(--pp-font-mono);
  font-size:.8rem; letter-spacing:.06em; text-transform:uppercase;
  gap: 2rem;
}
.pp-nav-links a{ position:relative; padding-block:.2em; }
.pp-nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0;
  background: var(--pp-acid); transition: width .3s var(--pp-ease);
}
.pp-nav-links a:hover::after{ width:100%; }

.pp-nav-cta{ display:none; }

.pp-burger{ width:34px; height:22px; position:relative; z-index:600; }
.pp-burger span{
  position:absolute; left:0; right:0; height:2px; background: var(--pp-ink);
  transition: transform .3s var(--pp-ease), opacity .2s, top .3s var(--pp-ease);
}
.pp-burger span:nth-child(1){ top:0; }
.pp-burger span:nth-child(2){ top:10px; }
.pp-burger span:nth-child(3){ top:20px; }
.pp-nav-open .pp-burger span:nth-child(1){ top:10px; transform:rotate(45deg); background:var(--pp-orange); }
.pp-nav-open .pp-burger span:nth-child(2){ opacity:0; }
.pp-nav-open .pp-burger span:nth-child(3){ top:10px; transform:rotate(-45deg); background:var(--pp-orange); }

.pp-mobile-menu{
  position: fixed; inset:0; z-index:400;
  background: var(--pp-bg);
  display:flex; flex-direction:column; justify-content:center;
  padding: var(--pp-edge);
  transform: translateY(-100%);
  transition: transform .5s var(--pp-ease);
}
.pp-nav-open .pp-mobile-menu{ transform: translateY(0); }
.pp-mobile-menu ul{ display:flex; flex-direction:column; gap:.2em; }
.pp-mobile-menu a{
  font-family: var(--pp-font-display); font-size: clamp(2.4rem, 12vw, 3.6rem);
  text-transform:uppercase; color: var(--pp-ink-dim);
  transition: color .25s, transform .25s;
  display:inline-block;
}
.pp-mobile-menu a:hover{ color: var(--pp-orange); transform: translateX(.12em); }

/* ---------- shared button ---------- */
.pp-btn{
  display:inline-flex; align-items:center; gap:.6em;
  font-family: var(--pp-font-mono); font-size:.82rem;
  letter-spacing:.08em; text-transform:uppercase;
  padding: 1em 1.6em;
  border: 2px solid var(--pp-orange);
  color: var(--pp-ink);
  position:relative; overflow:hidden;
  transition: color .35s var(--pp-ease), border-color .35s;
}
.pp-btn::before{
  content:""; position:absolute; inset:0; background: var(--pp-orange);
  transform: translateY(101%); transition: transform .38s var(--pp-ease); z-index:-1;
}
.pp-btn:hover::before{ transform: translateY(0); }
.pp-btn:hover{ color: var(--pp-bg); }

/* ---------- product layout: full-bleed hero + stacked content blocks ---------- */
.pp-product{
  display:block;
}

/* ---------- hero: marquee background + dark overlay + centered text ----------
   the hero is pinned (position:sticky) inside a taller wrapper, so it
   stays fully on screen while the visitor scrolls through it — that
   extra scroll distance is what drives the overlay fade / text scroll
   below, instead of the whole section just scrolling away unseen. */
.pp-hero{
  position:relative;
  height:100svh;
  width:100%;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* the marquee: every "image" media item, full viewport height, natural
   width (no cropping), edge-to-edge with no gaps, scrolling sideways
   forever. The HTML contains the image list twice back-to-back so the
   translateX(-50%) loop is seamless without requiring product data in JS. */
.pp-hero-marquee{
  position:absolute; inset:0;
  z-index:0;
  display:flex;
  align-items:center;
  height:100%;
  width:max-content;
  animation: pp-hero-marquee-scroll 40s linear infinite;
  will-change: transform;
}
.pp-hero-marquee img{
  height:100%;
  width:auto;
  max-width:none;
  flex:0 0 auto;
  display:block;
  object-fit:contain;
}
@keyframes pp-hero-marquee-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ---------- blur-up: low-res placeholder shown instantly, swapped
   for the full-res image once it's actually downloaded, unblurring
   as it goes. Applies to both the marquee and content-block images. ---------- */
.pp-blur-up img,
img.pp-blur-up{
  filter: blur(18px);
  transition: filter .5s ease;
}
.pp-blur-up--loaded img,
img.pp-blur-up--loaded{
  filter: blur(0);
}

/* small spinner shown over a blurred placeholder while the full-res
   image is still downloading; fades out once it's ready */
.pp-loader{
  position:absolute;
  top:50%; left:50%;
  z-index:3;
  width:28px; height:28px;
  margin:-14px 0 0 -14px;
  border:3px solid rgba(244,240,232,.25);
  border-top-color: var(--pp-orange);
  border-radius:50%;
  animation: pp-loader-spin .8s linear infinite;
  opacity:1;
  transition: opacity .3s ease;
  pointer-events:none;
}
.pp-blur-up--loaded .pp-loader{ opacity:0; }
@keyframes pp-loader-spin{
  to{ transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce){
  .pp-loader{ animation: none; }
}
@media (prefers-reduced-motion: reduce){
  .pp-hero-marquee{ animation: none; }
}

.pp-hero-overlay{
  position:absolute; inset:0;
  z-index:1;
  background: rgba(0,0,0,.3);
}

/* fade the bottom edge of the hero to solid black so it doesn't cut
   abruptly into the first content block below */
.pp-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:10%;
  z-index:2;
  background: linear-gradient(to bottom, transparent, #000);
  pointer-events:none;
}

.pp-hero-content{
  position:relative;
  z-index:2;
  max-width: 60ch;
  text-align:center;
  padding: 0 var(--pp-edge);
}
.pp-hero-title{
  font-family: var(--pp-font-display); text-transform:uppercase;
  font-size: clamp(2.6rem, 8vw, 5.5rem); line-height:.96; margin:0 0 .4em;
}
.pp-hero-text{
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--pp-ink-dim); margin:0 0 1.5em;
}
.pp-hero-btn{ display:inline-flex; }

/* ---------- content blocks: one per media item, image/video + text ---------- */
.pp-blocks{
  display:flex; flex-direction:column;
  margin-top: 50px; /* small black gap between the hero and first block */
}
.pp-block{
  display:flex; flex-direction:column;
  border-top: 1px solid var(--pp-line);
}
.pp-block-media{ width:100%; }
.pp-block-media img{ width:100%; height:auto; display:block; }

/* hover-zoom overlay on content images (not the hero marquee) — sits
   exactly over the image at its current rendered size, showing a
   scaled, cursor-panned copy of the same image, clipped by its own
   bounds */
.pp-zoom-fig{ position:relative; margin:0; }
.pp-zoom-fig--active{ cursor: zoom-in; }
.pp-zoom-overlay{
  position:absolute;
  top:0; left:0;
  overflow:hidden;
  z-index:2;
  opacity:0;
  pointer-events:none;
  transition: opacity .15s ease;
  background: var(--pp-bg-2);
}
.pp-zoom-overlay.is-active{ opacity:1; }
.pp-zoom-overlay img{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  object-fit:cover;
  transform: scale(1);
  transform-origin: center center;
  transition: transform .1s ease-out;
}

.pp-block-content{
  position:relative;
  background:#000;
  padding: clamp(40px, 8vw, 80px) var(--pp-edge);
}
.pp-block-content::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  background-image: var(--pp-block-bg, none);
  background-size: cover;
  background-position: center;
  opacity:.2;
  pointer-events:none;
}
.pp-block-content-inner{
  position:relative;
  z-index:1;
}
.pp-block-title{
  font-family: var(--pp-font-display); text-transform:uppercase;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem); line-height:1; margin:0 0 .5em;
}
.pp-block-text{
  color: var(--pp-ink-dim); font-size: clamp(1rem, 1.6vw, 1.1rem);
  margin:0 0 1.4em; max-width:56ch;
}

/* youtube facade (click-to-load, keeps the page light until played) */
.pp-yt{ position:relative; width:100%; aspect-ratio: 16/9; background: var(--pp-bg-2); }
.pp-yt iframe{ width:100%; height:100%; border:0; display:block; }
.pp-yt-facade{
  position:absolute; inset:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background: var(--pp-bg-2);
}
.pp-yt-thumb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.75; }
.pp-yt-play{
  position:relative; z-index:2;
  width: 64px; height:64px; border-radius:50%;
  background: var(--pp-orange);
  display:flex; align-items:center; justify-content:center;
  transition: transform .25s var(--pp-ease), background .25s;
}
.pp-yt-play::before{
  content:""; display:block;
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--pp-bg);
  margin-left: 4px;
}
.pp-yt-facade:hover .pp-yt-play{ transform: scale(1.1); background: var(--pp-acid); }

/* ---------- desktop: alternating image/text rows ---------- */
@media (min-width: 860px){
  .pp-nav-links{ display:flex; }
  .pp-nav-cta{ display:inline-flex; }
  .pp-burger{ display:none; }
  .pp-mobile-menu{ display:none; }

  .pp-block{ flex-direction:row; align-items:stretch; }
  .pp-block:nth-child(even){ flex-direction:row-reverse; }
  .pp-block-media{ width:50%; }
  .pp-block-content{
    width:50%;
    display:flex; flex-direction:column;
    /* 100px padding top/bottom is what turns the sticky-centering
       below into "enters 100px from the top, pins once centered,
       releases with 100px left before the bottom" */
    padding-top:100px;
    padding-bottom:100px;
  }
  .pp-block-content-inner{
    position:sticky;
    top:0;
    bottom:0;
    margin-top:auto;
    margin-bottom:auto;
  }
}