/* ==========================================================================
   Lens-focus hero variant — loaded only by index-lens.html
   Full-bleed Asqelio artwork (blue field + glass IOL lens framing a lifestyle
   scene). On load the people start defocused and gradually come into focus:
   the blurred frame cross-fades away to reveal the sharp frame underneath.
   ========================================================================== */
.hero--lens {
  position: relative;
  overflow: hidden;
  min-height: clamp(520px, 76vh, 760px);
  display: flex;
  align-items: center;
  color: #eaf2fa;
  /* photo as a cover background so the navy fallback can never show through
     any sub-pixel gap at the edges; the <img> layers sit on top for the
     blur / sharp / travelling-lens effect */
  background: #0a2a47 url("../img/hero-bg.webp") center / cover no-repeat;
}

/* --- full-bleed artwork --------------------------------------------------- */
.hero-art { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-base, .hero-sharp {
  position: absolute; object-fit: cover; object-position: 72% 50%;
}
/* base stays gently soft; the travelling lens reveals crisp, vivid focus where
   it passes — guiding the eye from the people, to the headline, to the boxes */
.hero-base  { inset: 0; width: 100%; height: 100%; z-index: 1;
  transform: scale(1.06); transform-origin: center;
  filter: blur(9px) saturate(.72) brightness(.9); }
.hero-sharp { inset: 0; width: 100%; height: 100%; z-index: 2;
  clip-path: circle(205px at 61% 44%); will-change: clip-path;
  animation: lensTravel 19s ease-in-out infinite; }

/* travelling 3D IOL lens (real glass render); optic centred on the focus circle */
.hero-lens-iol {
  position: absolute; z-index: 3; width: 380px; height: auto; left: 61%; top: 44%;
  transform-origin: 55.8% 49.07%;                 /* the optic centre */
  transform: translate(-55.8%, -49.07%); pointer-events: none;
  filter:
    brightness(1.3) contrast(1.1) saturate(1.04)
    drop-shadow(0 0 30px rgba(6,22,38,.6))        /* dark aura lifts glass off bright sky */
    drop-shadow(0 22px 38px rgba(6,22,38,.55))    /* grounding shadow */
    drop-shadow(0 0 6px rgba(245,251,255,.8))     /* crisp white rim light */
    drop-shadow(0 0 13px rgba(215,238,255,.7))    /* inner luminous halo */
    drop-shadow(0 0 24px rgba(170,215,255,.55))   /* mid glow */
    drop-shadow(0 0 42px rgba(135,193,250,.42));  /* wide glow */
  will-change: left, top, transform;
  animation: iolTravel 19s ease-in-out infinite;
}

/* the lens roams the scene AND pulls focus: it travels to different parts of
   the background — the couple, the far window, the foreground, the boxes —
   and at each stop drifts toward the viewer (scale up) to "snap" that area
   into sharp focus, then pulls back before moving on. The focus ellipse
   breathes by the same factor so the crisp reveal grows and shrinks with the
   glass at every position. */
@keyframes lensTravel {
  0%   { clip-path: ellipse(140px 153px at 63% 37%); }   /* the man   — arrive, soft */
  16%  { clip-path: ellipse(184px 202px at 63% 36%); }   /* the man   — focus in     */
  33%  { clip-path: ellipse(140px 153px at 82% 34%); }   /* the woman — arrive, soft */
  50%  { clip-path: ellipse(176px 193px at 82% 33%); }   /* the woman — focus in     */
  66%  { clip-path: ellipse(146px 160px at 52% 60%); }   /* the basket — arrive      */
  83%  { clip-path: ellipse(182px 200px at 70% 66%); }   /* foreground — focus in    */
  100% { clip-path: ellipse(140px 153px at 63% 37%); }   /* back to the man          */
}
@keyframes iolTravel {
  0%   { left: 63%; top: 37%; transform: translate(-55.8%,-49.07%) scale(.9);   }  /* man    — far   */
  16%  { left: 63%; top: 36%; transform: translate(-55.8%,-49.07%) scale(1.2);  }  /* man    — close */
  33%  { left: 82%; top: 34%; transform: translate(-55.8%,-49.07%) scale(.9);   }  /* woman  — far   */
  50%  { left: 82%; top: 33%; transform: translate(-55.8%,-49.07%) scale(1.14); }  /* woman  — close */
  66%  { left: 52%; top: 60%; transform: translate(-55.8%,-49.07%) scale(.95);  }  /* basket — move  */
  83%  { left: 70%; top: 66%; transform: translate(-55.8%,-49.07%) scale(1.18); }  /* food   — close */
  100% { left: 63%; top: 37%; transform: translate(-55.8%,-49.07%) scale(.9);   }  /* back   — far   */
}

/* left-side scrim so copy stays legible over the blue field */
.hero-art-scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7,28,49,.80) 0%, rgba(7,28,49,.50) 26%, rgba(7,28,49,.12) 44%, rgba(7,28,49,0) 56%),
    linear-gradient(0deg, rgba(7,28,49,.30) 0%, rgba(7,28,49,0) 26%);
}

