/* ═══════════════════════════════════════
   CROISSANT AR — style.css  v13 UNIFIED
   Single hotspot system for 3D + AR
   ═══════════════════════════════════════ */

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
body{
  background:#0d120a;
  font-family:-apple-system,"Helvetica Neue",sans-serif;
  overflow:hidden;height:100dvh;width:100vw;
}

/* ══ MODEL VIEWER ══ */
model-viewer{
  width:100%;height:100%;
  --progress-bar-color:transparent;
  --progress-mask:transparent;
  background:radial-gradient(ellipse at 40% 60%,#1e2b14 0%,#111808 50%,#0a0d07 100%);
}

/* ═══════════════════════════════════════════════
   HOTSPOT ROOT
   Zero-size anchor — MV centers it at 3D point.
   Children overflow out of it in all directions.
   ═══════════════════════════════════════════════ */
.hotspot{
  background:none;border:none;padding:0;
  width:0;height:0;
  position:relative;
  cursor:default;
  overflow:visible;
  pointer-events:none;
}

/* ═══════════════════════════════════════════════
   CARD WRAP — absolutely positioned from hotspot
   center. translate(-50%,-50%) centers it on
   the left/top offset values.
   ═══════════════════════════════════════════════ */
.hs-card-wrap{
  position:absolute;
  transform:translate(-50%,-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  pointer-events:none;
  user-select:none;
  -webkit-user-select:none;
  white-space:nowrap;
}

/* ═══════════════════════════════════════════════
   TITLE — above the card
   ═══════════════════════════════════════════════ */
.hs-title{
  display:block;
  text-align:center;
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,0.92);
  white-space:nowrap;
  letter-spacing:0.3px;
  text-shadow:0 1px 8px rgba(0,0,0,0.9);
  margin-bottom:5px;
  padding:0 4px;
}

/* ═══════════════════════════════════════════════
   CARD — glass style, exact original
   backdrop-filter:blur(12px)
   background:rgba(255,255,255,0.05)
   NO yellow/orange. NO solid colors.
   ═══════════════════════════════════════════════ */
.hs-card{
  position:relative;
  padding:14px 16px 12px 16px;
  min-width:138px;
  background:rgba(80,200,80,0.08);
  border:1px solid rgba(140,255,140,0.15);
  border-radius:14px;
  /* transform managed by animation CSS below */
}

/* ── Icon: overlaps top-left corner (~25% outside) ── */
.hs-icon{
  position:absolute;
  top:-13px;
  left:-10px;
  width:32px;height:32px;
  border-radius:50%;
  background:rgba(20,32,16,0.90);
  border:1px solid rgba(255,255,255,0.22);
  display:flex;align-items:center;justify-content:center;
  font-size:16px;
  flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* ── Bullet list ── */
.hs-bullets{
  list-style:none;
  margin:0;padding:0;
  display:flex;flex-direction:column;gap:5px;
}
.hs-bullets li{
  display:flex;align-items:center;gap:6px;
  font-size:11px;
  color:rgba(255,255,255,0.78);
  white-space:nowrap;
}
.hs-bullets li::before{
  content:"";
  display:inline-block;
  width:4px;height:4px;
  background:rgba(160,240,140,0.55);
  border-radius:50%;
  flex-shrink:0;
}

/* ═══════════════════════════════════════════════
   SVG LINE — inside hotspot, overflow:visible
   Draws from (0,0) [anchor center] to card center.
   ═══════════════════════════════════════════════ */
.hs-line-svg{
  position:absolute;
  left:0;top:0;
  width:1px;height:1px;
  overflow:visible;
  pointer-events:none;
}

.hs-line-el{
  animation:lineBreath 1.5s ease-in-out infinite;
  animation-play-state: paused;
}
.hs-line-el.line-visible {
  animation-play-state: running;
}
@keyframes lineBreath{
  0%   { stroke-width:0.5; }
  50%  { stroke-width:1.3; }
  100% { stroke-width:0.5; }
}

/* ═══════════════════════════════════════════════
   ANCHOR DOT — position mode only
   ═══════════════════════════════════════════════ */
.hs-anchor-dot{
  position:absolute;
  left:0;top:0;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(255,255,255,0.95);
  border:2.5px solid rgba(77,187,109,0.9);
  box-shadow:0 0 0 4px rgba(77,187,109,0.18),0 0 10px rgba(77,187,109,0.5);
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:0;
  transition:opacity 0.35s,transform 0.15s,box-shadow 0.15s;
  z-index:13;
  cursor:move;
}

@keyframes anchorPulse{
  0%   { box-shadow:0 0 0 4px rgba(77,187,109,0.18),0 0 0 0 rgba(77,187,109,0.5); }
  60%  { box-shadow:0 0 0 4px rgba(77,187,109,0.10),0 0 0 9px rgba(77,187,109,0); }
  100% { box-shadow:0 0 0 4px rgba(77,187,109,0.18),0 0 0 0 rgba(77,187,109,0); }
}
.hs-anchor-dot[style*="pointer-events: auto"],
.hs-anchor-dot[style*="pointer-events:auto"]{
  animation:anchorPulse 2s ease-out infinite;
}

/* ── Editor drag bar ── */
.hs-drag-bar{
  text-align:center;
  font-size:9px;
  letter-spacing:2px;
  color:rgba(255,255,255,0.4);
  padding:3px 0 1px;
  cursor:grab;
  margin-top:4px;
}
.hs-drag-bar:active{ cursor:grabbing; }

/* ══ TOP BAR ══ */
#topbar{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding:12px 14px;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
  background:linear-gradient(to bottom,rgba(0,0,0,0.5),transparent);
}
.logo{
  font-size:13px;font-weight:800;
  color:rgba(255,255,255,0.75);
  letter-spacing:3px;text-transform:uppercase;
}
.top-btns{display:flex;gap:8px;pointer-events:auto;}
.tbtn{
  height:34px;background:rgba(0,0,0,0.55);backdrop-filter:blur(10px);
  border-radius:17px;border:1px solid rgba(255,255,255,0.12);cursor:pointer;
  color:#fff;font-size:12px;font-weight:600;
  display:flex;align-items:center;gap:5px;padding:0 12px;
  white-space:nowrap;transition:background 0.2s;
}
.tbtn:active{background:rgba(77,187,109,0.3);}
.tbtn.active-edit{background:rgba(77,187,109,0.35);border-color:rgba(77,187,109,0.6);}

#edit-dish-btn{border-color:rgba(120,160,255,0.35);}
#edit-dish-btn.active-edit{background:rgba(100,140,255,0.25);border-color:rgba(120,160,255,0.7);color:#9bbfff;}
#position-btn{border-color:rgba(77,187,109,0.35);}
#position-btn.active-edit{background:rgba(77,187,109,0.28);border-color:rgba(77,187,109,0.8);color:#6ddc8a;}

#dbl-hint{
  position:fixed;bottom:175px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,0.35);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;z-index:20;pointer-events:none;
  transition:opacity 0.5s;
}
#trip-hint{
  position:fixed;bottom:175px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,0.35);font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;z-index:20;pointer-events:none;
  opacity:0;transition:opacity 0.8s ease;
}

