/* ==========================================================================
   AI Smart Scanner — homepage hero CTA + modal
   Uses the home-review.css design tokens (--cream/--gold/--ink/--serif/--sans)
   since the homepage does not load the legacy css/style.css.
   ========================================================================== */

/* Hero CTA — a bold, always-visible floating badge fixed to the viewport
   (built entirely in JS, see js/ai-scanner.js), rather than nested inside
   the hero's own finely-tuned absolute-positioned layout. Sitting outside
   that layout means it can never disturb it, and it stays visible even
   after the visitor scrolls past the hero.
   Positioned clear BELOW the header/offer-banner band (which together can
   run to ~190px tall on this site) rather than on top of it, so it never
   covers the logo, nav or "Book a visit" link. */
.scanner-fab{
  position:fixed;top:210px;right:24px;z-index:2000;
  display:inline-flex;align-items:center;gap:12px;
  background:var(--gold);color:var(--ink);
  font:900 17px var(--sans);letter-spacing:.02em;text-transform:uppercase;
  padding:18px 32px;border-radius:999px;border:3px solid var(--ink);
  box-shadow:0 8px 28px rgba(0,0,0,.4);
  cursor:pointer;
  transition:all .3s ease;
  /* One-time "pop" entrance, then settle into a continuous pulse + breathe
     so it keeps demanding attention without ever looking static. */
  animation:
    scanner-fab-intro .7s cubic-bezier(.34,1.56,.64,1) both,
    scanner-fab-pulse 1.8s ease-in-out .7s infinite,
    scanner-fab-breathe 1.8s ease-in-out .7s infinite;
}
/* Strict scroll-depth rule (see initFabVisibility in js/ai-scanner.js):
   visible for the first two viewport-heights of scrolling, hidden from the
   third onward. visibility is included (not just opacity) so it's also
   removed from tab order / can't be clicked while invisible; paired with a
   transition it still fades smoothly rather than jump-cutting, since the
   UA defers the visibility:hidden switch to the end of the transition. */
.scanner-fab.hide-scanner-btn{opacity:0;pointer-events:none;visibility:hidden}
.scanner-fab:hover{background:#d8bd8c;transform:scale(1.08)}
.scanner-fab .scanner-fab-spark{font-size:20px;animation:scanner-fab-spin 2.6s linear infinite}
@keyframes scanner-fab-intro{
  0%{transform:scale(0);opacity:0}
  70%{transform:scale(1.15);opacity:1}
  100%{transform:scale(1);opacity:1}
}
@keyframes scanner-fab-pulse{
  0%,100%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 0 rgba(196,166,117,.7)}
  50%{box-shadow:0 8px 28px rgba(0,0,0,.4),0 0 0 18px rgba(196,166,117,0)}
}
@keyframes scanner-fab-breathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}
}
@keyframes scanner-fab-spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){
  .scanner-fab{animation:none}
  .scanner-fab .scanner-fab-spark{animation:none}
}
@media(max-width:600px){
  /* Kept near the top (not pinned to the bottom) so it never collides with
     the fixed cookie-consent banner, which also lives at the bottom. */
  .scanner-fab{top:178px;right:16px;padding:14px 22px;font-size:13px;gap:9px}
}