/* --- copy ----------------------------------------------------------------- */
.hero--lens .container { position: relative; z-index: 4; }
.hero--lens .hero-copy { max-width: 452px; }
.hero--lens .hero-copy .lead { max-width: 30ch; }
.hero--lens .label { color: #cfe2f4; font-weight: 800;
  font-size: clamp(1.7rem, 1.1rem + 2.2vw, 3rem); letter-spacing: .08em; margin-bottom: .7rem; }
.hero--lens .label::before { display: none; }
.hero--lens h1 { color: #fff; text-shadow: 0 2px 24px rgba(6,22,38,.45);
  white-space: nowrap; font-size: clamp(2.3rem, 1.4rem + 3vw, 3.9rem); line-height: 1.06; }
.hero--lens .lead { color: #dce8f4; }

/* --- product family packs ------------------------------------------------- */
.hero-packs-group {
  position: absolute; z-index: 5; right: clamp(1.25rem, 4vw, 4rem); bottom: clamp(1rem, 3vh, 2.4rem);
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  animation: packsRise 1s cubic-bezier(.2,.7,.2,1) .7s both;
}
/* soft glow that lifts the family of boxes off the photo */
.hero-packs-group::before {
  content: ""; position: absolute; left: -12%; right: -12%; bottom: -8%; height: 82%; z-index: -1;
  background: radial-gradient(58% 80% at 50% 76%, rgba(140,195,240,.6), rgba(140,195,240,0) 70%);
  filter: blur(22px); pointer-events: none;
}
.hero-packs-title {
  margin: 0; font-weight: 700; text-transform: uppercase;
  font-size: clamp(.72rem, .6rem + .3vw, .9rem); letter-spacing: .16em; color: #eaf3fb;
  animation: titleGlow 4.5s ease-in-out infinite;
}
@keyframes titleGlow {
  0%, 100% { opacity: .82; text-shadow: 0 1px 10px rgba(6,22,38,.7); }
  50%      { opacity: 1;   text-shadow: 0 0 18px rgba(150,200,245,.85); }
}
/* boxes stay still — lifted by shadow + glow, not motion */
.hero-packs { display: flex; align-items: flex-end; gap: clamp(.15rem, .8vw, .5rem); }
.hero-packs img {
  height: clamp(100px, 14.5vw, 220px); width: auto;
  filter: drop-shadow(0 22px 30px rgba(6,22,38,.65));
  transition: filter .35s ease;
}
.hero-packs img:nth-child(2),
.hero-packs img:nth-child(3) { z-index: 2; }
.hero-packs img:hover { filter: drop-shadow(0 24px 36px rgba(6,22,38,.7)) brightness(1.08); }

@keyframes packsRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero-sharp { animation: none; clip-path: none; }
  .hero-base { display: none; }
  .hero-lens-iol { display: none; }
  .hero-packs-group { animation: none; }
  .hero-packs-title { animation: none; opacity: 1; }
}

@media (max-width: 860px) {
  .hero--lens { min-height: clamp(460px, 70vh, 580px); align-items: stretch; }
  /* don't force the copy box to full viewport height — keep the hero compact */
  .hero--lens .container { min-height: 0; align-items: center;
    padding-top: clamp(2rem, 8vw, 3rem); padding-bottom: clamp(2.4rem, 9vw, 3.6rem); }
  /* on small screens, drop the travelling lens — show the sharp photo full */
  .hero-base, .hero-sharp { object-position: 64% 38%; }
  .hero-sharp { animation: none; clip-path: none; }
  .hero-base, .hero-lens-iol { display: none; }
  .hero-packs { animation: none; transform: none; }
  /* stronger, more even scrim so the centred copy stays legible over the photo */
  .hero-art-scrim {
    background: linear-gradient(180deg, rgba(7,28,49,.74) 0%, rgba(7,28,49,.5) 42%, rgba(7,28,49,.74) 100%);
  }
  .hero--lens .hero-copy { max-width: none; }
  .hero--lens h1 { white-space: normal; }
}