/* Crystal Lens: photo identification on the home page.
   Signature: a spectral prism ring that disperses light around the specimen. */
@property --lens-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.crystal-lens {
  --lens-bg: #06131f;
  --lens-ink: #eaf2f7;
  --lens-muted: #93a8b8;
  --lens-line: rgba(160, 196, 226, .18);
  --lens-panel: rgba(13, 32, 50, .72);
  --lens-size: min(440px, 82vw);
  --lens-speed: 14s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(72px, 8vw, 128px) 0;
  color: var(--lens-ink);
  background: var(--lens-bg);
  scroll-margin-top: 72px;
}
.crystal-lens [hidden] { display: none !important; }

.lens-aurora {
  position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 35% at 22% 30%, rgba(94, 156, 255, .22), transparent 70%),
    radial-gradient(35% 30% at 78% 22%, rgba(118, 86, 216, .24), transparent 70%),
    radial-gradient(30% 30% at 60% 85%, rgba(63, 191, 149, .14), transparent 70%);
  filter: blur(10px);
  animation: lens-drift 22s ease-in-out infinite alternate;
}
@keyframes lens-drift { to { transform: translate3d(3%, 4%, 0) rotate(4deg); } }

.lens-intro { max-width: 720px; margin-bottom: clamp(36px, 5vw, 64px); }
.lens-intro h2 {
  margin: 0 0 18px;
  font: 700 clamp(44px, 7.4vw, 96px)/.95 var(--display);
  letter-spacing: -.035em;
  background: linear-gradient(100deg, #fff 30%, #b9d3ff 55%, #d9c6ff 70%, #fff 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: lens-sheen 9s ease-in-out infinite;
}
@keyframes lens-sheen { 50% { background-position: 100% 0; } }
.lens-intro p { margin: 0; max-width: 60ch; color: var(--lens-muted); font-size: 18px; }
.lens-intro .lens-allowance {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 22px;
  color: var(--lens-ink); font: 600 14px/1 var(--body);
}
.lens-allowance::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3fbf95; box-shadow: 0 0 0 4px rgba(63, 191, 149, .18); }

.lens-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: start; }