/* ══ BADGES ══ */
.edit-mode-hint{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  background:rgba(77,187,109,0.9);backdrop-filter:blur(8px);
  color:#fff;font-size:13px;font-weight:700;
  padding:8px 18px;border-radius:20px;
  z-index:40;letter-spacing:0.5px;
  opacity:0;transition:opacity 0.3s;
  pointer-events:none;white-space:nowrap;
}
.edit-mode-hint.show{opacity:1;}

.placing-badge{
  position:fixed;top:70px;left:50%;transform:translateX(-50%);
  background:rgba(0,0,0,0.7);backdrop-filter:blur(10px);
  border:1px solid rgba(77,187,109,0.4);
  color:#4dbb6d;font-size:13px;font-weight:700;
  padding:8px 18px;border-radius:20px;z-index:40;
  opacity:0;transition:opacity 0.3s;pointer-events:none;
  white-space:nowrap;text-align:center;
}
.placing-badge.show{opacity:1;}

/* ══ EDIT DRAWER ══ */
#edit-panel{
  position:fixed;inset:0;z-index:50;display:flex;
  transform:translateX(100%);
  transition:transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
#edit-panel.open{transform:translateX(0);}
#edit-overlay{flex:1;background:rgba(0,0,0,0.4);backdrop-filter:blur(2px);}
#edit-drawer{
  width:310px;max-width:88vw;background:#0f1a0c;
  border-left:1px solid rgba(255,255,255,0.07);
  overflow-y:auto;display:flex;flex-direction:column;
}
#edit-header{
  padding:16px 14px 12px;
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,0.06);
  position:sticky;top:0;background:#0f1a0c;z-index:1;
}
#edit-header h3{color:#fff;font-size:15px;font-weight:700;}
.close-edit{background:none;border:none;color:rgba(255,255,255,0.4);font-size:20px;cursor:pointer;}
.edit-section{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,0.05);}
.est{font-size:9px;color:#4dbb6d;letter-spacing:2px;text-transform:uppercase;margin-bottom:9px;font-weight:700;}
.field{margin-bottom:9px;}
.field label{display:block;font-size:9px;color:rgba(255,255,255,0.4);margin-bottom:3px;text-transform:uppercase;letter-spacing:1px;}
.field input{
  width:100%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.09);
  border-radius:7px;padding:7px 9px;color:#fff;font-size:13px;outline:none;
}
.field input:focus{border-color:#4dbb6d;}
.sg{display:grid;grid-template-columns:1fr 1fr;gap:7px;}
.ing-card{
  margin:6px 14px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.07);
  border-radius:10px;overflow:hidden;
}
.ing-head{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;}
.iep{font-size:20px;}
.inp{flex:1;color:#fff;font-size:13px;font-weight:600;}
.ito{color:rgba(255,255,255,0.3);font-size:14px;transition:transform 0.2s;}
.ing-card.open .ito{transform:rotate(180deg);}
.ing-body{display:none;padding:10px 12px;border-top:1px solid rgba(255,255,255,0.05);}
.ing-card.open .ing-body{display:block;}
.delete-tag-btn{
  display:block;width:100%;margin-top:10px;padding:7px 10px;
  background:rgba(220,60,60,0.15);border:1px solid rgba(220,60,60,0.4);
  border-radius:7px;color:rgba(255,100,100,0.9);font-size:11px;font-weight:700;
  cursor:pointer;text-align:center;letter-spacing:0.3px;
  transition:background 0.15s;
}
.delete-tag-btn:hover{background:rgba(220,60,60,0.28);}
#edit-footer{
  padding:14px;position:sticky;bottom:0;
  background:#0f1a0c;border-top:1px solid rgba(255,255,255,0.06);
}
.save-btn{width:100%;padding:12px;background:#4dbb6d;border:none;border-radius:11px;color:#fff;font-size:14px;font-weight:700;cursor:pointer;}

/* ══ BOTTOM BAR ══ */
#bar{
  position:fixed;bottom:0;left:0;right:0;z-index:30;
  background:linear-gradient(to top,rgba(0,0,0,0.95) 55%,transparent);
  padding:18px 18px 30px;
  transform:translateY(110%);
  transition:transform 0.8s cubic-bezier(0.22,1,0.36,1);
}
#bar.on{transform:translateY(0);}
.dname{font-size:22px;font-weight:800;color:#fff;margin-bottom:2px;letter-spacing:-0.3px;}
.dsub{font-size:11px;color:rgba(255,255,255,0.36);text-transform:uppercase;letter-spacing:1.2px;margin-bottom:13px;}
.srow{display:flex;gap:18px;margin-bottom:13px;}
.sv{font-size:16px;font-weight:700;color:#6ddc8a;}
.sl{font-size:8px;color:rgba(255,255,255,0.3);text-transform:uppercase;letter-spacing:1.5px;margin-top:1px;}
.brow{display:flex;gap:9px;}
.badd{flex:1;padding:13px;background:#4dbb6d;border:none;border-radius:13px;color:#fff;font-size:15px;font-weight:700;cursor:pointer;}
.binfo{padding:13px 17px;background:rgba(255,255,255,0.1);backdrop-filter:blur(6px);border:none;border-radius:13px;color:#fff;font-size:17px;cursor:pointer;}

/* ══ LOADER ══ */
#load{
  position:fixed;inset:0;z-index:100;background:#0a0d07;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  transition:opacity 0.8s;
}
.lwrap{position:relative;width:60px;height:60px;display:flex;align-items:center;justify-content:center;}
.lring{position:absolute;inset:0;border:2px solid rgba(77,187,109,0.1);border-top-color:#4dbb6d;border-radius:50%;animation:spin 0.9s linear infinite;}
.lemoji{font-size:28px;animation:bob 1.2s ease-in-out infinite;}
.ltxt{font-size:9px;letter-spacing:4px;color:rgba(77,187,109,0.5);text-transform:uppercase;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ══ AXIS LOCK HUD ══ */
#axis-lock-hud{
  position:fixed;top:50%;right:14px;transform:translateY(-50%);
  display:none;flex-direction:column;gap:8px;align-items:center;
  z-index:40;opacity:0;pointer-events:none;transition:opacity 0.22s ease;
}
#axis-lock-hud .axis-lock-btn{
  flex:none;width:36px;height:36px;padding:0;font-size:12px;border-radius:8px;
}

/* ══ RANGE SLIDER ══ */
input[type="range"]{
  -webkit-appearance:none;appearance:none;
  height:4px;border-radius:2px;
  background:rgba(255,255,255,0.12);
  outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;
  border-radius:50%;background:#4dbb6d;
  border:2px solid rgba(255,255,255,0.8);cursor:grab;
  box-shadow:0 0 4px rgba(77,187,109,0.5);
}

/* ═══════════════════════════════════════════════════════
   SEQUENTIAL HOTSPOT ANIMATION — v15-anim
   Added: CSS only. Zero structural changes.
   ═══════════════════════════════════════════════════════ */

/* ── 1. LINE: draw-in is handled entirely via JS inline styles ──
   getTotalLength() → dasharray/dashoffset set in _scheduleLineAnim.
   render loop ONLY updates x1/y1/x2/y2 — never touches dash props.
   CSS here only provides the breath animation AFTER draw completes.
   animation-play-state is set via .line-visible class (added in JS after draw). */

/* ── 2. CARD: pops in with spring scale ── */
.hs-card {
  /* override !important from existing rule */
  transform: scale(0.82) !important;
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity 0.4s ease;
}
.hs-card.card-animate {
  transform: scale(1) !important;
  opacity: 1;
}

/* ── 3. BULLETS: stagger up into view ── */
.hs-bullets li {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.hs-bullets li:nth-child(2) {
  transition-delay: 0.08s;
}
.hs-card.content-animate .hs-bullets li {
  opacity: 1;
  transform: translateY(0);
}

/* ── 4. TITLE + ICON: slide down into view ── */
.hs-title,
.hs-icon {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.hs-card-wrap.title-animate .hs-title,
.hs-card-wrap.title-animate .hs-icon {
  opacity: 1;
  transform: translateY(0);
}