/* ═══════════════════════════════════════════════════════════════
   Photo translation scene (#panel-lens): a phone camera frames a
   foreign-language menu, focuses, scans, shoots, then draws the
   translation over each line in place and raises an allergy warning.
   Default (no JS / reduced motion) = the final translated state.
   JS adds .sc-live and steps .is-focus → .is-scan → .is-shot →
   .is-read → .is-warn → .is-out, then loops.
   Only transform / opacity / filter / clip-path are animated.
   ═══════════════════════════════════════════════════════════════ */

.lens {
  --lw: clamp(232px, 70vw, 318px);
  --ry0: -9deg;
  --tx-fast: .45s;
  position: relative; inline-size: 100%;
  display: grid; place-items: center;
  padding-block: 6px 10px;
}
[dir="rtl"] .lens { --ry0: 9deg; }

/* soft glow + capture ripple behind the phone (the "sound ring") */
.lens::before {
  content: ""; position: absolute; z-index: 0; inset-block-start: 50%; left: 50%;
  inline-size: calc(var(--lw) * 1.5); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .30), rgba(255, 106, 0, .10) 55%, transparent 75%);
  filter: blur(18px); pointer-events: none;
}
.lens-ripple {
  position: absolute; z-index: 0; inset-block-start: 50%; left: 50%;
  inline-size: calc(var(--lw) * 1.25); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  border: 2px solid #ff6a00; opacity: 0; transform: scale(.55); pointer-events: none;
  box-shadow: 0 0 40px rgba(255, 106, 0, .45), inset 0 0 40px rgba(255, 106, 0, .25);
}
.lens-ripple.r2 { border-width: 1px; }

