/* ==========================================================================
   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.
   ========================================================================== */
/* ── Intro splash: AST VisionCare logo "focuses in" on page load (Alcon-style
      blur→sharp reveal), then the full-screen overlay fades away ──────────── */
.intro-splash {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 130% at 50% 42%, #ffffff 58%, #e9f1f9 100%);
  animation: introOut .7s ease 1.7s forwards;          /* hold ~1.7s, then fade out */
}
.intro-logo {
  width: clamp(220px, 34vw, 460px); height: auto;
  opacity: 0; transform: scale(1.16); filter: blur(20px);
  animation: introFocus 1.25s cubic-bezier(.2, .7, .2, 1) .15s forwards;
}
@keyframes introFocus { to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes introOut   { to { opacity: 0; visibility: hidden; pointer-events: none; } }
/* no splash when the user prefers reduced motion */
@media (prefers-reduced-motion: reduce) { .intro-splash { display: none; } }

.hero--lens {
  position: relative;
  overflow: hidden;
  /* height tracks the WIDTH (not the viewport height) so the 16:9 photo always
     shows in full — sky, horizon, duck and foreground — instead of being cropped
     into a tall zoom on short windows */
  min-height: clamp(440px, 54vw, 780px);
  display: flex;
  align-items: flex-start;                /* copy sits high (over the sky) so the lens can roam the lake below */
  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: linear-gradient(120deg, #0b2c4a 0%, #123a5f 55%, #1c4d78 100%);
}

/* --- artwork: full-bleed, edge-to-edge — the photo fills the whole hero and
   runs all the way to the left edge (no blue field gap, no feathered mask) ---- */
.hero-art { position: absolute; inset: 0; margin: 0; z-index: 0; }
.hero-base, .hero-sharp {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
/* base stays soft (the whole scene, incl. the lake on the left, is defocused);
   the travelling lens reveals crisp focus only where its optic passes — guiding
   the eye through the three viewing distances: the book (near), the dock
   (intermediate) and the horizon (far) */
/* the uncorrected world: softly defocused but with natural colour (only the
   travelling lens makes it noticeably brighter + crisper) */
.hero-base  { z-index: 1; filter: blur(10px) saturate(.94) brightness(.92); }
/* the Asqelio-corrected view the lens reveals: bright, vivid, razor-sharp — light
   + clarity, the brand differentiators — with a soft luminous bloom around it */
.hero-sharp { z-index: 2;
  /* Safari needs the -webkit- prefix for clip-path basic shapes, otherwise it
     ignores the ellipse entirely and the sharp layer shows full-frame (the
     "desconfigurado" hero on Safari / iOS). Keep both, webkit first. */
  -webkit-clip-path: ellipse(140px 153px at 54% 54%);
          clip-path: ellipse(140px 153px at 54% 54%);
  will-change: -webkit-clip-path, clip-path;
  filter: contrast(1.07) saturate(1.16) brightness(1.12);
  animation: lensTravel 10s ease-in-out infinite; }

/* travelling IOL glass (classic optic + C-loop haptic render). The optic centre
   of THIS asset sits at 55.8% / 49.07%, so the lens is positioned/scaled about
   that point and does NOT spin (spinning an off-centre optic would orbit it off
   the focus window). It roams the scene and pulls each stop into focus. */
.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;
  will-change: left, top, transform;
  animation: iolTravel 10s ease-in-out infinite;
}
.hero-lens-iol img {
  display: block; width: 100%; height: auto;
  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 */
}
/* one 10s pass over three viewing distances — the basket (near), the couple
   (intermediate) and the far horizon — drifting toward the viewer (scale up) to
   snap each into focus, then the brand logo slide takes over. */
@keyframes iolTravel {
  0%   { left: 54%; top: 54%; transform: translate(-55.8%,-49.07%) scale(.92); }   /* basket — arrive */
  16%  { left: 54%; top: 54%; transform: translate(-55.8%,-49.07%) scale(1.18); }  /* basket — focus  */
  40%  { left: 76%; top: 44%; transform: translate(-55.8%,-49.07%) scale(.92); }   /* couple — arrive */
  56%  { left: 76%; top: 44%; transform: translate(-55.8%,-49.07%) scale(1.18); }  /* couple — focus  */
  80%  { left: 41%; top: 47%; transform: translate(-55.8%,-49.07%) scale(.92); }   /* far    — arrive */
  94%  { left: 41%; top: 47%; transform: translate(-55.8%,-49.07%) scale(1.12); }  /* far    — focus  */
  100% { left: 54%; top: 54%; transform: translate(-55.8%,-49.07%) scale(.92); }   /* back to basket  */
}
/* When the JS animator drives the lens (class added by index.html), the CSS
   keyframes are turned off: Safari runs left/top (main thread) and clip-path
   (compositor) on different clocks, so the two CSS animations drift apart and
   the sharp window escapes the glass. One rAF loop moves both in lock-step. */
.hero--lens.js-lens .hero-sharp,
.hero--lens.js-lens .hero-lens-iol { animation: none; }
/* the focus ellipse breathes with the glass: arrive soft (smaller) then snap in. */
@keyframes lensTravel {
  0%   { -webkit-clip-path: ellipse(140px 153px at 54% 54%); clip-path: ellipse(140px 153px at 54% 54%); }   /* basket — arrive, soft */
  16%  { -webkit-clip-path: ellipse(182px 200px at 54% 54%); clip-path: ellipse(182px 200px at 54% 54%); }   /* basket — focus in     */
  40%  { -webkit-clip-path: ellipse(140px 153px at 76% 44%); clip-path: ellipse(140px 153px at 76% 44%); }   /* couple — arrive, soft */
  56%  { -webkit-clip-path: ellipse(184px 202px at 76% 44%); clip-path: ellipse(184px 202px at 76% 44%); }   /* couple — focus in     */
  80%  { -webkit-clip-path: ellipse(138px 151px at 41% 47%); clip-path: ellipse(138px 151px at 41% 47%); }   /* far    — arrive, soft */
  94%  { -webkit-clip-path: ellipse(170px 187px at 41% 47%); clip-path: ellipse(170px 187px at 41% 47%); }   /* far    — focus in     */
  100% { -webkit-clip-path: ellipse(140px 153px at 54% 54%); clip-path: ellipse(140px 153px at 54% 54%); }   /* back to basket        */
}
/* Dynamic hero banner — two slides driven by JS (data-hero-rotate in index.html):
   slide 1 is the lens scene, slide 2 the white brand frame. The scene shows for
   ~11s, the brand slide for ~4s; hovering pauses the rotation and the dots jump
   straight to a slide. The brand slide reveals with the Alcon-style focus-in. */
.hero-brand-frame {
  position: absolute; inset: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 130% at 50% 36%, #ffffff 58%, #e9f1f9 100%);
  opacity: 0; pointer-events: none;
  transition: opacity .9s cubic-bezier(.4, 0, .2, 1);
}
.hero--lens.brand-on .hero-brand-frame { opacity: 1; }
.hbf-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(1rem, 2.4vw, 1.8rem); }
/* logo: Alcon-style reveal — arrives soft and slightly large, then "focuses"
   crisp into place (blur melts away as it settles), like an optic snapping in */
.hbf-inner img {
  width: clamp(280px, 36vw, 540px); height: auto;
  opacity: 0; transform: scale(1.14); filter: blur(18px);
  transition: opacity .7s ease .15s,
              transform 1.2s cubic-bezier(.2, .7, .2, 1) .15s,
              filter 1.2s cubic-bezier(.2, .7, .2, 1) .15s;
}
.hero--lens.brand-on .hbf-inner img { opacity: 1; transform: scale(1); filter: blur(0); }
/* claim set like the VISIONCARE line of the lockup: tracked uppercase in the
   exact logo blue (#1E5A8D) — clearly subordinate to the enlarged logo */
.hbf-tagline {
  margin: 0; color: #1E5A8D; font-weight: 600; text-align: center;
  text-transform: uppercase; letter-spacing: .26em;
  font-size: clamp(.85rem, .65rem + .85vw, 1.35rem); line-height: 1.3;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s ease .55s, transform 1s cubic-bezier(.2, .7, .2, 1) .55s;
}
.hero--lens.brand-on .hbf-tagline { opacity: 1; transform: translateY(0); }

/* slide dots */
.hero-dots {
  position: absolute; z-index: 7; left: 50%; bottom: clamp(.9rem, 2.6vh, 1.6rem);
  transform: translateX(-50%); display: flex; gap: .55rem;
}
.hero-dots button {
  width: 11px; height: 11px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.45); box-shadow: 0 1px 6px rgba(6,22,38,.35);
  transition: background .3s ease, transform .3s ease;
}
.hero-dots button:hover { background: rgba(255,255,255,.75); }
.hero-dots button[aria-current="true"] { background: #fff; transform: scale(1.25); }
.hero--lens.brand-on .hero-dots button { background: rgba(30,90,141,.30); box-shadow: none; }
.hero--lens.brand-on .hero-dots button[aria-current="true"] { background: #1E5A8D; }

/* left-side scrim so copy stays legible over the bright lake */
.hero-art-scrim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7,28,49,.55) 0%, rgba(7,28,49,.20) 28%, rgba(7,28,49,0) 50%),
    linear-gradient(90deg, rgba(7,28,49,.50) 0%, rgba(7,28,49,.18) 24%, rgba(7,28,49,0) 44%);
}

