/* ============================================================================
   VAROLYN — HOME SECTION 1 · DESKTOP VIDEO HERO  (PC only · ≥1200px)
   ----------------------------------------------------------------------------
   Replaces the 3D-map hero on PC with a lightweight cinematic video hero
   (optimised AV1/H.264 "ICU at home" scene). Lightened / reconciled to the
   site's light-mint palette so it blends with the page below + matches the
   mobile hero's light theme (deep-green text, mint accent, green/white CTAs).

   Scope:
     • #hero-video is display:none by default  → tablet & mobile keep the
       lightweight robot hero (varolyn-hero-mobile.css), 100% untouched.
     • @media (min-width:1200px) shows it AND retires the 3D map on PC
       (hide its fixed overlays + collapse the 1500vh scroll-driver), mirroring
       what the mobile block already does ≤1199.98px → 3D is now shown NOWHERE
       and its 766KB WebGL/GSAP bundle is never loaded (loader script removed).

   Performance: poster paints first (LCP), video streams after; play/pause via
   IntersectionObserver (varolyn-hero-video.js). CSP-safe (external CSS/JS,
   no inline JS, navigation is plain <a href> — no onclick).
   ============================================================================ */

/* Hidden by default → tablet/mobile (≤1199.98) never render it. */
#hero-video{ display:none; }

