/* ==========================================================================
   webvweb.net — Hero Laptop Scroll Animation
   Sticky pinned section, canvas frame-scrub. The before → after site
   transformation is baked into the hero-laptop-2 frame sequence itself.
   ========================================================================== */

.hero-pin-wrap{
  position: relative;
  height: 152vh; /* scroll distance driving the frame scrub + zoom - 380vh / 2.5 (sped up 2.5x) */
  background: #000;
}
.hero-pin{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 90% 60% at 50% 8%, rgba(0,113,227,0.28), transparent 60%),
    #000;
}

.hero-copy{
  position: absolute;
  top: calc(var(--nav-h) + 6vh);
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
  padding: 0 var(--space-5);
  transition: opacity 420ms var(--ease-apple), transform 420ms var(--ease-apple);
  pointer-events: none;
}
.hero-copy h1{
  color: #fff;
  max-width: 900px;
  margin: 0 auto;
}
.hero-copy .lede{
  max-width: 560px;
  margin: var(--space-4) auto 0;
  color: rgba(255,255,255,0.72);
}
.hero-copy .eyebrow{ color: var(--brand-blue-light); }
.hero-skip-btn{
  position: absolute;
  top: calc(var(--nav-h) + var(--space-4));
  left: var(--space-5);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  cursor: pointer;
  transition: background 200ms, border-color 200ms, color 200ms, transform 200ms;
}
.hero-skip-btn svg{ flex: none; transition: transform 200ms; }
.hero-skip-btn:hover,
.hero-skip-btn:focus-visible{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}
.hero-skip-btn:hover svg{ transform: translateY(2px); }
.hero-skip-btn:focus-visible{ outline: 2px solid var(--brand-blue-light); outline-offset: 2px; }
@media (max-width: 720px){
  .hero-skip-btn{ top: calc(var(--nav-h) + var(--space-3)); left: var(--space-4); padding: 8px 13px; font-size: 12px; }
}

.hero-scroll-hint{
  position: absolute;
  bottom: var(--space-6);
  left: 0; right: 0;
  text-align: center;
  z-index: 3;
  color: rgba(255,255,255,0.55);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity 300ms;
}
.hero-scroll-hint svg{ margin: 8px auto 0; animation: hint-bounce 1.8s ease-in-out infinite; }
@keyframes hint-bounce{
  0%, 100%{ transform: translateY(0); opacity: 0.5; }
  50%{ transform: translateY(6px); opacity: 1; }
}

.hero-stage{
  position: relative;
  /* Width alone (min(92vw, 1400px)) used to size this box - on a wide-but-
     SHORT viewport (a smaller laptop screen, e.g. 1366x768 or 1440x900)
     that produced a tall-enough box, at the fixed 1920:1080 aspect ratio,
     to grow past the room available between .hero-copy up top and
     .hero-tags/.hero-scroll-hint down below - the laptop rendered on top
     of both once the scroll-driven zoom (see hero-animation.js) kicked in.
     The extra 131vh cap keeps the box's height at roughly 74% of the
     viewport height (131 * 9/16 ≈ 74), which is the vertical budget that
     actually stays clear of the copy/tags/scroll-hint zones at every
     breakpoint - it only ever binds on shorter screens; on tall ones the
     92vw/1400px caps are already smaller than 131vh and win as before. */
  width: min(92vw, 1400px, 131vh);
  aspect-ratio: 1920 / 1080;
  transform: scale(1);
  transform-origin: 50% 62%;
  will-change: transform;
}

/* Ambient backlight glow behind the laptop — keeps the (fairly dark) product
   render readable against the pure black background from frame 1 onward.
   Sized tall to cover both the closed top-down pose (lower half) and the
   fully-open front pose (centered) as the frames progress. */
.hero-glow{
  position: absolute;
  left: 50%; top: 58%;
  width: 92%; height: 96%;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse 52% 48% at 50% 50%, rgba(200,220,255,0.30) 0%, rgba(120,170,255,0.20) 30%, rgba(60,110,220,0.10) 52%, transparent 74%);
  filter: blur(4px);
  pointer-events: none;
  z-index: 0;
}

.hero-canvas{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.55));
}

/* Static tag row revealed under the laptop near the end of the pinned scroll */
.hero-tags{
  position: absolute;
  bottom: 9%;
  left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  pointer-events: none;
  padding: 0 var(--space-5);
}
.hero-tag{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 100ms);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 17px);
  letter-spacing: 0.01em;
  color: rgba(255,255,255,0.88);
  white-space: nowrap;
}
.hero-tags.is-in .hero-tag{ opacity: 1; transform: none; }
.hero-tag-sep{
  color: rgba(255,255,255,0.22);
  font-size: 14px;
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
  transition-delay: calc(var(--d, 0) * 100ms);
}
.hero-tags.is-in .hero-tag-sep{ opacity: 1; }
.hero-tag .ai-glow{
  color: var(--brand-blue-light);
  font-weight: 800;
  text-shadow: 0 0 10px rgba(41,151,255,0.85), 0 0 26px rgba(41,151,255,0.5);
}

.hero-progress-track{
  position: absolute;
  bottom: var(--space-4);
  left: 50%; transform: translateX(-50%);
  width: min(280px, 40vw);
  height: 2px;
  background: rgba(255,255,255,0.16);
  border-radius: 2px;
  z-index: 3;
  overflow: hidden;
}
.hero-progress-fill{
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-blue-light));
}

@media (max-width: 720px){
  .hero-pin-wrap{ height: 120vh; } /* 300vh / 2.5 (sped up 2.5x) */
  .hero-copy{ top: calc(var(--nav-h) + 3vh); }
  .hero-copy .lede{ display: none; }
  .hero-stage{ width: min(96vw, 131vh); }
  .hero-tags{ bottom: 7%; gap: 8px 12px; }
  .hero-tag{ font-size: 12.5px; }
}