/* ==========================================================================
   StaffiQ — The Capability Lens
   Signature hero experience. A dark evergreen scanner panel holding an
   illustrative team. Every person is an anonymous blur until the cursor lens
   passes over them, at which point their readiness, their gap and the exact
   StaffiQ next step come into focus. The blur is the problem. The lens is
   StaffiQ.

   Self contained. Same origin only. No external libraries. Reduced motion and
   keyboard users get a fully usable, fully legible version.
   ========================================================================== */

.lens-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background:
    radial-gradient(120% 90% at 8% -10%, #06342A 0%, transparent 58%),
    radial-gradient(100% 80% at 100% 110%, #073B2C 0%, transparent 62%),
    linear-gradient(168deg, #00241C 0%, #00120E 100%);
  color: #F4FBF7;
  padding: clamp(84px, 11vw, 140px) 0 clamp(56px, 7vw, 96px);
}

/* Faint grid so the panel reads as an instrument, not a poster. */
.lens-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.32;
  background-image:
    linear-gradient(rgba(198, 242, 78, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198, 242, 78, 0.07) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(120% 90% at 50% 30%, #000 0%, transparent 78%);
}

.lens-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(30px, 4.4vw, 62px);
  align-items: center;
}
@media (max-width: 1020px) { .lens-grid { grid-template-columns: 1fr; } }

/* ── Copy column ───────────────────────────────────────────────────────── */
.lens-copy { max-width: 620px; min-width: 0; }
.lens-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid rgba(198, 242, 78, 0.34);
  background: rgba(198, 242, 78, 0.1);
  color: #E8FBB4;
  font-size: 0.83rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.lens-pill i {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime, #C6F24E);
  box-shadow: 0 0 0 0 rgba(198, 242, 78, 0.6);
  animation: lensPing 2.1s ease-out infinite;
}
@keyframes lensPing { to { box-shadow: 0 0 0 13px rgba(198, 242, 78, 0); } }

.lens-copy h1 {
  margin-top: 20px;
  font-size: clamp(2.05rem, 3.5vw, 3.15rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 800;
  color: #FFFFFF;
  text-wrap: balance;
}
.lens-copy h1 .hl { position: relative; color: var(--lime, #C6F24E); white-space: normal; }
.lens-copy h1 .hl::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.26em;
  background: rgba(198, 242, 78, 0.24);
  border-radius: 4px; z-index: -1;
}
.lens-lead {
  margin-top: 20px;
  max-width: 540px;
  font-size: 1.03rem;
  line-height: 1.72;
  color: rgba(244, 251, 247, 0.8);
}
.lens-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 30px; }
.lens-actions .btn-lime {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 50px; padding: 13px 26px; border-radius: 999px;
  background: var(--lime, #C6F24E); color: #00241C;
  font-weight: 800; font-size: 1rem; border: 0;
  box-shadow: 0 12px 34px rgba(198, 242, 78, 0.26);
  transition: transform 1.5s cubic-bezier(.16,1,.3,1), box-shadow 1.5s, background 1.5s;
}
.lens-actions .btn-lime:hover { transform: translateY(-2px); background: #D6FA6E; box-shadow: 0 18px 48px rgba(198, 242, 78, 0.4); }
.lens-actions .btn-line {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 50px; padding: 13px 26px; border-radius: 999px;
  border: 1px solid rgba(244, 251, 247, 0.24); color: #F4FBF7;
  font-weight: 800; font-size: 1rem; background: transparent;
  transition: transform 1.5s cubic-bezier(.16,1,.3,1), background 1.5s;
}
.lens-actions .btn-line:hover { transform: translateY(-2px); background: rgba(244, 251, 247, 0.09); }
.lens-actions svg { width: 19px; height: 19px; }

.lens-proof {
  display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px;
  font-size: 0.9rem; color: rgba(244, 251, 247, 0.68); font-weight: 600;
}
.lens-proof .check { color: var(--lime, #C6F24E); font-weight: 800; }

/* ── Scanner panel ─────────────────────────────────────────────────────── */
.lens-panel {
  position: relative;
  border-radius: 26px;
  padding: 16px;
  background: linear-gradient(158deg, rgba(255, 255, 255, 0.11), rgba(0, 36, 28, 0.5));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: 0 40px 110px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transform: perspective(1400px) rotateY(var(--tilt, 0deg)) rotateX(var(--tiltx, 0deg));
  transform-style: preserve-3d;
  transition: transform 1.5s cubic-bezier(.16,1,.3,1);
}
.lens-panel__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 2px 6px 14px;
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(244, 251, 247, 0.55);
}
.lens-panel__bar b { color: var(--lime, #C6F24E); font-weight: 800; letter-spacing: 0.06em; }
.lens-panel__mark {
  width: clamp(56px, 7vw, 78px); height: auto; display: block;
  filter: drop-shadow(0 6px 18px rgba(198, 242, 78, 0.28));
  animation: lensMarkBob 7s ease-in-out infinite;
}
@keyframes lensMarkBob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.lens-panel__bar .spacer { flex: 1 1 auto; }
.lens-panel__dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(198, 242, 78, 0.85); }
.lens-panel__dot:nth-child(2) { background: rgba(255, 176, 32, 0.8); }
.lens-panel__dot:nth-child(3) { background: rgba(255, 111, 97, 0.75); }

.lens-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

/* The lens itself: a soft emerald pool of light that follows the pointer. */
.lens-glow {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0; transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
  background: radial-gradient(170px circle at var(--lx, 50%) var(--ly, 50%),
    rgba(198, 242, 78, 0.2) 0%, rgba(14, 159, 115, 0.12) 42%, transparent 68%);
}
.lens-stage[data-hot="on"] .lens-glow { opacity: 1; }
.lens-ring {
  position: absolute; z-index: 4; pointer-events: none;
  width: 176px; height: 176px; border-radius: 50%;
  left: var(--lx, 50%); top: var(--ly, 50%);
  translate: -50% -50%;
  border: 1px solid rgba(198, 242, 78, 0.4);
  box-shadow: inset 0 0 40px rgba(198, 242, 78, 0.1);
  opacity: 0; transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-stage[data-hot="on"] .lens-ring { opacity: 1; }
.lens-ring::after {
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  border: 1px dashed rgba(198, 242, 78, 0.28);
  animation: lensSpin 9s linear infinite;
}
@keyframes lensSpin { to { transform: rotate(360deg); } }

/* Periodic x-ray sweep. Everything lights up for a moment, then hides again. */
.lens-sweep {
  position: absolute; top: 0; bottom: 0; width: 34%; z-index: 2; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(198, 242, 78, 0.16), transparent);
  animation: lensSweep 9s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes lensSweep {
  0%, 72% { transform: translateX(-120%); opacity: 0; }
  74% { opacity: 1; }
  99%, 100% { transform: translateX(330%); opacity: 0; }
}

/* Mesh lines between people. Drawn once, animated by dash. */
.lens-mesh { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.lens-mesh line {
  stroke: rgba(143, 233, 196, 0.2); stroke-width: 0.6;
  stroke-dasharray: 4 7; animation: lensDash 3.4s linear infinite;
}
@keyframes lensDash { to { stroke-dashoffset: -22; } }
.lens-wire {
  fill: none; stroke: rgba(198, 242, 78, 0.8); stroke-width: 1.5;
  stroke-dasharray: 6 8; animation: lensDash 1.5s linear infinite;
  filter: drop-shadow(0 0 5px rgba(198, 242, 78, 0.65));
}

/* ── A person ──────────────────────────────────────────────────────────── */
.lens-node {
  position: absolute; z-index: 3;
  left: var(--x); top: var(--y);
  display: grid; grid-auto-flow: column; align-items: center; gap: 10px;
  padding: 9px 15px 9px 11px; translate: -50% -50%;
  border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  white-space: nowrap;
  transition: filter 1.5s cubic-bezier(.4,0,.2,1), opacity 1.5s cubic-bezier(.4,0,.2,1);
  animation: lensDrift 15s ease-in-out infinite;
  animation-delay: var(--delay, 1.5s);
}
.lens-node::before {
  content: ""; position: absolute; inset: 0; border-radius: 999px;
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.13), rgba(0, 36, 28, 0.66));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  opacity: calc(0.45 + var(--near, 0) * 0.55);
  transition: opacity 1.5s cubic-bezier(.4,0,.2,1), box-shadow 1.5s cubic-bezier(.4,0,.2,1), border-color 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-node__name {
  position: relative; z-index: 2;
  font-size: 0.82rem; font-weight: 700; letter-spacing: 0.005em;
  color: rgba(244, 251, 247, calc(0.3 + var(--near, 0) * 0.7));
  filter: blur(calc((1 - var(--near, 0)) * 3.6px));
  transition: filter 1.5s cubic-bezier(.4,0,.2,1), color 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-node__role {
  position: relative; z-index: 2;
  font-size: 0.68rem; font-weight: 600;
  color: rgba(198, 242, 78, calc(var(--near, 0) * 0.85));
  filter: blur(calc((1 - var(--near, 0)) * 3px));
  transition: filter 1.5s cubic-bezier(.4,0,.2,1), color 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-node__initials {
  position: relative; z-index: 2;
  font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em;
  color: rgba(244, 251, 247, calc(0.34 + var(--near, 0) * 0.66));
  filter: blur(calc((1 - var(--near, 0)) * 3.4px));
  transition: filter 1.5s, color 1.5s;
}
/* Readiness ring. Conic gradient sized by --pct, only legible under the lens. */
.lens-node__avatar {
  position: relative; z-index: 2; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(0, 36, 28, 0.75);
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.03em;
  color: rgba(244, 251, 247, calc(0.45 + var(--near, 0) * 0.55));
  transition: color 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-node__ring {
  position: absolute; inset: -3px; border-radius: 50%;
  opacity: calc(0.16 + var(--near, 0) * 0.84);
  background: conic-gradient(var(--band) calc(var(--pct) * 1%), rgba(255, 255, 255, 0.09) 0);
  mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
  transition: opacity 1.5s;
}
.lens-node__pct {
  position: relative; z-index: 2;
  font-size: 0.72rem; font-weight: 800; color: var(--band);
  opacity: calc(0.25 + var(--near, 0) * 0.75); transition: opacity 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-node[data-seen="true"]::after {
  content: ""; position: absolute; top: -3px; right: -3px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--lime, #C6F24E);
  box-shadow: 0 0 9px rgba(198, 242, 78, 0.85);
}
.lens-node:focus-visible { outline: 2px solid var(--lime, #C6F24E); outline-offset: 6px; border-radius: 50%; }
.lens-node[data-live="true"] { z-index: 6; animation-play-state: paused; }
.lens-node[data-live="true"]::before {
  opacity: 1;
  border-color: rgba(198, 242, 78, 0.72);
  box-shadow: 0 0 0 4px rgba(198, 242, 78, 0.14), 0 18px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}
/* While one name is in focus the rest of the page steps back. */
.lens-hero[data-awake="true"] .lens-node[data-live="false"] { filter: blur(4px); opacity: 0.42; }
.lens-hero[data-awake="true"] .lens-copy { opacity: 0.62; }
.lens-copy { transition: opacity 1.5s cubic-bezier(.16,1,.3,1); }
.lens-node[data-live="true"] { z-index: 8; }
@keyframes lensDrift {
  0%, 100% { --px: 0px; --py: 0px; }
  25% { --px: 9px; --py: -11px; }
  50% { --px: -7px; --py: 8px; }
  75% { --px: 6px; --py: 10px; }
}
/* Idle auto reveal sweep disabled, 30 July 2026, names must stay blurred
   whenever the cursor is not actively on a name, including when it has left
   the page entirely. Keyframes kept below in case this is ever wanted back. */
@keyframes lensFlash {
  0%, 70%, 88%, 100% { filter: blur(3.4px); color: rgba(244, 251, 247, 0.34); }
  78% { filter: blur(0); color: #FFFFFF; }
}

/* ── Dossier that pops out of the panel ────────────────────────────────── */
.lens-dossier {
  position: relative; z-index: 7; margin-top: 12px; min-height: 104px;
  border-radius: 16px; padding: 13px 15px;
  background: linear-gradient(160deg, rgba(198, 242, 78, 0.16), rgba(0, 36, 28, 0.86));
  border: 1px solid rgba(198, 242, 78, 0.38);
  box-shadow: 0 26px 64px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  transform: translateY(14px) scale(.97);
  opacity: 0; pointer-events: none;
  transition: opacity 1.5s, transform 1.5s cubic-bezier(.16,1,.3,1);
}
.lens-dossier[data-open="true"] { opacity: 1; transform: none; }
.lens-dossier__top { display: flex; align-items: baseline; gap: 9px; }
.lens-dossier__who { font-size: 0.95rem; font-weight: 800; color: #FFFFFF; }
.lens-dossier__role { font-size: 0.72rem; font-weight: 700; color: rgba(244, 251, 247, 0.62); }
.lens-dossier__score { margin-left: auto; font-size: 1.1rem; font-weight: 800; color: var(--band, #C6F24E); }
.lens-dossier__gap { margin-top: 7px; font-size: 0.78rem; font-weight: 700; line-height: 1.5; color: rgba(244, 251, 247, 0.82); }
.lens-dossier__do {
  margin-top: 9px; display: flex; gap: 8px; align-items: flex-start;
  border-top: 1px solid rgba(198, 242, 78, 0.22); padding-top: 9px;
  font-size: 0.76rem; font-weight: 700; line-height: 1.5; color: #E8FBB4;
}
.lens-dossier__do span:first-child { flex: 0 0 auto; font-weight: 800; color: var(--lime, #C6F24E); }
.lens-dossier__do em { font-style: normal; display: block; }
.lens-dossier__do em i { display: inline-block; white-space: pre; opacity: 0; filter: blur(4px); transform: translateY(6px);
  animation: lensWord 1.5s cubic-bezier(.16,1,.3,1) forwards; font-style: normal; }
@keyframes lensWord { to { opacity: 1; filter: blur(0); transform: none; } }

/* ── Discovery meter ───────────────────────────────────────────────────── */
.lens-meter { display: flex; align-items: center; gap: 12px; padding: 14px 6px 2px; }
.lens-meter__track { position: relative; flex: 1 1 auto; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.11); overflow: hidden; }
.lens-meter__fill {
  position: absolute; inset: 0 auto 0 0; width: 0%; border-radius: 99px;
  background: linear-gradient(90deg, var(--emerald, #0E9F73), var(--lime, #C6F24E));
  box-shadow: 0 0 14px rgba(198, 242, 78, 0.6);
  transition: width 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-meter__label { font-size: 0.74rem; font-weight: 800; color: rgba(244, 251, 247, 0.72); white-space: nowrap; }
.lens-meter__label b { color: var(--lime, #C6F24E); }
.lens-meter[data-done="true"] .lens-meter__label { color: var(--lime, #C6F24E); }
.lens-hint {
  margin-top: 4px; padding: 0 6px; font-size: 0.74rem; font-weight: 700;
  color: rgba(244, 251, 247, 0.5);
}
.lens-note { margin-top: 10px; padding: 0 6px; font-size: 0.68rem; font-weight: 600; color: rgba(244, 251, 247, 0.38); }

/* ── Accessible mirror of the panel ────────────────────────────────────── */
.lens-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .lens-node, .lens-sweep, .lens-mesh line, .lens-wire, .lens-ring::after,
  .lens-pill i, .lens-dossier__do em i, .lens-stage[data-hot="off"] .lens-node__name { animation: none !important; }
  .lens-node__name, .lens-node__role { filter: none; }
  .lens-node__name { color: #FFFFFF; }
  .lens-panel__mark { animation: none; }
  .lens-node__ring, .lens-node__pct { opacity: 1; }
  .lens-dossier { opacity: 1; transform: none; }
  .lens-dossier__do em i { opacity: 1; filter: none; transform: none; }
  .lens-panel { transform: none; }
}


/* ── Small screens: keep the floating names from crowding the copy ─────── */
@media (max-width: 900px) {
  .lens-node { padding: 7px 11px 7px 8px; gap: 7px; }
  .lens-node__role { display: none; }
  .lens-node__name { font-size: 0.72rem; }
  .lens-node__avatar { width: 24px; height: 24px; font-size: 0.55rem; }
  .lens-node[data-index="4"], .lens-node[data-index="5"],
  .lens-node[data-index="6"], .lens-node[data-index="7"] { display: none; }
}
@media (max-width: 560px) {
  .lens-node[data-index="2"], .lens-node[data-index="3"] { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   The lit core
   The mark fills the panel, glows, leans toward the cursor and flares when a
   name in the background is under the pointer. Replaces the small bar mark.
   ══════════════════════════════════════════════════════════════════════════ */
.lens-panel__mark { display: none }
.lens-panel__tag {
  font-size: 0.68rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--sq-muted, rgba(244,251,247,0.55));
}

.lens-core {
  position: relative;
  display: grid; place-items: center;
  aspect-ratio: 1 / 0.58;
  min-height: 190px;
  max-height: 300px;
  border-radius: 18px;
  overflow: hidden;
  perspective: 900px;
  background:
    radial-gradient(120% 90% at var(--cx, 50%) var(--cy, 45%),
      rgba(198, 242, 78, calc(0.1 + var(--heat, 0) * 0.3)) 0%, transparent 62%),
    radial-gradient(90% 80% at 70% 100%, rgba(14, 159, 115, 0.1) 0%, transparent 60%);
  transition: background 1.5s cubic-bezier(.4,0,.2,1);
}

/* Soft bloom that swells with the cursor and blows out on flare. */
.lens-core__halo {
  position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle,
    rgba(198, 242, 78, calc(0.32 + var(--heat, 0) * 0.5)) 0%,
    rgba(14, 159, 115, 0.18) 42%, transparent 70%);
  filter: blur(calc(18px + var(--heat, 0) * 14px));
  transform: translate(calc(var(--px, 0) * 26px), calc(var(--py, 0) * 22px))
             scale(calc(1 + var(--heat, 0) * 0.22));
  transition: transform 1.5s ease-out, filter 1.5s cubic-bezier(.4,0,.2,1);
}

.lens-core__ring {
  position: absolute; width: 40%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid rgba(198, 242, 78, calc(0.22 + var(--heat, 0) * 0.55));
  transform: translate(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -12px))
             scale(calc(1 + var(--heat, 0) * 0.12));
  animation: lensCorePulse 3.6s ease-in-out infinite;
  transition: transform 1.5s ease-out, border-color 1.5s cubic-bezier(.4,0,.2,1);
}
.lens-core__ring--slow {
  width: 54%;
  border-style: dashed;
  border-color: rgba(198, 242, 78, calc(0.12 + var(--heat, 0) * 0.3));
  animation: lensCoreSpin 22s linear infinite;
}
@keyframes lensCorePulse {
  0%, 100% { opacity: .55 }
  50% { opacity: 1 }
}
@keyframes lensCoreSpin { to { rotate: 360deg } }

/* The mark itself: parallax lean, breathing scale, brightness driven by heat. */
.lens-core__mark {
  position: relative; z-index: 2;
  width: 46%; max-width: 190px; height: auto; display: block;
  transform:
    rotateY(calc(var(--px, 0) * 16deg))
    rotateX(calc(var(--py, 0) * -13deg))
    translateZ(calc(var(--heat, 0) * 34px))
    scale(calc(1 + var(--heat, 0) * 0.09));
  filter:
    drop-shadow(0 10px 26px rgba(0, 67, 49, 0.3))
    drop-shadow(0 0 calc(10px + var(--heat, 0) * 44px) rgba(198, 242, 78, calc(0.3 + var(--heat, 0) * 0.7)))
    brightness(calc(1 + var(--heat, 0) * 0.3))
    saturate(calc(1 + var(--heat, 0) * 0.45));
  animation: lensCoreBreathe 6.5s ease-in-out infinite;
  transition: transform 1.5s ease-out, filter 1.5s cubic-bezier(.4,0,.2,1);
}
@keyframes lensCoreBreathe {
  0%, 100% { translate: 0 0 }
  50% { translate: 0 -8px }
}

/* A light sweep that crosses the mark each time a name lights up. */
.lens-core__sheen {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(115deg, transparent 34%, rgba(255, 255, 255, 0.5) 50%, transparent 66%);
  transform: translateX(-120%);
}
.lens-core[data-flare="true"] .lens-core__sheen { animation: lensCoreSheen 1.5s cubic-bezier(.16,1,.3,1) }
@keyframes lensCoreSheen {
  0% { opacity: 0; transform: translateX(-120%) }
  40% { opacity: 1 }
  100% { opacity: 0; transform: translateX(120%) }
}

@media (max-width: 620px) { .lens-core { min-height: 160px; aspect-ratio: 1 / 0.55 } }

@media (prefers-reduced-motion: reduce) {
  .lens-core__ring, .lens-core__mark, .lens-core__sheen { animation: none !important }
  .lens-core__mark { transform: none; filter: drop-shadow(0 10px 26px rgba(0, 67, 49, 0.3)) }
  .lens-core__halo { transform: none }
}

/* ══════════════════════════════════════════════════════════════════════════
   Full brand lockup in the hero
   ══════════════════════════════════════════════════════════════════════════ */
.lens-fulllogo {
  display: block;
  width: clamp(210px, 27vw, 330px);
  height: auto;
  margin: 0 0 22px -8px;
  filter: drop-shadow(0 10px 26px rgba(0, 67, 49, 0.16));
  animation: lensLogoIn 1.5s cubic-bezier(.4,0,.2,1) both, lensLogoFloat 8s ease-in-out 1.5s infinite;
}
@keyframes lensLogoIn {
  from { opacity: 0; transform: translateY(16px) scale(.96); filter: blur(10px) }
  to   { opacity: 1; transform: none; filter: blur(0) drop-shadow(0 10px 26px rgba(0, 67, 49, 0.16)) }
}
@keyframes lensLogoFloat { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }
@media (max-width: 620px) { .lens-fulllogo { width: min(260px, 72vw); margin-bottom: 18px } }

/* ══════════════════════════════════════════════════════════════════════════
   The readout cross dissolves
   Two stacked faces. New information fades up while the previous one fades
   out over the same second, so nothing ever cuts.
   ══════════════════════════════════════════════════════════════════════════ */
.lens-dossier--xfade { display: grid }
.lens-dossier__face {
  grid-area: 1 / 1;
  opacity: 0;
  filter: blur(7px);
  transform: translateY(9px) scale(.985);
  pointer-events: none;
  transition:
    opacity 1.5s cubic-bezier(.4, 0, .2, 1),
    filter  1.5s cubic-bezier(.4, 0, .2, 1),
    transform 1.5s cubic-bezier(.4, 0, .2, 1);
}
.lens-dossier__face[data-front="true"] {
  opacity: 1; filter: blur(0); transform: none; pointer-events: auto;
}
/* The words inside settle in after the dissolve rather than racing it. */
.lens-dossier__do em i { animation-duration: 1.5s !important }

@media (prefers-reduced-motion: reduce) {
  .lens-fulllogo { animation: none }
  .lens-dossier__face { transition: none }
}