/* =========================================================
   HUGETEC · Laptop Scroll-Hero (pinned + video.currentTime scrub)
   - position: sticky pins the stage for the whole runway
   - <video> + currentTime is driven from scroll progress (lerped)
   - No card/box frame; the notebook IS the visual
   ========================================================= */

/* --- IMPORTANT: scoped fix for sticky -----------------------------------
   The site's global stylesheet sets `overflow-x: hidden` on html/body.
   In several browsers this turns html/body into a scroll-containing block
   that breaks `position: sticky` for descendants. We restore `clip`, which
   prevents horizontal overflow without creating a scroll container.
   This rule only applies when the hero is on the page (the class is added
   by the hero's own JS before paint).                                     */
html.hugetec-has-laptop-hero,
html.hugetec-has-laptop-hero body{
  overflow-x: clip;
}
/* Same for the site wrapper that the WP plugin wraps everything in */
html.hugetec-has-laptop-hero .ht-site{
  overflow: visible !important;
}

/* ---- Runway: long parent that lets the sticky child travel ----------- */
.hugetec-laptop-scroll-hero{
  position: relative;
  width: 100%;
  /* Long runway: while user scrolls through ~300vh, the sticky child is
     pinned and the animation plays from frame 0 → last. */
  min-height: 400vh;
  background: radial-gradient(circle at center, #101826 0%, #050505 70%);
  color: #eef4ff;
  isolation: isolate;
  /* Crucial: do NOT use `overflow: hidden` on the runway or sticky breaks */
  overflow: visible;
  --hugetec-p: 0;
  --hugetec-p-ease: 0;
}

/* Subtle ambient layers — purely decorative, do not affect sticky */
.hugetec-laptop-glow{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(
      ellipse 70% 55% at 50% 60%,
      rgba(212,175,55, calc(0.10 + 0.25 * var(--hugetec-p-ease))) 0%,
      rgba(212,175,55, calc(0.03 + 0.08 * var(--hugetec-p-ease))) 35%,
      transparent 70%
    );
  filter: blur(2px);
  transition: background 80ms linear;
}
.hugetec-laptop-grid{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 55%, transparent 90%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, #000 55%, transparent 90%);
  opacity: 0.35;
}

/* ---- Sticky child: full viewport, centered, no border --------------- */
.hugetec-laptop-sticky{
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  /* Flex column: video grows; caption sits at bottom */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.6vh, 18px);
  overflow: hidden;
  /* Leave just enough top room for the site header overlay */
  padding: calc(var(--ht-header-h, 84px) + 8px) max(16px, env(safe-area-inset-left)) clamp(16px, 3vh, 32px);
  box-sizing: border-box;
  z-index: 1;
}

/* ---- The video — big, contain-fitted, NO surrounding box ------------ */
.hugetec-laptop-scroll-video{
  display: block;
  width: min(100vw, 1700px);
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  background: transparent;     /* no card surface */
  border: 0;
  outline: 0;
  pointer-events: none;        /* video shouldn't catch clicks */
  /* Premium float, no hard frame */
  filter:
    drop-shadow(0 28px 60px rgba(0,0,0,0.55))
    drop-shadow(0 8px 18px rgba(0,0,0,0.35))
    saturate(calc(0.92 + 0.12 * var(--hugetec-p-ease)))
    contrast(calc(0.96 + 0.08 * var(--hugetec-p-ease)));
  transition: filter 200ms linear, opacity 360ms ease;
  opacity: 0;
}
.hugetec-laptop-scroll-hero.is-ready .hugetec-laptop-scroll-video{ opacity: 1; }

/* Reduced-motion fallback: a single static image, same size budget. */
.hugetec-laptop-fallback{
  display: none;
  width: min(100vw, 1700px);
  height: auto;
  max-height: 82vh;
  object-fit: contain;
  filter: drop-shadow(0 24px 50px rgba(0,0,0,0.55));
}

/* ---- Loader (premium minimal progress bar) ----------------------------- */
.hugetec-laptop-loader{
  position: absolute;
  left: 50%;
  bottom: 14vh;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 2;
  pointer-events: none;
  transition: opacity 360ms ease, visibility 360ms ease;
}
.hugetec-laptop-loader-bar{
  width: min(260px, 50vw);
  height: 2px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
}
.hugetec-laptop-loader-bar > span{
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #b88a32 0%, #d4af37 50%, #f1d18a 100%);
  box-shadow: 0 0 12px rgba(212,175,55,0.55);
  transition: width 120ms linear;
}
.hugetec-laptop-loader-label{
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(241,209,138,0.85);
}
.hugetec-laptop-scroll-hero.is-ready .hugetec-laptop-loader{
  opacity: 0;
  visibility: hidden;
}

/* ---- Caption — center, no card, gently fades in as it opens --------- */
.hugetec-laptop-caption{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
  opacity: calc(0.55 + 0.45 * var(--hugetec-p-ease));
  transform: translate3d(0, calc(8px - 8px * var(--hugetec-p-ease)), 0);
  transition: opacity 220ms linear, transform 220ms linear;
}
.hugetec-laptop-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #f1d18a;
  padding: 6px 12px;
  border: 1px solid rgba(212,175,55,0.35);
  background: rgba(212,175,55,0.08);
  border-radius: 999px;
  margin: 0 0 10px;
}
.hugetec-laptop-eyebrow::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #d4af37;
  box-shadow: 0 0 10px #d4af37;
}
.hugetec-laptop-title{
  font-family: "Inter", "Helvetica Neue", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0;
}
.hugetec-laptop-title-accent{
  background: linear-gradient(90deg, #d4af37 0%, #f1d18a 50%, #d4af37 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hugetec-laptop-sub{
  margin: 6px auto 0;
  color: #9fb0c7;
  font-size: clamp(12px, 1.1vw, 14px);
  max-width: 58ch;
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1100px){
  .hugetec-laptop-scroll-hero{ min-height: 360vh; }
  .hugetec-laptop-scroll-video,
  .hugetec-laptop-fallback{ max-height: 72vh; }
}
@media (max-width: 720px){
  .hugetec-laptop-scroll-hero{ min-height: 320vh; }
  .hugetec-laptop-scroll-video,
  .hugetec-laptop-fallback{ max-height: 60vh; }
}

/* ---- Reduced motion: static, calm fallback ----------------------------- */
@media (prefers-reduced-motion: reduce){
  .hugetec-laptop-scroll-hero{ min-height: auto; }
  .hugetec-laptop-sticky{
    position: relative;
    top: auto;
    height: auto;
    min-height: 100vh;
  }
  .hugetec-laptop-scroll-video{ display: none !important; }
  .hugetec-laptop-fallback{ display: block !important; }
  .hugetec-laptop-loader{ display: none !important; }
  .hugetec-laptop-caption{
    opacity: 1 !important;
    transform: none !important;
  }
  .hugetec-laptop-glow{
    background: radial-gradient(ellipse 70% 55% at 50% 60%,
      rgba(212,175,55,0.18), transparent 70%);
  }
}