/* ============================================================
   "La Lente" — MOSE lens-technology landing page
   Scoped under .mose-lente. Reuses global tokens (style.css):
   --mose-pink #FC0075, --mose-dark, Archivo + Space Mono.
   ============================================================ */

.mose-lente {
  --ll-ink:   #1a1a1a;
  --ll-mute:  #555;
  --ll-line:  #1a1a1a;
  --ll-bg:    #f3f3f3;            /* brand grey paper (matches /encuentros/) */
  --ll-pink:  var(--mose-pink, #FC0075);
  --ll-pink2: #d80067;           /* deep pink for the conveyor stripe */
  --ll-mono:  "Space Mono", ui-monospace, monospace;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow-x: clip;
  background: var(--ll-bg);
  color: var(--ll-ink);
  font-family: var(--mose-font, "Archivo", sans-serif);
  -webkit-font-smoothing: antialiased;
}

.mose-lente section { position: relative; padding: clamp(72px, 12vw, 168px) clamp(20px, 6vw, 90px); }

/* ---- shared type ---- */
.mose-lente .ll-h2 {
  font-size: clamp(32px, 5.6vw, 70px);
  font-weight: 800;
  letter-spacing: -.01em;
  text-transform: uppercase;        /* brand: uppercase Archivo display */
  line-height: 1.02;
  margin: 0 auto;
  text-align: center;
  max-width: 18ch;
}
.mose-lente .ll-lead {
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--ll-mute);
  max-width: 56ch;
  margin: 22px auto 0;
  text-align: center;
}
.mose-lente .ll-eyebrow {
  font-family: var(--ll-mono);
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: 12px;
  color: var(--ll-mute);
  margin: 0 0 18px;
}
.mose-lente .ll-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 5vw, 90px);
  max-width: 1100px;
  margin: clamp(40px, 6vw, 80px) auto 0;
}
.mose-lente .ll-cols p { margin: 0; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.62; color: #333; }

/* ---- pill label — square, uppercase, Space Mono (brand data layer) ---- */
.mose-lente .ll-pill {
  display: inline-block;
  font-family: var(--ll-mono);
  font-size: clamp(11px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 14px;
  border: 1.5px solid var(--ll-ink);
  border-radius: 0;                 /* brand: sharp corners */
  background: transparent;
}
.mose-lente .ll-pill--pink { background: var(--ll-pink); border-color: var(--ll-pink); color: #fff; }

/* ---- reveal animation hooks ---- */
.mose-lente [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
.mose-lente [data-reveal].is-in { opacity: 1; transform: none; }

/* ============================================================
   1 · HERO
   ============================================================ */
/* Tall scroll track: the inner pin stays fixed while you scroll through it,
   and scroll position drives the video's currentTime (Apple-style scrub).
   When no video is present the track collapses to one viewport. */
.mose-lente .ll-hero {
  position: relative;
  height: 230svh;
  background: #fff;
}
.mose-lente .ll-hero:not(:has(.ll-hero__video)) { height: 100svh; }
.mose-lente .ll-hero__pin {
  position: sticky;
  top: 0;
  height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: clip;
}
.mose-lente .ll-hero__stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
/* vertical (9:16) white-bg video: fill the stage box and letterbox INSIDE it via
   object-fit:contain, so the lens is always fully visible (never cropped) and the
   white margins melt into the white hero. !important defeats the theme's global
   `video { height:auto }` reset that was forcing the intrinsic 1080x1920 size. */
.mose-lente .ll-hero__video {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain;
  object-position: center;
}
.mose-lente .ll-hero__lens {
  width: min(70vw, 720px);
  max-height: 76vh;
  object-fit: contain;
  filter: drop-shadow(0 40px 70px rgba(0,0,0,.18));
}
/* CSS fallback lens — a glossy iridescent shield disc that slowly spins */
.mose-lente .ll-hero__lens--css {
  aspect-ratio: 1.7 / 1;
  width: min(64vw, 560px);
  border-radius: 52% 52% 48% 48% / 64% 64% 36% 36%;
  background:
    radial-gradient(120% 90% at 30% 25%, rgba(255,255,255,.85), transparent 45%),
    conic-gradient(from 210deg, #ffb38a, #ff7ab0, #b07cff, #ff9e6d, #ffb38a);
  box-shadow: inset 0 -14px 40px rgba(0,0,0,.18), 0 40px 70px rgba(0,0,0,.18);
  animation: ll-spin 16s linear infinite;
}
@keyframes ll-spin { to { transform: rotate(360deg); } }
.mose-lente .ll-hero__copy { position: relative; z-index: 2; }
.mose-lente .ll-hero__title {
  font-size: clamp(56px, 14vw, 190px);
  font-weight: 800;
  letter-spacing: -.03em;
  text-transform: uppercase;
  line-height: .9;
  margin: 0;
  mix-blend-mode: multiply;
}
.mose-lente .ll-hero__tag {
  font-size: clamp(16px, 2vw, 24px);
  color: var(--ll-mute);
  margin: 22px 0 0;
}
.mose-lente .ll-hero__cue {
  position: absolute;
  bottom: 26px; left: 50%; transform: translateX(-50%);
  font-family: var(--ll-mono); font-size: 11px; letter-spacing: .25em;
  text-transform: uppercase; color: var(--ll-mute);
  display: grid; justify-items: center; gap: 8px;
}
.mose-lente .ll-hero__cue span {
  width: 1px; height: 40px; background: var(--ll-ink);
  animation: ll-cue 1.8s ease-in-out infinite; transform-origin: top;
}
@keyframes ll-cue { 0%,100%{transform:scaleY(.3);opacity:.3} 50%{transform:scaleY(1);opacity:1} }

/* ============================================================
   1B · SHOW — pinned video presentation (scroll-scrubbed film)
   ============================================================ */
.mose-lente .ll-show { position: relative; height: 600svh; background: #fff; padding: 0 !important; }
.mose-lente .ll-show__pin { position: sticky; top: 0; height: 100svh; overflow: clip; display: grid; place-items: center; }
.mose-lente .ll-show__video {
  position: absolute; inset: 0;
  width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: contain; object-position: center 58%;   /* glasses sit a touch low so the title has clear space above */
}
.mose-lente .ll-show__overlays { position: absolute; inset: 0; pointer-events: none; }
/* compact, left-aligned block in the bottom-left — never covers the lens */
.mose-lente .ll-show__slide {
  position: absolute; left: clamp(20px, 6vw, 90px); bottom: clamp(34px, 9vh, 88px);
  width: min(86vw, 560px); text-align: left; opacity: 0; transition: opacity .35s ease;
}
/* hero title sits TOP-left in the clear space above the glasses */
.mose-lente .ll-show__slide--title { top: clamp(44px, 6vh, 80px); bottom: auto; }
.mose-lente .ll-show__title {
  font-size: clamp(26px, 5vw, 58px); font-weight: 800; text-transform: uppercase;
  letter-spacing: -.02em; line-height: .96; margin: 0; white-space: nowrap;
}
.mose-lente .ll-show__tag { font-size: clamp(14px, 1.4vw, 18px); color: var(--ll-mute); margin: 12px 0 0; }
.mose-lente .ll-show__h { font-size: clamp(26px, 4.2vw, 54px); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.0; margin: 0 0 10px; }
.mose-lente .ll-show__slide p { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.5; color: #333; margin: 0; max-width: 42ch; }
.mose-lente .ll-show__cue {
  position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%);
  font-family: var(--ll-mono); font-size: 11px; letter-spacing: .25em; text-transform: uppercase;
  color: var(--ll-mute); display: grid; justify-items: center; gap: 8px;
}
.mose-lente .ll-show__cue span { width: 1px; height: 36px; background: var(--ll-ink); animation: ll-cue 1.8s ease-in-out infinite; transform-origin: top; }

/* hidden for now (folded into the show video / paused) */
.mose-lente section.ll-cat,
.mose-lente section.ll-color,
.mose-lente section.ll-photo,
.mose-lente section.ll-material,
.mose-lente section.ll-diagram,
.mose-lente section.ll-intro,
.mose-lente section.ll-shape,
.mose-lente section.ll-cmp { display: none !important; }
/* pink dots removed per request */
.mose-lente .ll-coat__node { display: none !important; }
/* UV: drop "Luz esencial" + the eye — keep the spectrum + pink pills */
.mose-lente .ll-uv__tag--ess,
.mose-lente .ll-uv__eyewrap { display: none !important; }

/* CAT gauge embedded in the photochromic beat overlay (scroll-driven 0→3) */
.mose-lente .ll-cat--show { width: min(86vw, 480px); margin-top: 14px; }
.mose-lente .ll-cat--show .ll-cat__readout { gap: 14px; align-items: baseline; }
.mose-lente .ll-cat--show .ll-cat__num { font-size: clamp(20px, 3vw, 30px); }
.mose-lente .ll-cat--show .ll-cat__text strong { font-size: clamp(13px, 1.5vw, 17px); text-transform: uppercase; }
.mose-lente .ll-cat--show .ll-cat__bar { margin: 12px 0 12px; }
.mose-lente .ll-cat--show .ll-cat__icons { gap: 6px; }
.mose-lente .ll-cat__icons--4 { grid-template-columns: repeat(4, 1fr) !important; }

/* ============================================================
   3 · LABELLED DIAGRAM
   ============================================================ */
.mose-lente .ll-diagram { min-height: 92vh; }
.mose-lente .ll-diagram__art {
  position: relative;
  max-width: 760px;
  margin: clamp(20px, 4vw, 50px) auto 0;
}
.mose-lente .ll-diagram__lens {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,.16));
}
.mose-lente .ll-diagram__lens--css {
  aspect-ratio: 2/1;
  border-radius: 50% 50% 46% 46% / 70% 70% 30% 30%;
  background: conic-gradient(from 200deg, #c89bff, #ff7ab0, #9b6bff, #c89bff);
  box-shadow: inset 0 -10px 30px rgba(0,0,0,.2), 0 30px 50px rgba(0,0,0,.16);
}
.mose-lente .ll-diagram__lines {
  position: absolute; inset: -10% 0 auto 0; width: 100%; height: 120%;
  pointer-events: none; overflow: visible;
}
.mose-lente .ll-line {
  fill: none; stroke: var(--ll-ink); stroke-width: 1.2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s ease .15s;
}
.mose-lente .ll-diagram.is-in .ll-line { stroke-dashoffset: 0; }
.mose-lente .ll-diagram__pill {
  position: absolute; z-index: 3; max-width: 270px;
}
.mose-lente .ll-diagram__pill p { font-size: 15px; line-height: 1.45; color: var(--ll-mute); margin: 12px 0 0; }
.mose-lente .ll-diagram__pill--a { top: 8%;  left: 8%; }
.mose-lente .ll-diagram__pill--b { top: 20%; right: 8%; text-align: right; }
.mose-lente .ll-diagram__pill--b p { margin-left: auto; }

/* ============================================================
   4 · CAT 0–4 INTERACTIVE
   ============================================================ */
.mose-lente .ll-cat__panel {
  max-width: 860px; margin: clamp(40px,6vw,72px) auto 0;
  border: 2px solid var(--ll-ink); border-radius: 0;   /* brand: sharp corners */
  padding: clamp(26px, 4vw, 46px); background: #fff;
}
.mose-lente .ll-cat__readout { display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.mose-lente .ll-cat__num {
  font-family: var(--ll-mono); font-weight: 700;
  font-size: clamp(32px, 5vw, 54px); line-height: 1;
  color: var(--ll-pink); letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.mose-lente .ll-cat__text { display: grid; gap: 4px; }
.mose-lente .ll-cat__text strong { font-size: clamp(18px, 2vw, 24px); text-transform: uppercase; letter-spacing: -.005em; }
.mose-lente .ll-cat__text span { color: var(--ll-mute); font-size: 15px; max-width: 46ch; }

/* conveyor gauge — the brand signature: pink diagonal stripes that scroll */
.mose-lente .ll-cat__bar { display: flex; align-items: center; gap: 14px; margin: 30px 0 26px; }
.mose-lente .ll-cat__sky { font-family: var(--ll-mono); font-size: 10px; text-transform: uppercase; letter-spacing: .14em; color: var(--ll-mute); white-space: nowrap; }
.mose-lente .ll-cat__gauge { position: relative; flex: 1; }
.mose-lente .ll-cat__track {
  position: relative; height: 16px; overflow: hidden;
  border: 2px solid var(--ll-ink); border-radius: 999px; background: #fff;
}
.mose-lente .ll-cat__fill {
  position: absolute; inset: 0 auto 0 0; width: 50%;
  background-image: repeating-linear-gradient(45deg,
    var(--ll-pink) 0, var(--ll-pink) 11px, var(--ll-pink2) 11px, var(--ll-pink2) 22px);
  background-size: 31.11px 16px;
  animation: ll-belt 2.6s linear infinite;
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
@keyframes ll-belt { to { background-position: 31.11px 0; } }
/* the range sits invisibly over the track for keyboard + drag control */
.mose-lente .ll-cat__gauge input[type=range] {
  position: absolute; inset: -8px 0; width: 100%; height: 32px; margin: 0;
  -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize;
}
.mose-lente .ll-cat__gauge input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; border: 2.5px solid var(--ll-ink); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: grab;
}
.mose-lente .ll-cat__gauge input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: #fff;
  border: 2.5px solid var(--ll-ink); box-shadow: 0 2px 8px rgba(0,0,0,.25); cursor: grab;
}
.mose-lente .ll-cat__gauge input[type=range]:focus-visible { outline: 2px solid var(--ll-pink); outline-offset: 4px; }

.mose-lente .ll-cat__icons { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mose-lente .ll-cat__icon {
  appearance: none; cursor: pointer; background: transparent;
  border: 1.5px solid #e0e0e0; border-radius: 0;       /* square */
  padding: 14px 6px 10px; display: grid; justify-items: center; gap: 8px;
  color: #c2c2c2; transition: border-color .3s ease, color .3s ease;
}
.mose-lente .ll-cat__icon svg { width: 28px; height: 28px; }
.mose-lente .ll-cat__icon em {
  font-style: italic; font-family: var(--ll-mono); font-size: 10px;
  letter-spacing: .06em; color: inherit;
}
.mose-lente .ll-cat__icon.is-active { border-color: var(--ll-ink); color: var(--ll-ink); }
.mose-lente .ll-cat__icon.is-active svg { color: var(--ll-pink); }
.mose-lente .ll-cat__icon.is-active em { font-weight: 700; }

/* ============================================================
   5 · COLOUR COMPARISON
   ============================================================ */
/* pinned scroll-wipe comparison: FULL-HEIGHT image, title on a floating white card */
.mose-lente .ll-cmp { position: relative; height: 220svh; padding: 0; }
.mose-lente .ll-cmp__pin { position: sticky; top: 0; height: 100svh; overflow: clip; }
.mose-lente .ll-cmp__media {
  position: absolute; inset: 0; width: 100vw; height: 100%; overflow: hidden;
}
/* title + copy on a white card in the bottom-left corner */
.mose-lente .ll-cmp__head {
  position: absolute; left: clamp(16px,3vw,48px); bottom: clamp(16px,3vw,48px); z-index: 5;
  background: #fff; padding: clamp(20px,2vw,30px) clamp(22px,2.4vw,38px); text-align: left;
  max-width: min(86vw, 440px); box-shadow: 0 24px 60px rgba(0,0,0,.22);
}
.mose-lente .ll-cmp__head .ll-h2 { font-size: clamp(22px, 3vw, 40px); line-height: 1.0; }
.mose-lente .ll-cmp__head .ll-lead { margin-top: 10px; font-size: clamp(14px,1.4vw,17px); }
.mose-lente .ll-cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mose-lente .ll-cmp__top { position: absolute; top: 0; left: 0; height: 100%; width: 50%; overflow: hidden; }
.mose-lente .ll-cmp__top .ll-cmp__img { width: 100vw; max-width: none; }
/* MOSE = tinted lens: slightly DARKER but richer colour + contrast (not blasting bright) */
.mose-lente .ll-cmp__img--mose { filter: brightness(.9) saturate(1.2) contrast(1.12); }
/* neutra = plain lens: darkened + flat/dull */
.mose-lente .ll-cmp__top .ll-cmp__img { filter: brightness(.92) saturate(.6) contrast(.93); }
.mose-lente .ll-cmp__img--css { background: linear-gradient(120deg, #9ec5d8, #cbb89a 60%, #8a9a6b); }
.mose-lente .ll-cmp__img--mose.ll-cmp__img--css { background: linear-gradient(120deg, #2f7fa8, #d98b3a 55%, #4c7a2a); }
.mose-lente .ll-cmp__line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.12); z-index: 3; }
.mose-lente .ll-cmp__lbl {
  position: absolute; bottom: 16px; z-index: 4; font-family: var(--ll-mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: #fff; background: rgba(0,0,0,.45); padding: 7px 13px; backdrop-filter: blur(4px);
}
.mose-lente .ll-cmp__lbl--l { left: 16px; }
.mose-lente .ll-cmp__lbl--r { right: 16px; background: var(--ll-pink); }

/* ============================================================
   6 · PHOTOCHROMIC
   ============================================================ */
.mose-lente .ll-photo__stage { display: grid; place-items: center; margin: clamp(30px,5vw,60px) auto; max-width: 820px; }
.mose-lente .ll-photo__lens { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0,0,0,.16)); }
.mose-lente .ll-photo__lens--css {
  width: min(70vw,620px); aspect-ratio: 2.4/1; border-radius: 50%;
  background: linear-gradient(90deg, rgba(220,220,225,.35) 0%, rgba(220,220,225,.5) 40%, #c98a86 70%, #8c4f63 100%);
  box-shadow: inset 0 -8px 24px rgba(0,0,0,.18), 0 30px 50px rgba(0,0,0,.14);
}
.mose-lente .ll-photo__feats { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,70px); max-width: 1000px; margin: 0 auto; }
.mose-lente .ll-photo__feats p { margin: 14px 0 0; color: var(--ll-mute); line-height: 1.55; font-size: 15px; }

/* ============================================================
   7 · COATING / EXPLODED LAYERS
   ============================================================ */
/* sticky scroll-track: pins while the three layers separate */
.mose-lente .ll-coat { position: relative; height: 220svh; padding: 0; }
.mose-lente .ll-coat__pin {
  position: sticky; top: 0; height: 100svh; overflow: clip; padding: 0;
}
/* title + lead pinned to the TOP; the disc stack centres independently so it never crops or rides into the title */
.mose-lente .ll-coat__pin > .ll-h2 {
  position: absolute; left: 0; right: 0; top: clamp(76px, 10vh, 104px); margin: 0;
  padding: 0 clamp(20px,6vw,90px); text-align: center;
  font-size: clamp(28px, 4.6vw, 60px); white-space: nowrap;
}
.mose-lente .ll-coat__pin > .ll-lead {
  position: absolute; left: 0; right: 0; top: clamp(132px, 17vh, 166px); margin: 0;
  padding: 0 clamp(20px,6vw,90px); text-align: center;
}

/* Tight exploded stack: discs overlap close together, linked by a glowing
   centre spine (futuristic raycast) with a pulse travelling down it + a node
   where the spine meets each disc; labels sit out to the sides with a connector. */
.mose-lente .ll-coat__stack {
  position: absolute; top: 58%; left: 50%; transform: translate(-50%, -50%);
  width: min(680px, 92vw); margin: 0;
  display: flex; flex-direction: column; align-items: center;
}
.mose-lente .ll-coat__spine {
  position: absolute; left: 50%; top: 64px; bottom: 64px; width: 2px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, rgba(252,0,117,.5) 12%, rgba(252,0,117,.5) 88%, transparent);
  overflow: hidden; z-index: 1;
}
.mose-lente .ll-coat__spine::after {
  content: ""; position: absolute; left: -1px; width: 4px; height: 48px; border-radius: 2px;
  background: linear-gradient(180deg, transparent, #fff, transparent);
  animation: ll-spinepulse 2.6s linear infinite;
}
@keyframes ll-spinepulse { from { top: -48px; } to { top: 100%; } }

.mose-lente .ll-coat__layer {
  position: relative; z-index: 2; width: 100%;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
  transition: transform .8s cubic-bezier(.22,.61,.36,1), opacity .8s ease;
}
/* overlap only BETWEEN discs so the stack doesn't ride up into the title */
.mose-lente .ll-coat__layer + .ll-coat__layer {
  margin-top: clamp(-95px, -6vw, -65px);            /* start stacked; JS cascades them apart on scroll */
}
.mose-lente .ll-coat__img { width: min(54vw, 300px); height: auto; display: block; position: relative; z-index: 2;
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.22)); }
/* reserve each disc's height (matches the file's real ratio) so the layout never collapses while images load */
.mose-lente .ll-coat__layer[data-layer="0"] .ll-coat__img { aspect-ratio: 879 / 423; }
.mose-lente .ll-coat__layer[data-layer="1"] .ll-coat__img { aspect-ratio: 1016 / 696; }
.mose-lente .ll-coat__layer[data-layer="2"] .ll-coat__img { aspect-ratio: 850 / 603; }
.mose-lente .ll-coat__img--css { aspect-ratio: 1.6/1; border-radius: 50%; width: min(54vw,300px); }
.mose-lente .ll-coat__img--css.l0 { background: radial-gradient(120% 90% at 35% 25%, #fff, #c9ccd6); }
.mose-lente .ll-coat__img--css.l1 { background: radial-gradient(120% 90% at 35% 25%, #f3f3f5, #d7d9df); }
.mose-lente .ll-coat__img--css.l2 { background: linear-gradient(135deg, #6d63ff, #b06bff 60%, #4a55d6); }

.mose-lente .ll-coat__node {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 4;
  width: 12px; height: 12px; border-radius: 50%; background: var(--ll-pink);
  box-shadow: 0 0 0 5px rgba(252,0,117,.16), 0 0 14px rgba(252,0,117,.9);
}
.mose-lente .ll-coat__cap { position: absolute; top: 50%; transform: translateY(-50%); width: min(32vw, 220px); }
.mose-lente .ll-coat__cap .ll-pill { margin-bottom: 12px; }
.mose-lente .ll-coat__cap p { margin: 0; color: var(--ll-mute); line-height: 1.5; font-size: 14px; }
.mose-lente .ll-coat__layer[data-layer="1"] .ll-coat__cap { right: calc(50% + 172px); text-align: right; }
.mose-lente .ll-coat__layer[data-layer="0"] .ll-coat__cap,
.mose-lente .ll-coat__layer[data-layer="2"] .ll-coat__cap { left: calc(50% + 172px); text-align: left; }
/* connector stub from the label toward the centre node */
.mose-lente .ll-coat__cap::before {
  content: ""; position: absolute; top: 8px; width: 64px; height: 1px;
}
.mose-lente .ll-coat__layer[data-layer="0"] .ll-coat__cap::before,
.mose-lente .ll-coat__layer[data-layer="2"] .ll-coat__cap::before { right: 100%; margin-right: 8px; background: linear-gradient(270deg, var(--ll-pink), transparent); }
.mose-lente .ll-coat__layer[data-layer="1"] .ll-coat__cap::before { left: 100%; margin-left: 8px; background: linear-gradient(90deg, var(--ll-pink), transparent); }

/* ============================================================
   8 · UV & BLUE LIGHT (dark)
   ============================================================ */
/* sticky scroll-track: rays travel to the eye; UV/IR bounce off the lens */
.mose-lente .ll-uv { position: relative; height: 260svh; padding: 0; background: #000; color: #fff; }
.mose-lente .ll-uv__pin {
  position: sticky; top: 0; height: 100svh; overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(70px,10vh,110px) clamp(14px,4vw,60px) clamp(28px,5vh,56px);
}
.mose-lente .ll-uv .ll-lead { color: #aaa; }
/* vertical ray diagram */
.mose-lente .ll-uv__stage { position: relative; z-index: 2; display: flex; justify-content: center; width: 100%; margin-top: clamp(8px,1.6vh,22px); }
.mose-lente .ll-uv__diagram { height: min(680px, 66svh); width: auto; overflow: visible; }
.mose-lente .ll-uv__lbl text { fill: #fff; font-family: var(--ll-mono); font-size: 28px; letter-spacing: .1em; }
.mose-lente .ll-uv__ray { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px currentColor); }
.mose-lente .ll-uv__ray--weak { stroke-width: 3; opacity: .38; }   /* blue light: passes but weakened */
.mose-lente .ll-uv__lensline { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 3.5; }
.mose-lente .ll-uv__eye { fill: none; stroke: #fff; stroke-width: 9; }
.mose-lente .ll-uv__eye .ll-uv__pupil { fill: #fff; }
/* full-width glowing spectrum that blurs up into the black background, behind the eye */
.mose-lente .ll-uv__spectrum {
  position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; bottom: 0; z-index: 0; pointer-events: none;
  height: clamp(220px, 42vh, 460px);
  filter: blur(34px) saturate(1.4); opacity: .8;
  -webkit-mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,.8) 32%, transparent 90%);
  mask-image: linear-gradient(to top, #000 4%, rgba(0,0,0,.8) 32%, transparent 90%);
}
.mose-lente .ll-uv__spectrum svg { width: 100%; height: 100%; display: block; }

/* ============================================================
   9 · LIGHTWEIGHT & SHOCKPROOF
   ============================================================ */
.mose-lente .ll-material { display: grid; place-items: center; text-align: center; overflow: clip; }
.mose-lente .ll-material__grid {
  position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none;
  background-image: linear-gradient(#0001 1px, transparent 1px), linear-gradient(90deg,#0001 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(60% 60% at 50% 60%, #000, transparent 75%);
  mask-image: radial-gradient(60% 60% at 50% 60%, #000, transparent 75%);
}
.mose-lente .ll-material__sphere {
  width: clamp(180px, 30vw, 360px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(120% 120% at 35% 25%, rgba(255,255,255,.9), rgba(180,184,196,.55) 55%, rgba(140,144,158,.5));
  box-shadow: inset 0 -12px 40px rgba(0,0,0,.18);
}
.mose-lente .ll-material__copy { position: relative; z-index: 2; }
.mose-lente .ll-material__pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,5vw,80px); max-width: 900px; margin: 36px auto 0; }
.mose-lente .ll-material__pair p { margin: 12px 0 0; color: var(--ll-mute); line-height: 1.5; font-size: 15px; }

/* ============================================================
   10 · SHAPE
   ============================================================ */
.mose-lente .ll-shape__art { display: grid; place-items: center; margin-top: clamp(30px,5vw,60px); }
.mose-lente .ll-shape__lens { width: min(70vw, 700px); height: auto; filter: drop-shadow(0 34px 56px rgba(0,0,0,.18)); }
.mose-lente .ll-shape__lens--css {
  width: min(60vw,520px); aspect-ratio: 2/1; border-radius: 60% 60% 44% 44% / 80% 80% 30% 30%;
  background: linear-gradient(160deg, rgba(220,220,225,.7), rgba(190,192,200,.5));
  box-shadow: inset 0 -10px 30px rgba(0,0,0,.16), 0 34px 56px rgba(0,0,0,.16);
  transform: perspective(900px) rotateX(28deg);
}

/* ============================================================
   11 · CTA
   ============================================================ */
.mose-lente .ll-cta { text-align: center; background: radial-gradient(100% 80% at 50% 0%, #fff, var(--ll-bg)); }
.mose-lente .ll-cta__title { font-size: clamp(40px, 8vw, 96px); font-weight: 800; letter-spacing: -.03em; margin: 0; }
.mose-lente .ll-cta__steps { list-style: none; counter-reset: s; padding: 0; margin: 30px auto 0; display: grid; gap: 6px; }
.mose-lente .ll-cta__steps li { counter-increment: s; font-size: clamp(16px,1.6vw,21px); color: #333; }
.mose-lente .ll-cta__steps li::before { content: counter(s) ". "; font-family: var(--ll-mono); color: var(--ll-pink); }
.mose-lente .ll-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.mose-lente .ll-btn {
  display: inline-block; font-family: var(--ll-mono); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; text-decoration: none;
  padding: 17px 32px; border-radius: 0; border: 1.5px solid var(--ll-ink); color: var(--ll-ink);
  background: transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease;
}
.mose-lente .ll-btn:hover { transform: translateY(-2px); }
.mose-lente .ll-btn--pink { background: var(--ll-pink); border-color: var(--ll-pink); color: #fff; }
/* primary CTA: on hover, the same scrolling pink conveyor sheen as the bib/cat bar */
.mose-lente .ll-btn--pink:hover {
  background-color: var(--ll-pink);
  background-image: linear-gradient(45deg,
    rgba(255,255,255,.24) 25%, transparent 25%, transparent 50%,
    rgba(255,255,255,.24) 50%, rgba(255,255,255,.24) 75%, transparent 75%);
  background-size: 16px 16px;
  animation: ll-beltsheen .55s linear infinite;
}
@keyframes ll-beltsheen { to { background-position: 16px 0; } }

/* ============================================================
   10B · LENS CATALOG BY USE / LIGHT
   ============================================================ */
.mose-lente .ll-lens { text-align: center; }
.mose-lente .ll-lens__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px,1.8vw,28px);
  max-width: 1180px; margin: clamp(32px,5vw,60px) auto 0; text-align: left;
}
.mose-lente .ll-lens__card {
  background: #fff; border: 1px solid #e7e7e7; padding: clamp(20px,1.8vw,30px);
  display: flex; flex-direction: column; min-height: 100%;
}
.mose-lente .ll-lens__swatch {
  width: 100%; aspect-ratio: 1.7 / 1; display: block; margin-bottom: 18px;
  box-shadow: inset 0 -6px 16px rgba(0,0,0,.14), 0 8px 20px rgba(0,0,0,.10);
}
.mose-lente .ll-lens__swatch--photo  { background: linear-gradient(118deg, rgba(255,255,255,.9) 8%, #f1c64a 92%); }
.mose-lente .ll-lens__swatch--mirror { background: linear-gradient(118deg, #b9d2ee, #8aa0c8 45%, #5560d6 90%); }
.mose-lente .ll-lens__swatch--tint   { background: linear-gradient(118deg, #e7a86a, #c45f7c 95%); }
.mose-lente .ll-lens__swatch--clear  { background: linear-gradient(118deg, rgba(255,255,255,.95), rgba(214,221,232,.7)); border: 1px solid #e2e6ee; }
.mose-lente .ll-lens__name { font-family: var(--mose-font, "Archivo", sans-serif); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em; font-size: clamp(17px,1.4vw,21px); margin: 0 0 12px; }
.mose-lente .ll-lens__bar { position: relative; height: 6px; background: #ececec; }
.mose-lente .ll-lens__zone {
  position: absolute; top: 0; bottom: 0; background: var(--ll-pink);
  background-image: repeating-linear-gradient(115deg, var(--ll-pink) 0 7px, var(--ll-pink2) 7px 14px);
}
.mose-lente .ll-lens__scale { display: flex; justify-content: space-between; margin: 7px 0 14px; font-family: var(--ll-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: #999; }
.mose-lente .ll-lens__use { font-size: 14px; line-height: 1.55; color: #333; margin: 0 0 16px; flex: 1; }
.mose-lente .ll-lens__models { font-family: var(--ll-mono); font-size: 11px; letter-spacing: .04em; color: var(--ll-mute); }
.mose-lente .ll-lens__note { font-family: var(--ll-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #999; margin: clamp(24px,3vw,40px) 0 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .mose-lente .ll-cols,
  .mose-lente .ll-photo__feats,
  .mose-lente .ll-material__pair { grid-template-columns: 1fr; }
  .mose-lente .ll-lens__grid { grid-template-columns: 1fr 1fr; }
  /* coat: stack label under each disc, drop the spine/connectors */
  .mose-lente .ll-coat__layer { flex-direction: column; margin: 10px 0; }
  .mose-lente .ll-coat__layer + .ll-coat__layer { margin-top: 10px; }
  .mose-lente .ll-coat__cap { position: static; transform: none; width: auto; max-width: 34ch;
    text-align: center !important; left: auto !important; right: auto !important; margin: 4px auto 0; }
  .mose-lente .ll-coat__cap::before { display: none; }
  .mose-lente .ll-coat__cap p { margin-inline: auto; }
  .mose-lente .ll-coat__spine, .mose-lente .ll-coat__node { display: none; }
  .mose-lente .ll-coat__img, .mose-lente .ll-coat__img--css { width: min(64vw, 260px); }
  .mose-lente .ll-diagram__pill { position: static; max-width: none; text-align: center !important; margin: 0 auto 20px; }
  .mose-lente .ll-diagram__pill p { margin-inline: auto !important; }
  .mose-lente .ll-diagram__lines { display: none; }
  .mose-lente .ll-cat__icons { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .mose-lente .ll-cat__icon { padding: 12px 2px 8px; }
  .mose-lente .ll-cat__icon svg { width: 24px; height: 24px; }
  .mose-lente .ll-hero__title { mix-blend-mode: normal; }

  /* coat on mobile: plain vertical stack (no pin, no absolute, no JS offset) */
  .mose-lente .ll-coat { height: auto !important; }
  .mose-lente .ll-coat__pin { position: static !important; height: auto !important; overflow: visible; padding: 48px 20px 8px; }
  .mose-lente .ll-coat__pin > .ll-h2,
  .mose-lente .ll-coat__pin > .ll-lead { position: static !important; padding: 0; left: auto; right: auto; }
  .mose-lente .ll-coat__pin > .ll-lead { margin: 8px 0 24px; }
  .mose-lente .ll-coat__stack { position: static !important; transform: none !important; margin: 0 auto; width: 100%; }

  /* UV pills: stack vertically (top + bottom of the chart) so they don't collide */
  /* pills flow BELOW the chart (stacked, centered) so they never overlap the spectrum */
  .mose-lente .ll-uv__tag--l,
  .mose-lente .ll-uv__tag--r {
    position: static !important; transform: none !important;
    left: auto !important; right: auto !important; top: auto !important; bottom: auto !important;
    flex-direction: row !important; width: max-content; margin: 14px auto 0 !important;
  }

  /* show: shorter scroll track + larger video band so the wide lens fills more of the phone screen (less dead space) */
  .mose-lente .ll-show { height: 440svh; }
  .mose-lente .ll-show__video { object-position: center 42%; transform: scale(1.35); }
  /* beat copy sits just under the video band (not way down at the bottom) */
  .mose-lente .ll-show__slide:not(.ll-show__slide--title) { top: 54%; bottom: auto; }
}

/* ============================================================
   REDUCED MOTION — show final states, kill scrubbing/spin
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .mose-lente [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .mose-lente .ll-line { stroke-dashoffset: 0 !important; }
  .mose-lente .ll-hero__lens--css { animation: none !important; }
  .mose-lente .ll-hero__cue span { animation: none !important; }
  .mose-lente .ll-cat__fill { animation: none !important; }
  .mose-lente .ll-btn--pink:hover { animation: none !important; background-image: none !important; }
  .mose-lente .ll-coat__spine::after { animation: none !important; }
  /* UV: no ray animation — show the rays fully drawn + the eye */
  .mose-lente .ll-uv__ray { stroke-dashoffset: 0 !important; }
  .mose-lente .ll-uv__eye { opacity: 1 !important; }
  /* collapse the pinned tracks so there's no dead scroll without animation */
  .mose-lente .ll-coat, .mose-lente .ll-uv, .mose-lente .ll-show { height: 100svh !important; }
  .mose-lente .ll-coat__pin, .mose-lente .ll-uv__pin { position: static !important; min-height: 0 !important; }
  .mose-lente .ll-coat__layer { margin: 14px 0 !important; opacity: 1 !important; }
  .mose-lente .ll-show__pin { position: static !important; }
  .mose-lente .ll-show__slide--title { opacity: 1 !important; }
  .mose-lente .ll-show__cue span { animation: none !important; }
  /* the spectrum chart's <animate> is paused from JS when reduced motion is set */
}