/* ---------- Product sections ---------- */
.product-section{
  position:relative; overflow:hidden;
  min-height:100vh;
  display:flex; align-items:center;
  padding:calc(var(--header-h) + 60px) 0 100px;
  isolation:isolate;
}
.product-section .inner{
  width:100%; max-width:1440px; margin:0 auto; padding:0 60px;
  position:relative; z-index:2;
}
.product-eyebrow{
  font-family:var(--font-en); font-size:13px; letter-spacing:.3em;
  color:var(--blue-400); text-transform:uppercase; margin-bottom:18px;
}
.product-title{
  font-family:var(--font-en); font-weight:700;
  font-size:clamp(42px,7vw,96px);
  letter-spacing:-.01em; line-height:1;
  margin-bottom:24px;
}
.product-title .accent{color:var(--blue-400);}
.product-tagline{
  font-size:clamp(17px,2vw,24px); font-weight:600; margin-bottom:16px;
}
.product-desc{
  font-size:15px; color:var(--ink-70); max-width:460px; margin-bottom:36px;
}

/* staggered entrance for the copy block (content only, not the background) */
.product-section .inner > *{
  opacity:0; transform:translateY(30px);
  transition:opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
}
.product-section.in-view .inner > *{opacity:1; transform:translateY(0);}
.product-section.in-view .inner > *:nth-child(1){transition-delay:.05s;}
.product-section.in-view .inner > *:nth-child(2){transition-delay:.15s;}
.product-section.in-view .inner > *:nth-child(3){transition-delay:.25s;}
.product-section.in-view .inner > *:nth-child(4){transition-delay:.35s;}
.product-section.in-view .inner > *:nth-child(5){transition-delay:.45s;}

/* ---------- Video background ---------- */
/* .bg holds a static fallback colour (shows before the clip loads / if it fails)
   and the <video> that autoplays each product's clip, sourced from /mov.   */
.product-section .bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  background-position:center; background-size:cover;
}
.product-section .bg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,23,.35) 0%, rgba(6,10,23,.78) 78%, var(--navy-900) 100%);
  z-index:1;
}
.bg-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}

/* Fallback colour per product — visible behind the video while it loads,
   and shown as-is if a clip is missing from /mov. Swap for a poster="" still
   on the <video> tag later if you'd rather show a first-frame image. */
.bg-idas{background-color:#123a72;}
.bg-ivision{background-color:#1b2c55;}
.bg-connect{background-color:#16264a;}
.bg-converter{background-color:#10254a;}
.bg-lake{background-color:#0d2c52;}
.bg-idq{background-color:#123a72;}

/* ---------- Scroll-down cue (first hero section only) ---------- */
.scroll-cue{
  position:absolute; left:50%; bottom:38px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  z-index:2; color:var(--ink-50); opacity:0;
  animation:scrollCueIn .8s ease .6s forwards;
}
.scroll-cue span{
  font-family:var(--font-en); font-size:10px; letter-spacing:.05em; text-transform:uppercase;
}
.scroll-cue .cue-icon{display:block; position:relative;}
.scroll-cue .cue-icon .wheel{
  transform-origin:center; transform-box:fill-box;
  animation:cueWheel 1.8s ease-in-out infinite;
}
@keyframes scrollCueIn{to{opacity:1;}}
@keyframes cueWheel{
  0%{transform:translateY(0); opacity:1;}
  55%{transform:translateY(10px); opacity:0;}
  56%{transform:translateY(0); opacity:0;}
  85%{opacity:1;}
  100%{transform:translateY(0); opacity:1;}
}
@media (prefers-reduced-motion: reduce){
  .scroll-cue{opacity:1; animation:none;}
  .scroll-cue .cue-icon .wheel{animation:none;}
}
@media (max-width:600px){.scroll-cue{bottom:20px;}}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .product-section .inner{padding:0 24px;}
}
@media (max-width:600px){
  .product-section{padding:calc(var(--header-h-m) + 40px) 0 70px;}
  .scroll-cue{display:none;}
}