/* ============================================================
   DRIP — DEVICE SECTIONS
   One drop per section down the page. A single fixed WebGL layer
   sits behind them all (four canvases would be four GL contexts),
   and each section tells it which device to show and which side
   of the screen to stand it on.
   ============================================================ */

.dv-layer{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.dv-layer.on{ opacity:1; }
.dv-layer canvas{ width:100%; height:100%; display:block; }

/* The run of sections sits ABOVE the fixed canvas layer, so it must not
   paint an opaque background — the body is already the dark stage, and a
   fill here hides every device behind it. */
.dv-run{ position:relative; z-index:1; color:#fff; background:transparent; }
.dv-run::before{      /* soft floor glow, transparent so the device reads through */
  content:''; position:absolute; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(58% 34% at 50% 74%, rgba(72,132,190,.14), transparent 72%);
}

.dv-sec{ position:relative; height:300vh; }
.dv-pin{
  position:sticky; top:0; height:100vh; height:100svh;
  display:flex; align-items:center;
  padding:0 clamp(22px,7vw,110px);
  pointer-events:none;
}
.dv-right .dv-pin{ justify-content:flex-start; }   /* copy left, device right */
.dv-left  .dv-pin{ justify-content:flex-end;   }   /* copy right, device left */

.dv-copy{
  position:relative; z-index:2; max-width:min(430px,42vw);
  pointer-events:auto;
}
.dv-num{
  display:block; font:700 10px/1 Montserrat,sans-serif; letter-spacing:.42em;
  color:rgba(255,255,255,.34); margin-bottom:18px;
}
.dv-name{
  margin:0 0 10px; font:900 clamp(44px,7.4vw,104px)/.92 Montserrat,sans-serif;
  letter-spacing:-.04em;
  background:var(--holo); -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.dv-tag{
  margin:0 0 30px; font:600 clamp(14px,1.6vw,18px)/1.4 Manrope,sans-serif;
  color:rgba(255,255,255,.68);
}
.dv-spec{
  border-left:2px solid rgba(255,255,255,.16); padding-left:18px; margin:0 0 32px;
  opacity:0; transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.dv-sec.is-deep .dv-spec{ opacity:1; transform:none; }
.dv-spec b{ display:block; font:800 clamp(19px,2.3vw,28px)/1.15 Montserrat,sans-serif; letter-spacing:-.02em; margin-bottom:9px; }
.dv-spec span{ display:block; font:500 13px/1.7 Manrope,sans-serif; color:rgba(255,255,255,.56); }

.dv-cta{
  display:inline-flex; align-items:center; gap:10px;
  font:800 11px/1 Montserrat,sans-serif; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; text-decoration:none;
  padding:15px 26px; border-radius:999px; border:1px solid rgba(255,255,255,.22);
  transition:background .35s ease, border-color .35s ease, transform .35s cubic-bezier(.16,1,.3,1);
}
.dv-cta i{ font-style:normal; transition:transform .35s cubic-bezier(.16,1,.3,1); }
.dv-cta:hover{ background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.42); }
.dv-cta:hover i{ transform:translateX(5px); }

/* progress rail, one tick per drop */
.dv-run .dv-sec::after{
  content:''; position:sticky; top:50%; float:right; margin-right:-14px;
  width:2px; height:54px; border-radius:2px; background:rgba(255,255,255,.10);
}

@media (max-width:820px){
  .dv-sec{ height:250vh; }
  .dv-pin{ align-items:flex-end; padding-bottom:9vh; justify-content:center!important; }
  .dv-copy{ max-width:none; width:100%; text-align:center; }
  .dv-spec{ border-left:0; border-top:2px solid rgba(255,255,255,.16); padding:16px 0 0; }
  .dv-cta{ margin:0 auto; }
}
@media (prefers-reduced-motion:reduce){
  .dv-sec{ height:auto; }
  .dv-pin{ position:static; height:auto; padding:14vh clamp(22px,7vw,110px); }
  .dv-spec{ opacity:1; transform:none; }
}