/* --- copy ----------------------------------------------------------------- */
.hero--lens .container { position: relative; z-index: 4; padding-top: clamp(2rem, 6vh, 4.5rem); }
.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; }

/* hero call-to-action buttons over the dark cover */
.hero--lens .hero-cta { margin-top: 1.7rem; gap: .8rem; flex-wrap: wrap; }
.hero--lens .hero-cta .btn--ghost {
  background: transparent; color: #eaf3fb; border: 1px solid rgba(220,235,250,.62);
}
.hero--lens .hero-cta .btn--ghost:hover {
  background: rgba(255,255,255,.12); border-color: #fff; color: #fff;
}

/* --- 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); } }

/* The hero animation (travelling lens + brand slide) runs for everyone, including
   machines with "reduce motion" enabled — intentionally not gated on
   prefers-reduced-motion, so the effect never appears frozen on other computers. */

@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 — the centred copy and scrim
     cover the whole photo, so the roaming focus window just reads as random
     bright patches behind the text. Show the sharp photo full instead. */
  .hero-base, .hero-sharp { object-position: 58% 56%; }
  /* no-JS fallback: show the sharp photo full-frame. With the JS animator
     (.js-lens) the travelling lens runs on mobile too, scaled to a smaller
     glass — the rAF loop shrinks the focus ellipse to match. */
  .hero-sharp { animation: none; -webkit-clip-path: none; clip-path: none; }
  .hero-base, .hero-lens-iol { display: none; }
  .hero--lens.js-lens .hero-base { display: block; }
  .hero--lens.js-lens .hero-lens-iol { display: block; width: clamp(200px, 52vw, 320px); }
  .hero-packs { animation: none; transform: none; }
  /* stronger, more even scrim so the centred copy stays legible over the photo,
     but lighter mid-band so the travelling lens still reads through it */
  .hero-art-scrim {
    background: linear-gradient(180deg, rgba(7,28,49,.74) 0%, rgba(7,28,49,.42) 42%, rgba(7,28,49,.74) 100%);
  }
  .hero--lens .hero-copy { max-width: none; }
  .hero--lens h1 { white-space: normal; }
}