@media (min-width: 1200px){

  /* ---- 1 · retire the 3D map on PC: hide its fixed overlays + collapse the
       1500vh scroll-driver so the page flows straight into the video hero ---- */
  #canvas-wrap, #title-overlay, #vh-fallback, #vh-loading,
  #phase-badge, #hq-badge, .zone-lbl, #pdots, #seocard,
  #stats-strip, #scroll-hint, #grain, #vignette{ display:none !important; }
  #varolyn-section{ height:0 !important; min-height:0 !important; background:transparent !important; }
  #varolyn-section #s0, #varolyn-section #s1, #varolyn-section #s2,
  #varolyn-section #s3, #varolyn-section #s4{ height:0 !important; }

  /* ---- 2 · hero shell ---- */
  #hero-video{
    display:flex; position:relative; align-items:center;
    width:100%; min-height:620px; height:100vh; max-height:900px;
    overflow:hidden; isolation:isolate;
    font-family:'Geist', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    /* poster paints instantly (preloaded, PC-only) over a light-mint gradient
       fallback; the <video> plays over it. #hero-video is display:none ≤1199.98px,
       so this background image is NEVER fetched on tablet/mobile (0 hero bytes). */
    background:
      url("../../assets/hero/hero-poster.webp?v=hv3") center 42%/cover no-repeat,
      radial-gradient(120% 130% at 78% 35%, #d6f2e2 0%, #e7f6ee 28%, #f3faf6 55%, #ffffff 100%);
  }
  #hero-video *{ box-sizing:border-box; }

  /* background video (full-bleed, cover) */
  #hero-video .hv-bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center 42%; display:block; z-index:0;
    background:transparent; transform:translateZ(0); will-change:transform; pointer-events:none;
  }

  /* readability + blend wash — LIGHT, weighted to the left where the copy sits,
     fading to clear so the bright video shows on the right. Cohesive with the
     light page (no dark-green slab). */
  #hero-video .hv-scrim{
    position:absolute; inset:0; z-index:1; pointer-events:none;
    background:
      linear-gradient(98deg,
        rgba(247,251,249,0.90) 0%,
        rgba(247,251,249,0.66) 24%,
        rgba(243,250,246,0.34) 44%,
        rgba(255,255,255,0.08) 62%,
        rgba(255,255,255,0) 80%),
      /* faint top veil so the white nav pill + first line always separate cleanly */
      linear-gradient(180deg, rgba(247,251,249,0.34) 0%, rgba(247,251,249,0) 18%);
  }

  /* content column (left-aligned, centred vertically → clears the fixed nav) */
  #hero-video .hv-wrap{
    position:relative; z-index:2; width:100%;
    max-width:1320px; margin:0 auto;
    padding:96px clamp(40px, 5vw, 64px) 64px;
    display:flex; justify-content:flex-start;
  }
  #hero-video .hv-copy{
    display:flex; flex-direction:column; align-items:flex-start; gap:18px;
    max-width:560px;
  }

  /* shared light-glass card surface (one helper, used by each block) */
  #hero-video .hv-badge,
  #hero-video .hv-title,
  #hero-video .hv-lead,
  #hero-video .hv-cta{
    background:linear-gradient(150deg, rgba(255,255,255,0.66), rgba(255,255,255,0.44));
    border:1px solid rgba(255,255,255,0.72);
    -webkit-backdrop-filter:blur(18px) saturate(118%);
            backdrop-filter:blur(18px) saturate(118%);
    box-shadow:0 18px 46px -24px rgba(16,52,36,0.40), inset 0 1px 1px rgba(255,255,255,0.85);
  }

  /* badge pill */
  #hero-video .hv-badge{
    display:inline-flex; align-items:center; gap:9px;
    padding:8px 16px; border-radius:999px; align-self:flex-start;
    font-size:11px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase;
    color:#15705a; white-space:nowrap;
  }
  #hero-video .hv-dot{
    width:8px; height:8px; border-radius:50%; background:#2bb583;
    box-shadow:0 0 0 3px rgba(43,181,131,0.22);
    animation:hvBlink 1.5s ease-in-out infinite;
  }
  @keyframes hvBlink{
    0%,100%{ opacity:1; box-shadow:0 0 0 3px rgba(43,181,131,0.24); }
    50%{ opacity:.35; box-shadow:0 0 0 5px rgba(43,181,131,0.05); }
  }

  /* headline */
  #hero-video .hv-title{
    margin:0; align-self:flex-start; width:fit-content;
    padding:14px 20px; border-radius:18px;
    font-size:clamp(34px, 3.6vw, 50px); line-height:1.08; font-weight:800;
    letter-spacing:-1.4px; color:#0d3b2e;
  }
  #hero-video .hv-title .hl{
    background:linear-gradient(120deg, #1d9374 0%, #2fb88c 44%, #1a6b5a 100%);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }

  /* paragraph */
  #hero-video .hv-lead{
    margin:0; align-self:flex-start; width:fit-content; max-width:430px;
    padding:13px 18px; border-radius:15px;
    font-size:16px; line-height:1.55; font-weight:500; color:#3f5d52;
  }

  /* CTA row */
  #hero-video .hv-cta{
    display:inline-flex; flex-wrap:wrap; gap:12px;
    padding:13px 15px; border-radius:18px; align-self:flex-start;
  }
  #hero-video .hv-btn{
    display:inline-flex; align-items:center; gap:10px;
    padding:13px 24px; border-radius:12px; cursor:pointer; text-decoration:none;
    font-family:inherit; font-size:14.5px; font-weight:600; white-space:nowrap;
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  }
  #hero-video .hv-btn svg{ width:18px; height:18px; flex-shrink:0; }
  /* primary → green gradient (Book a Consultation → #enquiry) */
  #hero-video .hv-btn-primary{
    background:linear-gradient(135deg, #1a6b5a, #25957a); color:#fff; border:none;
    box-shadow:0 12px 26px -10px rgba(8,80,44,0.50);
  }
  #hero-video .hv-btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 34px -12px rgba(8,80,44,0.60); }
  #hero-video .hv-btn-primary:active{ transform:translateY(0); }
  /* secondary → clean white (Talk to Us → tel:) */
  #hero-video .hv-btn-ghost{
    background:rgba(255,255,255,0.86); color:#143226;
    border:1px solid rgba(26,107,90,0.18);
    box-shadow:0 8px 22px -12px rgba(16,52,36,0.30);
  }
  #hero-video .hv-btn-ghost:hover{ transform:translateY(-2px); background:#ffffff; }
  #hero-video .hv-btn-ghost:active{ transform:translateY(0); }

  /* keyboard focus visibility (a11y) */
  #hero-video .hv-btn:focus-visible{ outline:3px solid rgba(26,107,90,0.55); outline-offset:2px; }

  /* reduced-motion → no blink, video paused by JS (poster shows) */
  @media (prefers-reduced-motion: reduce){
    #hero-video .hv-dot{ animation:none; }
    #hero-video .hv-btn{ transition:none; }
  }
}

/* Larger desktops — a touch more breathing room */
@media (min-width: 1600px){
  #hero-video .hv-copy{ max-width:600px; }
}