/* ---- Stage ---- */
.lens-stage {
  --tx: 0; --ty: 0;
  position: relative; width: var(--lens-size); aspect-ratio: 1; margin: 0 auto;
  transform: perspective(900px) rotateX(calc(var(--ty) * -8deg)) rotateY(calc(var(--tx) * 10deg));
  transition: transform .5s var(--ease);
}
.lens-ring {
  position: absolute; inset: -14px; border-radius: 50%;
  background: conic-gradient(from var(--lens-angle), #5e9cff, #7656d8, #c86bd6, #d8a53a, #3fbf95, #5e9cff);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  animation: lens-spin var(--lens-speed) linear infinite;
  opacity: .9;
}
.lens-ring::after {
  content: ""; position: absolute; inset: -18px; border-radius: 50%;
  background: conic-gradient(from var(--lens-angle), #5e9cff, #7656d8, #c86bd6, #d8a53a, #3fbf95, #5e9cff); filter: blur(28px); opacity: .45;
  -webkit-mask: radial-gradient(farthest-side, transparent 72%, #000 86%, transparent);
          mask: radial-gradient(farthest-side, transparent 72%, #000 86%, transparent);
}
@keyframes lens-spin { to { --lens-angle: 360deg; } }

.lens-disc {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 35% 30%, #16324d, #081a2a 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 -30px 60px rgba(0, 0, 0, .45), 0 40px 90px rgba(0, 0, 0, .45);
}
.lens-drop {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px;
  padding: 18%; text-align: center; cursor: pointer; border-radius: 50%;
}
.lens-drop strong { font: 700 clamp(18px, 2.2vw, 22px)/1.2 var(--display); }
.lens-drop span { color: var(--lens-muted); font-size: 14px; line-height: 1.5; }
.lens-drop:focus-visible { outline: 3px solid var(--citrine); outline-offset: -10px; }
.lens-gem { width: 64px; height: 64px; margin-bottom: 8px; fill: none; stroke: #b9d3ff; stroke-width: 1.6; stroke-linejoin: round; animation: lens-float 5s ease-in-out infinite; }
@keyframes lens-float { 50% { transform: translateY(-8px) rotate(-4deg); } }
.crystal-lens.is-dragging .lens-disc { box-shadow: inset 0 0 0 3px #b9d3ff, 0 0 80px rgba(94, 156, 255, .45); }
.crystal-lens.is-dragging .lens-ring { --lens-speed: 2.4s; }

.lens-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .6s var(--ease), transform 1.2s var(--ease), filter .6s; }
.lens-mesh { position: absolute; inset: 8%; width: 84%; height: 84%; fill: none; stroke: #cfe0ff; stroke-width: .6; opacity: 0; stroke-dasharray: 900; stroke-dashoffset: 900; mix-blend-mode: screen; }
.lens-beam {
  position: absolute; left: 0; right: 0; top: 0; height: 26%; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(124, 182, 255, .28) 70%, rgba(214, 233, 255, .95) 98%, transparent);
  box-shadow: 0 6px 24px rgba(124, 182, 255, .55);
}
.lens-grain { position: absolute; inset: 0; opacity: 0; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 4px); }

.lens-thumbs { position: absolute; inset: 0; pointer-events: none; }
.lens-thumb {
  --a: calc(var(--i) / var(--n) * 360deg - 90deg);
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; padding: 0; margin: -26px;
  border: 2px solid rgba(255, 255, 255, .7); border-radius: 14px; overflow: hidden; background: #081a2a; cursor: pointer; pointer-events: auto;
  transform: rotate(var(--a)) translate(calc(var(--lens-size) / 2 + 30px)) rotate(calc(var(--a) * -1));
  animation: lens-pop .5s var(--ease) backwards; animation-delay: calc(var(--i) * 70ms);
}
.lens-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lens-thumbs:has(.lens-thumb:only-child) { display: none; }
@keyframes lens-pop { from { opacity: 0; transform: rotate(var(--a)) translate(calc(var(--lens-size) / 4)) rotate(calc(var(--a) * -1)) scale(.4); } }

.lens-clock { position: absolute; right: 6%; bottom: 4%; font: 600 13px/1 var(--mono); color: var(--lens-muted); opacity: 0; }

/* States */
.crystal-lens:not([data-state="idle"]) .lens-drop { opacity: 0; pointer-events: none; }
.crystal-lens:not([data-state="idle"]) .lens-photo { opacity: 1; transform: scale(1); }
.crystal-lens[data-state="selected"] .lens-mesh { opacity: .35; stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease), opacity .6s; }
.crystal-lens[data-state="gate"] .lens-photo { filter: blur(6px) saturate(.8); }

.crystal-lens[data-state="scanning"] { --lens-speed: 2.8s; }
.crystal-lens[data-state="scanning"] .lens-photo { animation: lens-breathe 2.6s ease-in-out infinite; filter: saturate(1.15) contrast(1.05); }
.crystal-lens[data-state="scanning"] .lens-beam { opacity: 1; animation: lens-sweep 2.2s cubic-bezier(.65, 0, .35, 1) infinite alternate; }
.crystal-lens[data-state="scanning"] .lens-mesh { opacity: .85; animation: lens-draw 3.2s ease-in-out infinite; }
.crystal-lens[data-state="scanning"] .lens-grain { opacity: 1; animation: lens-grain .18s steps(2) infinite; }
.crystal-lens[data-state="scanning"] .lens-clock { opacity: 1; }
.crystal-lens[data-state="scanning"] .lens-thumb { animation: lens-orbit 9s linear infinite; }
@keyframes lens-breathe { 50% { transform: scale(1.04); } }
@keyframes lens-sweep { from { transform: translateY(-30%); } to { transform: translateY(330%); } }
@keyframes lens-draw { 0% { stroke-dashoffset: 900; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes lens-grain { to { transform: translateY(2px); } }
@keyframes lens-orbit { to { transform: rotate(calc(var(--a) + 360deg)) translate(calc(var(--lens-size) / 2 + 30px)) rotate(calc((var(--a) + 360deg) * -1)); } }

.crystal-lens[data-state="result"] .lens-mesh { opacity: .5; stroke-dashoffset: 0; stroke: #fff; }
.crystal-lens[data-state="result"] .lens-disc { animation: lens-flash 1.1s var(--ease); }
.crystal-lens[data-state="result"] .lens-ring { --lens-speed: 30s; }
@keyframes lens-flash { 0% { box-shadow: 0 0 0 0 rgba(214, 233, 255, .9), 0 40px 90px rgba(0, 0, 0, .45); } 100% { box-shadow: 0 0 0 60px rgba(214, 233, 255, 0), 0 40px 90px rgba(0, 0, 0, .45); } }

/* ---- Panel ---- */
.lens-panel { position: relative; min-width: 0; padding: clamp(22px, 3vw, 34px); border: 1px solid var(--lens-line); border-radius: 26px; background: var(--lens-panel); backdrop-filter: blur(14px); }
.lens-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lens-pick { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.crystal-lens .lens-btn { cursor: pointer; color: var(--lens-ink); border-color: rgba(255, 255, 255, .28); }
.lens-pick:has(.lens-input:focus-visible) .lens-btn, .lens-controls:has(#lensFile:focus-visible) .lens-btn:first-child { outline: 3px solid var(--citrine); outline-offset: 3px; }
.lens-label { display: block; margin: 0 0 8px; font-weight: 700; font-size: 14px; }
.lens-label span { color: var(--lens-muted); font-weight: 500; }
.lens-text { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--lens-line); border-radius: 12px; color: var(--lens-ink); background: rgba(3, 12, 20, .55); }
.lens-text::placeholder { color: #6f8698; }
.lens-go-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
.lens-go { min-width: 200px; }
.lens-go:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.crystal-lens[data-state="scanning"] .lens-go { background: conic-gradient(from var(--lens-angle), #5e9cff, #7656d8, #c86bd6, #d8a53a, #3fbf95, #5e9cff); animation: lens-spin 3s linear infinite; color: #06131f; opacity: 1; }
.lens-ghost { min-height: 44px; padding: 8px 4px; border: 0; background: none; color: var(--lens-muted); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.lens-ghost:hover { color: var(--lens-ink); }
.crystal-lens[data-state="idle"] [data-lens-reset], .crystal-lens[data-state="scanning"] .lens-controls [data-lens-reset] { display: none; }
.crystal-lens[data-state="scanning"] .lens-pick, .crystal-lens[data-state="scanning"] .lens-label, .crystal-lens[data-state="scanning"] .lens-text { opacity: .4; pointer-events: none; }

.lens-ticker { min-height: 0; overflow: hidden; font: 600 13px/1.4 var(--mono); color: #b9d3ff; }
.crystal-lens[data-state="scanning"] .lens-ticker { min-height: 22px; margin-top: 18px; }
.lens-tick { display: block; animation: lens-tick .45s var(--ease); }
.lens-tick::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 10px; border-radius: 50%; background: #5e9cff; animation: lens-blink 1s infinite; vertical-align: 1px; }
@keyframes lens-tick { from { opacity: 0; transform: translateY(100%); filter: blur(4px); } }
@keyframes lens-blink { 50% { opacity: .2; } }
.lens-status { min-height: 22px; margin: 12px 0 0; color: var(--lens-muted); font-size: 14px; }
.crystal-lens[data-state="scanning"] .lens-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lens-status.is-error { color: #ff9c9c; }

.lens-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 26px 0 0; border-radius: 16px; overflow: hidden; background: var(--lens-line); }
.lens-preview div { padding: 14px 16px; background: rgba(6, 19, 31, .92); }
.lens-preview dt { color: var(--lens-muted); font-size: 12px; }
.lens-preview dd { height: 10px; margin: 10px 0 0; width: 70%; border-radius: 5px; background: linear-gradient(90deg, rgba(255, 255, 255, .06), rgba(185, 211, 255, .22), rgba(255, 255, 255, .06)); background-size: 200% 100%; }
.crystal-lens[data-state="scanning"] .lens-preview dd { animation: lens-shimmer 1.3s linear infinite; }
.lens-preview div:nth-child(2n) dd { width: 48%; }
@keyframes lens-shimmer { to { background-position: -200% 0; } }
.crystal-lens[data-state="result"] .lens-preview, .crystal-lens[data-state="result"] .lens-controls, .crystal-lens[data-state="gate"] .lens-preview { display: none; }

.lens-gate h3 { margin: 22px 0 8px; font: 700 26px/1.15 var(--display); }
.lens-gate p { color: var(--lens-muted); margin: 0; }
.lens-gate, .lens-error { animation: lens-rise .5s var(--ease); }
.lens-error { margin-top: 18px; padding: 16px 18px; border: 1px solid rgba(255, 156, 156, .35); border-radius: 14px; background: rgba(196, 86, 86, .12); }
.lens-error p { margin: 0 0 10px; }
@keyframes lens-rise { from { opacity: 0; transform: translateY(14px); } }

/* ---- Result ---- */
.lens-output:focus { outline: none; }
.lens-tabs { display: flex; gap: 8px; margin-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.lens-tab { flex: 1 0 auto; display: grid; gap: 2px; padding: 10px 14px; border: 1px solid var(--lens-line); border-radius: 12px; color: var(--lens-ink); background: transparent; text-align: left; cursor: pointer; transition: background-color .2s, border-color .2s; }
.lens-tab[aria-selected="true"] { border-color: #b9d3ff; background: rgba(94, 156, 255, .14); }
.lens-tab-kicker { color: var(--lens-muted); font-size: 12px; }
.lens-name { margin: 0; font: 700 clamp(38px, 5vw, 60px)/1 var(--display); letter-spacing: -.03em; overflow-wrap: anywhere; }
.lens-name-sm { font-size: 28px; }
.lens-species { margin: 10px 0 0; font: 600 14px/1.5 var(--mono); color: #b9d3ff; }
.lens-summary { margin: 14px 0 0; color: #cad8e3; max-width: 60ch; }
.lens-block { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--lens-line); }
.lens-block h4 { margin: 0 0 12px; font: 700 15px/1.3 var(--body); }
.lens-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.lens-chips li { padding: 7px 12px; border-radius: 999px; background: rgba(94, 156, 255, .14); border: 1px solid rgba(94, 156, 255, .28); font-size: 14px; line-height: 1.35; }
.lens-chips-quiet li { background: rgba(255, 255, 255, .05); border-color: var(--lens-line); }
.lens-list { margin: 0; padding-left: 20px; color: #cad8e3; }
.lens-list li { margin: 4px 0; }
.lens-muted { margin: 8px 0 0; color: var(--lens-muted); font-size: 14px; }
.lens-small { font-size: 12.5px; }
.lens-props { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 0; border-radius: 14px; overflow: hidden; background: var(--lens-line); }
.lens-prop { padding: 12px 14px; background: rgba(6, 19, 31, .92); }
.lens-prop:last-child:nth-child(odd) { grid-column: 1 / -1; }
.lens-prop dd sub { font-size: .72em; }
.crystal-lens[data-state="gate"] .lens-status { display: none; }
.lens-prop dt { color: var(--lens-muted); font-size: 12px; }
.lens-prop dd { margin: 4px 0 0; font-weight: 600; font-size: 15px; overflow-wrap: anywhere; }
.lens-card-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--lens-line); }
.lens-card-foot .lens-muted { flex-basis: 100%; }
.lens-link { color: #b9d3ff; font-weight: 700; }
.lens-again { margin-top: 18px; }

.lens-card.is-in .lens-reveal { animation: lens-in .7s var(--ease) backwards; animation-delay: calc(var(--d, 0) * 110ms + 250ms); }
.lens-card.is-in .lens-prop { animation: lens-cell .5s var(--ease) backwards; animation-delay: calc(var(--r) * 40ms + 480ms); }
.lens-card.is-in .lens-name { animation: lens-glow 1.4s var(--ease); }
@keyframes lens-in { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes lens-cell { from { opacity: 0; transform: scale(.94); } }
@keyframes lens-glow { from { text-shadow: 0 0 40px rgba(185, 211, 255, .9); } }

@media (max-width: 899px) {
  .lens-grid { grid-template-columns: minmax(0, 1fr); }
  .lens-thumb { width: 42px; height: 42px; margin: -21px; transform: rotate(var(--a)) translate(calc(var(--lens-size) / 2 + 6px)) rotate(calc(var(--a) * -1)); }
  .crystal-lens[data-state="scanning"] .lens-thumb { animation: none; }
  .lens-stage { --lens-size: min(360px, 74vw); }
}
@media (max-width: 560px) {
  .lens-intro p { font-size: 16px; }
  .lens-props, .lens-preview { grid-template-columns: minmax(0, 1fr); }
  .lens-go { flex: 1 1 100%; }
  .lens-pick .lens-btn { flex: 1 1 0; justify-content: center; }
}
@media (pointer: fine) { .lens-camera { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .crystal-lens *, .crystal-lens *::before, .crystal-lens *::after { animation: none !important; transition: none !important; }
  .lens-stage { transform: none; }
  .crystal-lens[data-state="scanning"] .lens-beam { opacity: .6; transform: translateY(150%); }
}