/* ---------- Modal shell ---------- */
.scanner-dialog{
  width:min(500px,calc(100% - 32px));
  max-height:calc(100dvh - 48px);
  overflow:auto;
  margin:auto;
  padding:0;
  border:none;
  border-radius:2px;
  background:var(--cream);
  color:var(--ink);
  font:15px/1.6 var(--sans);
}
.scanner-dialog::backdrop{background:#15130ecc}
.scanner-body{position:relative;padding:34px 28px 30px}
.scanner-close{
  position:absolute;top:16px;right:16px;z-index:2;
  width:34px;height:34px;border-radius:50%;
  background:transparent;border:1px solid var(--line);color:var(--ink);
  font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .25s,color .25s;
}
.scanner-close:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

.scanner-head .micro-label{font-size:10px;letter-spacing:.18em;color:#8a734c}
.scanner-head h2{font:400 34px/1.12 var(--serif);margin:10px 0 12px}
.scanner-head h2 em{font-style:italic;color:#8a734c}
.scanner-head p{font-size:14px;line-height:1.7;color:#4d5147;margin-bottom:24px}

/* ---------- Dropzone / preview ---------- */
.scanner-dropzone{
  display:none;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;aspect-ratio:1/1;border:1.5px dashed var(--line);border-radius:2px;
  padding:32px 18px;cursor:pointer;transition:border-color .3s,background .3s;
}
[data-scanner-stage="empty"] .scanner-dropzone{display:flex}
.scanner-dropzone:hover,.scanner-dropzone.is-drag{border-color:var(--gold);background:#eee6d6}
.scanner-dropzone svg{width:32px;height:32px;color:#8a734c}
.scanner-dropzone p{font-size:13px;color:var(--ink)}
.scanner-dropzone small{font-size:11px;color:var(--muted)}

.scanner-preview{
  display:none;position:relative;aspect-ratio:1/1;border-radius:2px;overflow:hidden;background:#171e19;
}
[data-scanner-stage="preview"] .scanner-preview,
[data-scanner-stage="scanning"] .scanner-preview,
[data-scanner-stage="done"] .scanner-preview{display:block}
.scanner-preview img{width:100%;height:100%;object-fit:cover}

.scanner-scan-line{
  position:absolute;left:0;right:0;top:0;height:2px;opacity:0;
  background:linear-gradient(90deg,transparent,#e5c58b 20%,#fff8e8 50%,#e5c58b 80%,transparent);
  box-shadow:0 0 16px 3px rgba(229,197,139,.7);
}
[data-scanner-stage="scanning"] .scanner-scan-line{opacity:1;animation:scanner-sweep 2.1s ease-in-out infinite}
@keyframes scanner-sweep{0%{top:2%}50%{top:96%}100%{top:2%}}
[data-scanner-stage="scanning"] .scanner-preview::before{
  content:'';position:absolute;inset:0;background:rgba(17,25,20,.4);z-index:1;
}
[data-scanner-stage="scanning"] .scanner-preview::after{
  content:'';position:absolute;inset:10px;border:1px solid rgba(229,197,139,.55);z-index:1;
  animation:scanner-pulse 1.8s ease-in-out infinite;
}
@keyframes scanner-pulse{0%,100%{opacity:.4;inset:14px}50%{opacity:.9;inset:6px}}
.scanner-status{
  position:absolute;left:0;right:0;bottom:14px;text-align:center;z-index:2;
  font:11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cream);
  opacity:0;min-height:1em;
}
[data-scanner-stage="scanning"] .scanner-status{opacity:1}
@media(prefers-reduced-motion:reduce){
  .scanner-scan-line,[data-scanner-stage="scanning"] .scanner-preview::after{animation:none}
}

/* ---------- Buttons ---------- */
.scanner-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:1;
  font:12px var(--sans);letter-spacing:.03em;padding:14px 20px;border-radius:999px;
  background:var(--ink);color:var(--cream);border:1px solid var(--ink);cursor:pointer;
  transition:background .25s,color .25s,border-color .25s;
}
.scanner-btn:hover{background:#3a4a37}
.scanner-btn.is-outline{background:transparent;color:var(--ink);border-color:var(--line)}
.scanner-btn.is-outline:hover{background:var(--ink);color:var(--cream)}
.scanner-btn:disabled{opacity:.5;cursor:default}

.scanner-actions{display:none;gap:10px;margin-top:18px}
[data-scanner-stage="empty"] .scanner-actions{display:flex}
.scanner-post-actions{display:none;gap:10px;margin-top:18px}
[data-scanner-stage="preview"] .scanner-post-actions,
[data-scanner-stage="scanning"] .scanner-post-actions,
[data-scanner-stage="done"] .scanner-post-actions{display:flex}
[data-scanner-stage="scanning"] .scanner-post-actions .scanner-btn{pointer-events:none;opacity:.55}
.scanner-post-actions .scanner-btn:first-child{flex:2}

.scanner-error{margin-top:14px;font-size:13px;color:#9c4a3a;text-align:center}
.scanner-error[hidden]{display:none}
.scanner-privacy{margin-top:16px;font-size:11px;color:var(--muted);text-align:center;line-height:1.6}

/* ---------- Camera dialog ---------- */
.scanner-camera-dialog{
  width:min(420px,calc(100% - 32px));padding:0;border:none;border-radius:2px;overflow:hidden;
  background:#171e19;margin:auto;
}
.scanner-camera-dialog::backdrop{background:#0a0e0bdd}
.scanner-camera-wrap{position:relative}
.scanner-camera-wrap video{width:100%;aspect-ratio:1/1;object-fit:cover;display:block;transform:scaleX(-1)}
.scanner-camera-controls{display:flex;align-items:center;justify-content:center;padding:16px;background:#171e19}
.scanner-camera-shutter{
  width:56px;height:56px;border-radius:50%;background:var(--cream);border:3px solid var(--gold);cursor:pointer;
  transition:transform .2s;
}
.scanner-camera-shutter:hover{transform:scale(1.06)}
.scanner-camera-close{
  position:absolute;top:10px;right:10px;z-index:2;width:32px;height:32px;border-radius:50%;
  background:rgba(0,0,0,.4);border:none;color:var(--cream);font-size:17px;line-height:1;cursor:pointer;
}

/* ---------- Results ---------- */
#scannerResults{margin-top:6px}
#scannerResults[hidden]{display:none}
.scanner-noface{border:1px solid var(--line);background:#eee6d6;padding:24px;text-align:center;border-radius:2px}

.scanner-results-head{display:flex;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid var(--line);background:#eee6d6;padding:24px;border-radius:2px}
.scanner-score-ring{
  --scanner-score:0;position:relative;width:104px;height:104px;border-radius:50%;flex-shrink:0;
  background:conic-gradient(var(--gold) calc(var(--scanner-score)*1%),#ded4bd 0);
  display:flex;align-items:center;justify-content:center;
}
.scanner-score-ring::before{content:'';position:absolute;inset:9px;border-radius:50%;background:var(--cream)}
.scanner-score-num{position:relative;font:400 32px var(--serif);color:var(--ink);line-height:1}
.scanner-score-label{position:absolute;bottom:20px;left:0;right:0;text-align:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#6e6659}

.scanner-age-badge{
  flex-shrink:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:104px;height:104px;border-radius:50%;border:2px solid var(--gold);background:var(--cream);
}
.scanner-age-num{font:400 32px var(--serif);color:var(--ink);line-height:1}
.scanner-age-label{margin-top:4px;font-size:8.5px;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;color:#6e6659;text-align:center}

.scanner-summary{flex:1;min-width:200px}
.scanner-skin-type{display:inline-block;font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:#8a734c;margin-bottom:6px}
.scanner-summary p{font-size:14px;line-height:1.75;color:var(--ink)}

.scanner-concerns{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-top:18px}
.concern-chip{border:1px solid var(--line);background:var(--cream);padding:14px 16px;border-radius:2px;border-left:3px solid var(--gold)}
.concern-chip.is-moderate{border-left-color:#8a734c}
.concern-chip.is-notable{border-left-color:#9c4a3a}
.concern-chip b{display:block;font:500 16px var(--serif);margin-bottom:3px}
.concern-chip span{display:inline-block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.concern-chip p{font-size:12.5px;line-height:1.6;color:#5a6055}

.scanner-treatments-title{font:400 24px var(--serif);margin:26px 0 14px}
.scanner-treatments{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line)}
.treatment-card{padding:20px;background:var(--cream);display:flex;flex-direction:column;min-width:0}
.treatment-card-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:6px}
.treatment-card-head h4{font:400 18px var(--serif);line-height:1.2}
.treatment-card-head .treatment-price{font-size:12px;font-weight:500;color:#8a734c;white-space:nowrap}
.treatment-card p{font-size:12.5px;line-height:1.6;color:#5a6055;margin-bottom:14px}
.treatment-card-actions{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-top:auto}
.treatment-card-actions a{font-size:11px}
.treatment-card-actions .scanner-book{
  display:inline-flex;align-items:center;padding:9px 14px;border-radius:999px;background:var(--ink);color:var(--cream);
}

/* ---------- Dermalogica homecare upsell ---------- */
.scanner-dermalogica-title em{font-style:italic;color:#8a734c;font-size:.72em}
.dermalogica-products{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.dermalogica-card{
  position:relative;padding:22px 20px 20px;background:#171e19;color:var(--cream);border-radius:2px;
  display:flex;flex-direction:column;min-width:0;
}
.dermalogica-tag{
  display:inline-block;align-self:flex-start;font-size:8.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:#171e19;background:var(--gold);padding:5px 10px;border-radius:999px;margin-bottom:12px;
}
.dermalogica-card h4{font:400 19px var(--serif);color:var(--cream);margin-bottom:8px}
.dermalogica-card p{font-size:12.5px;line-height:1.7;color:rgba(242,237,227,.72);margin-bottom:16px}
.dermalogica-card .dermalogica-shop{
  margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;
  padding:10px 16px;border-radius:999px;background:var(--gold);color:#171e19;font-weight:700;
}

.scanner-disclaimer{margin-top:22px;font-size:11px;line-height:1.7;color:var(--muted);text-align:center}

@media(max-width:600px){
  .scanner-body{padding:28px 20px 24px}
  .scanner-results-head{padding:18px}
}