/* ── phone ─────────────────────────────────────────────── */
.lens-rig {
  position: relative; z-index: 1;
  transform: perspective(1700px) rotateY(calc(var(--ry0) + var(--mx, 0) * 14deg)) rotateX(calc(4deg - var(--my, 0) * 9deg));
  transition: transform .7s var(--ease-out);
  will-change: transform;
}
.lens .lens-phone { --w: var(--lw); }
.lens-phone .screen { background: #0b0806; }
.lens-phone .sb { z-index: 6; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.lens-phone .island { z-index: 7; }
.lens-phone .glare { z-index: 9; }

/* ── the "photo": a warm table with a printed menu ─────── */
.lens-photo {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background:
    radial-gradient(38% 22% at 88% 8%, rgba(255, 106, 0, .38), transparent 70%),
    radial-gradient(22% 13% at 10% 90%, rgba(255, 106, 0, .28), transparent 70%),
    radial-gradient(14% 8% at 18% 6%, rgba(255, 255, 255, .14), transparent 70%),
    repeating-linear-gradient(97deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 9px, rgba(0, 0, 0, .09) 9px 10px, transparent 10px 23px),
    radial-gradient(120% 75% at 40% 35%, #3b291c, #1d140d 58%, #0c0805);
  transform-origin: 50% 45%;
}
.lens-photo::after { /* lens vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55));
}
.lens-cup {
  position: absolute; inset-block-start: calc(var(--w) * 1.43); right: calc(var(--w) * -.13);
  inline-size: calc(var(--w) * .5); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #2a1609 0 34%, #4a2a12 38%, #f1ebe1 40% 45%, #d9d0c2 47% 50%, rgba(0, 0, 0, .25) 51%, #ece5da 53% 67%, #cdc3b4 70%, transparent 71%);
  box-shadow: 0 calc(var(--w) * .03) calc(var(--w) * .07) rgba(0, 0, 0, .55);
}
.lens-cup::after { /* steam-free highlight */
  content: ""; position: absolute; inset: 22%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, rgba(255, 255, 255, .22), transparent 40%);
}

.lens-paper {
  position: absolute; inset-block-start: calc(var(--w) * .27); inset-inline: calc(var(--w) * .07);
  block-size: calc(var(--w) * 1.08);
  display: flex; flex-direction: column;
  padding: calc(var(--w) * .055) calc(var(--w) * .06) calc(var(--w) * .05);
  margin: 0; list-style: none;
  color: #2a2119; border-radius: calc(var(--w) * .012);
  background:
    radial-gradient(90% 60% at 30% 10%, rgba(255, 255, 255, .55), transparent 60%),
    linear-gradient(168deg, #f8f3ea, #ece4d6 70%, #e2d8c6);
  box-shadow:
    0 calc(var(--w) * .006) 0 rgba(255, 255, 255, .6) inset,
    0 calc(var(--w) * .05) calc(var(--w) * .09) rgba(0, 0, 0, .6),
    0 calc(var(--w) * .01) calc(var(--w) * .02) rgba(0, 0, 0, .4);
  transform: perspective(calc(var(--w) * 3)) rotateX(7deg) rotate(-1.6deg);
  transform-origin: 50% 40%;
  font-family: Georgia, "Times New Roman", "Noto Serif", serif;
}
.lens-paper[lang="zh"] { font-family: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "Microsoft YaHei", "PingFang SC", serif; font-weight: 600; }
.lens-paper[lang="zh"] .lens-src b, .lens-paper[lang="zh"] .title .lens-src { font-weight: 400; }
.lens-src b { font-family: Georgia, "Times New Roman", serif; }
.lens-paper::before { /* thin printed border */
  content: ""; position: absolute; inset: calc(var(--w) * .022); pointer-events: none;
  border: 1px solid rgba(60, 40, 20, .28); border-radius: calc(var(--w) * .006);
}
.lens-scan-clip { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 3; }

.lens-row {
  position: relative; flex: 1; display: flex; align-items: center;
  font-size: calc(var(--w) * .047); line-height: 1.2;
}
.lens-row.title { flex: 1.25; justify-content: center; }
.lens-src { display: flex; align-items: baseline; gap: calc(var(--w) * .018); inline-size: 100%; white-space: nowrap; }
.lens-src i { flex: 1; align-self: center; translate: 0 .35em; border-block-end: 2px dotted rgba(60, 40, 20, .38); min-inline-size: 1em; }
.lens-src b { font-weight: 400; font-variant-numeric: lining-nums; }
.title .lens-src { justify-content: center; align-items: center; gap: calc(var(--w) * .03); font-size: calc(var(--w) * .074); letter-spacing: .28em; text-indent: .28em; }
.lens-paper[lang="zh"] .title .lens-src { letter-spacing: .5em; text-indent: .5em; }
.title .lens-src::before, .title .lens-src::after { content: ""; flex: 1; block-size: 1px; background: rgba(60, 40, 20, .4); }

/* detection outline drawn as the scan passes */
.lens-row::before {
  content: ""; position: absolute; inset: calc(var(--w) * -.004) calc(var(--w) * -.016);
  border: 1.5px dashed #ff6a00; border-radius: calc(var(--w) * .012);
  opacity: 0; transform: scale(.97); pointer-events: none;
  transition: opacity .3s, transform .3s var(--ease-out);
}
/* allergy pulse ring around the hot line */
.lens-row::after {
  content: ""; position: absolute; inset: calc(var(--w) * -.004) calc(var(--w) * -.02); z-index: 2;
  border: 2px solid #ff6a00; border-radius: calc(var(--w) * .016);
  opacity: 0; pointer-events: none;
}

/* the translation chip, drawn exactly over its line (like the app) */
.lens-chip {
  position: absolute; z-index: 1; inset: calc(var(--w) * .002) calc(var(--w) * -.016);
  display: flex; align-items: center; justify-content: space-between; gap: calc(var(--w) * .02);
  padding-inline: calc(var(--w) * .028);
  background: #fff; color: #15110d; border: 1px solid #ff6a00; border-radius: calc(var(--w) * .012);
  font: 600 calc(var(--w) * .047)/1.15 var(--font); letter-spacing: 0; white-space: nowrap;
  box-shadow: 0 calc(var(--w) * .008) calc(var(--w) * .024) rgba(40, 20, 0, .28);
  clip-path: inset(-40% -10% -40% -10%);
  transition: opacity .55s var(--ease-out), filter .6s var(--ease-out), clip-path .7s var(--ease-out), transform .7s var(--ease-out), background-color .45s, color .45s, box-shadow .45s;
}
.lens-chip b { font-weight: 600; font-family: "IBM Plex Sans", var(--font); font-variant-numeric: tabular-nums; }
.title .lens-chip { inset-inline: 16%; justify-content: center; font-size: calc(var(--w) * .056); }

/* final state: the hot (allergen) line */
.lens:not(.sc-live) .is-hot .lens-chip,
.sc-live.is-warn:not(.is-out) .is-hot .lens-chip {
  background: #ff6a00; color: #0a0a0a; border-color: #ff6a00;
  box-shadow: 0 0 0 calc(var(--w) * .006) rgba(10, 10, 10, .85), 0 calc(var(--w) * .02) calc(var(--w) * .07) rgba(255, 106, 0, .75);
}
.lens:not(.sc-live) .is-hot .lens-chip { transform: none; }

/* ── HUD: focus brackets, top pills, controls ──────────── */
.lens-frame {
  position: absolute; z-index: 4; pointer-events: none;
  inset-block-start: calc(var(--w) * .235); inset-inline: calc(var(--w) * .035);
  block-size: calc(var(--w) * 1.16);
  opacity: 0; transform: scale(1.12);
  transition: opacity .35s, transform .55s var(--ease-spring);
}
.lens-frame span {
  position: absolute; inline-size: calc(var(--w) * .1); block-size: calc(var(--w) * .1);
  border: 0 solid #fff; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .5));
  transition: border-color .3s;
}
.lens-frame span:nth-child(1) { top: 0; left: 0; border-top-width: 3px; border-left-width: 3px; border-top-left-radius: calc(var(--w) * .03); }
.lens-frame span:nth-child(2) { top: 0; right: 0; border-top-width: 3px; border-right-width: 3px; border-top-right-radius: calc(var(--w) * .03); }
.lens-frame span:nth-child(3) { bottom: 0; left: 0; border-bottom-width: 3px; border-left-width: 3px; border-bottom-left-radius: calc(var(--w) * .03); }
.lens-frame span:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: calc(var(--w) * .03); }

.lens-scanner {
  position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 100%;
  opacity: 0; transform: translateY(-100%);
  background: linear-gradient(to bottom, transparent 78%, rgba(255, 106, 0, .09) 94%, rgba(255, 106, 0, .35) calc(100% - 3px), #ff6a00 calc(100% - 2px));
  box-shadow: 0 2px 10px rgba(255, 106, 0, .55);
  transition: opacity .25s;
}
.lens-scanner::after { /* glowing bead on the line */
  content: ""; position: absolute; inset-block-end: -6px; inset-inline: 10%; block-size: 12px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 106, 0, .75), transparent);
  filter: blur(3px);
}

.lens-top {
  position: absolute; z-index: 5; inset-block-start: calc(var(--w) * .118); inset-inline: 0;
  display: flex; justify-content: center; gap: calc(var(--w) * .018);
  font: 600 calc(var(--w) * .038)/1 var(--font); color: #fff;
}
.lens-pill {
  display: inline-flex; align-items: center; gap: calc(var(--w) * .018);
  padding: calc(var(--w) * .02) calc(var(--w) * .035); border-radius: 999px;
  background: rgba(12, 10, 8, .62); border: 1px solid rgba(255, 255, 255, .16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  white-space: nowrap;
}
.lens-pill .dot { inline-size: calc(var(--w) * .018); aspect-ratio: 1; border-radius: 50%; background: #ff6a00; box-shadow: 0 0 8px #ff6a00; }
.lens-pill.type { background: #ff6a00; color: #0a0a0a; border-color: #ff6a00; transition: opacity .5s var(--ease-out), transform .6s var(--ease-spring); }

.lens-ctrl {
  position: absolute; z-index: 5; inset-inline: 0; inset-block-end: calc(var(--w) * .07);
  block-size: calc(var(--w) * .2);
  font: 600 calc(var(--w) * .042)/1 var(--font); color: #fff;
}
.lens-ctrl::before { /* camera-bar scrim keeps controls legible over the photo */
  content: ""; position: absolute; inset-inline: 0; inset-block: calc(var(--w) * -.12) calc(var(--w) * -.12);
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .55) 45%, rgba(0, 0, 0, .7));
}
.lens-cam, .lens-copy { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity .45s var(--ease-out), transform .6s var(--ease-out); }
.lens-cam { justify-content: space-between; padding-inline: calc(var(--w) * .11); }
.lens-thumb {
  inline-size: calc(var(--w) * .11); aspect-ratio: 1; border-radius: calc(var(--w) * .028);
  border: 2px solid rgba(255, 255, 255, .85);
  background: linear-gradient(160deg, #f1ebe0 0 40%, #3b291c 41%), #3b291c;
}
.lens-shutter {
  position: relative; inline-size: calc(var(--w) * .19); aspect-ratio: 1; border-radius: 50%;
  border: calc(var(--w) * .012) solid #fff;
}
.lens-shutter::after { content: ""; position: absolute; inset: calc(var(--w) * .014); border-radius: 50%; background: #fff; }
.lens-flip {
  inline-size: calc(var(--w) * .11); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .14);
}
.lens-flip svg { inline-size: 56%; block-size: 56%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lens-copy span {
  display: inline-flex; align-items: center; gap: calc(var(--w) * .022);
  padding: calc(var(--w) * .035) calc(var(--w) * .06); border-radius: 999px;
  background: #ff6a00; color: #0a0a0a;
  box-shadow: 0 calc(var(--w) * .02) calc(var(--w) * .06) rgba(255, 106, 0, .45);
}
.lens-copy svg { inline-size: 1.15em; block-size: 1.15em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.lens-flash { position: absolute; inset: 0; z-index: 8; background: #fff; opacity: 0; pointer-events: none; }

/* ── the allergy warning card (outside the phone, in front) ── */
.lens-warn {
  position: absolute; z-index: 3;
  inset-block-end: 10%;
  inset-inline-start: max(4px, calc(50% - var(--lw) * .5 - 92px));
  inline-size: min(292px, 82%);
  display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start;
  padding: 14px 16px 15px; border-radius: var(--r);
  translate: calc(var(--mx, 0) * -18px) calc(var(--my, 0) * -12px);
  transition: opacity .55s var(--ease-out), transform .8s var(--ease-spring), translate .7s var(--ease-out), filter .6s var(--ease-out);
}
.lens-warn::before { /* orange edge */
  content: ""; position: absolute; inset-block: 14px; inset-inline-start: -1px; inline-size: 3px; border-radius: 3px;
  background: #ff6a00; box-shadow: 0 0 14px rgba(255, 106, 0, .8);
}
.lens-warn .ic {
  inline-size: 38px; block-size: 38px; border-radius: 12px; display: grid; place-items: center;
  background: #ff6a00; color: #0a0a0a; box-shadow: 0 8px 24px -8px rgba(255, 106, 0, .9);
}
.lens-warn .ic .i { inline-size: 22px; block-size: 22px; stroke-width: 2.2; }
.lens-warn b { display: block; color: var(--accent-ink); font-size: .9rem; font-weight: 700; line-height: 1.3; margin-block-end: 3px; }
.lens-warn p { margin: 0; color: var(--text); font-size: 1.02rem; font-weight: 600; line-height: 1.45; }

/* ═════════ live (animated) states ═════════ */

@media (prefers-reduced-motion: no-preference) {
  .sc-live .lens-rig { animation: lens-float 7s ease-in-out infinite; }
}
@keyframes lens-float { 50% { translate: 0 -8px; } }

/* aim: handheld drift + soft focus */
.sc-live:not(.is-shot) .lens-photo { animation: lens-drift 2.6s ease-in-out infinite alternate; }
.sc-live:not(.is-focus) .lens-photo, .sc-live.is-out .lens-photo { filter: blur(3px) brightness(.9); }
.sc-live .lens-photo { transition: filter .6s var(--ease-out); }
@keyframes lens-drift {
  0% { transform: scale(1.035) translate(.6%, .4%) rotate(.25deg); }
  100% { transform: scale(1.035) translate(-.7%, -.5%) rotate(-.3deg); }
}

/* focus: brackets snap in, turn orange when locked */
.sc-live.is-focus:not(.is-shot) .lens-frame { opacity: 1; transform: none; }
.sc-live.is-scan .lens-frame span { border-color: #ff6a00; }

/* scan line sweeps down the menu */
.sc-live.is-scan:not(.is-shot) .lens-scanner { opacity: 1; }
.sc-live.is-scan .lens-scanner { transform: translateY(0); transition: transform 1.35s cubic-bezier(.45, .05, .4, 1), opacity .25s; }
.sc-live.is-scan:not(.is-read) .lens-row::before { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 1ms); }

/* shot: flash, shutter press, ripple */
.sc-live.is-shot .lens-flash { animation: lens-flash .6s ease-out both; }
.sc-live.is-shot .lens-shutter::after { animation: lens-press .4s var(--ease-out); }
.sc-live.is-shot .lens-ripple { animation: lens-ripple 1.6s cubic-bezier(.2, .7, .3, 1) both; }
.sc-live.is-shot .lens-ripple.r2 { animation-delay: .22s; }
.sc-live.is-shot .lens-rig { animation: lens-float 7s ease-in-out infinite, lens-kick .5s var(--ease-out); }
@keyframes lens-flash { 0% { opacity: 0; } 14% { opacity: .9; } 100% { opacity: 0; } }
@keyframes lens-press { 40% { transform: scale(.8); } }
@keyframes lens-ripple { 0% { opacity: .9; transform: scale(.55); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes lens-kick { 30% { transform: perspective(1700px) rotateY(calc(var(--ry0) + var(--mx, 0) * 14deg)) rotateX(4deg) scale(.985); } }

/* read: chips reveal line by line, blur → sharp, wiped in reading direction */
.sc-live:not(.is-read) .lens-chip, .sc-live.is-out .lens-chip {
  opacity: 0; filter: blur(7px); transform: scale(.94); clip-path: inset(-40% -10% -40% 100%);
}
[dir="ltr"] .sc-live:not(.is-read) .lens-chip, [dir="ltr"] .sc-live.is-out .lens-chip { clip-path: inset(-40% 100% -40% -10%); }
.sc-live.is-read:not(.is-out) .lens-chip { transition-delay: calc(var(--i, 0) * 150ms); }
.sc-live.is-out .lens-chip { transition-duration: .45s; }

.sc-live:not(.is-read) .lens-pill.type, .sc-live.is-out .lens-pill.type { opacity: 0; transform: translateY(-40%) scale(.9); }
.lens:not(.sc-live) .lens-copy, .sc-live:not(.is-read) .lens-copy, .sc-live.is-out .lens-copy, .sc-live.is-warn .lens-copy { opacity: 0; transform: translateY(50%); }
.lens:not(.sc-live) .lens-cam, .sc-live.is-read:not(.is-out) .lens-cam { opacity: 0; transform: translateY(40%) scale(.92); }

/* warn: the allergen line lights up, the card rises */
.sc-live.is-warn:not(.is-out) .is-hot .lens-chip { transform: scale(1.045); transition-delay: 0s; }
.sc-live.is-warn:not(.is-out) .is-hot::after { animation: lens-pulse 1.6s ease-out 2; }
@keyframes lens-pulse { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12, 1.6); } }
.sc-live:not(.is-warn) .lens-warn, .sc-live.is-out .lens-warn { opacity: 0; transform: translateY(36px) scale(.94); filter: blur(4px); }
.sc-live.is-warn:not(.is-out) .lens-warn { transition-delay: .25s; }

/* ── small screens ── */
@media (max-width: 600px) {
  .lens-warn { inset-block-end: 6%; padding: 12px 14px 13px; gap: 10px; }
  .lens-warn .ic { inline-size: 34px; block-size: 34px; border-radius: 10px; }
  .lens-warn p { font-size: .95rem; }
}

@media (prefers-color-scheme: light) {
  .lens::before { background: radial-gradient(closest-side, rgba(255, 106, 0, .22), rgba(255, 106, 0, .07) 55%, transparent 75%); }
  .lens-warn::before { box-shadow: 0 0 10px rgba(255, 106, 0, .5); }
}

@media (prefers-reduced-motion: reduce) {
  .lens-rig { transform: perspective(1700px) rotateY(var(--ry0)) rotateX(4deg); }
  .lens-warn { translate: none; }
}