/* kiosk-ls-v2.css — MetaSpeak Royal Landscape skin (Tourism V2)
 * Scoped under .ms-lsv2-root. Keyframes prefixed mslsv2*. In live mode the
 * backdrop is transparent so the engine's 3D scene/bears show through.
 * Tunables (set via the `tune` prop / Landscape Mode sliders in Phase 3):
 *   --lsv2-scale-mult  manual scale on top of fit (default 1)
 *   --lsv2-bubble-a    bubble background opacity 0..1 (default .96)
 *   --lsv2-card-a      menu-card background opacity 0..1 (default .96)
 *   --lsv2-frame-op    frame opacity 0..1 (default 1)
 *   --ms-navy/-gold/-cyan/-pink ...  palette
 */

.ms-lsv2-root{
  --ms-navy:#0a1733; --ms-navy-2:#0e1f47; --ms-navy-3:#071028;
  --ms-gold:#d4af37; --ms-gold-soft:#e8c87a; --ms-gold-bright:#f4d98a;
  --ms-cyan:#5fd0e8; --ms-pink:#e89cc8; --ms-text:#eaf0ff;
  --lsv2-bubble-a:.96; --lsv2-card-a:.96; --lsv2-frame-op:1; --lsv2-scale-mult:1;
  position:absolute; inset:0; width:100%; height:100%; overflow:hidden;
  font-family:'Poppins',-apple-system,BlinkMacSystemFont,sans-serif;
  background:radial-gradient(125% 95% at 50% 16%, #0e1d44 0%, #0a1530 46%, #060d1e 78%, #04081a 100%);
}
.ms-lsv2-root.ms-lsv2-live{ background:transparent; }   /* 3D scene shows through */
.ms-lsv2-root *{ box-sizing:border-box; }

/* ── animations ───────────────────────────────────────────────────────── */
@keyframes mslsv2-frameGlow{
  0%,100%{ filter:drop-shadow(0 0 6px rgba(212,175,55,.42)) drop-shadow(0 0 16px rgba(95,208,232,.16)); }
  50%{ filter:drop-shadow(0 0 15px rgba(212,175,55,.85)) drop-shadow(0 0 34px rgba(95,208,232,.40)); }
}
@keyframes mslsv2-micPulse{
  0%{ box-shadow:0 0 0 0 rgba(95,208,232,.55), 0 0 26px rgba(95,208,232,.8), inset 0 0 22px rgba(95,208,232,.5); }
  70%{ box-shadow:0 0 0 26px rgba(95,208,232,0), 0 0 26px rgba(95,208,232,.8), inset 0 0 22px rgba(95,208,232,.5); }
  100%{ box-shadow:0 0 0 0 rgba(95,208,232,0), 0 0 26px rgba(95,208,232,.8), inset 0 0 22px rgba(95,208,232,.5); }
}
@keyframes mslsv2-spin{ to{ transform:rotate(360deg); } }
@keyframes mslsv2-speakCyan{
  0%,100%{ box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.12), inset 0 0 26px rgba(95,208,232,.08), 0 0 0 1px rgba(212,175,55,.55); }
  50%{ box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.16), inset 0 0 30px rgba(95,208,232,.22), 0 0 22px rgba(95,208,232,.5), 0 0 0 1px rgba(95,208,232,.75); }
}
@keyframes mslsv2-speakPink{
  0%,100%{ box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.12), inset 0 0 26px rgba(232,156,200,.08), 0 0 0 1px rgba(212,175,55,.55); }
  50%{ box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.16), inset 0 0 30px rgba(232,156,200,.22), 0 0 22px rgba(232,156,200,.5), 0 0 0 1px rgba(232,156,200,.75); }
}
@keyframes mslsv2-ripple{ 0%{ transform:scale(.52); opacity:0; } 18%{ opacity:.65; } 100%{ transform:scale(1.85); opacity:0; } }
@keyframes mslsv2-bar{ 0%,100%{ transform:scaleY(.35); } 50%{ transform:scaleY(1); } }
@keyframes mslsv2-dot{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }

/* ── 3D stage canvas (full-frame, behind everything) ──────────────────── */
.ms-lsv2-canvas{ position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block; }
.ms-lsv2-live .ms-lsv2-canvas{ background:transparent; }
.ms-lsv2-canvas-preview{ background:transparent; }

/* ── kerawang frame (full-viewport, decorative) ───────────────────────── */
.ms-lsv2-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none;
  z-index:1; opacity:var(--lsv2-frame-op,1); animation:mslsv2-frameGlow 4.5s ease-in-out infinite; }
/* 2D-stage mode: backdrop image sits behind the transparent bears canvas */
.ms-lsv2-stagebg{ position:absolute; inset:0; width:100%; height:100%; object-fit:fill; z-index:0; pointer-events:none; }
.ms-lsv2-stage2d .ms-lsv2-canvas{ z-index:1; }
.ms-lsv2-defs{ position:absolute; overflow:hidden; }
.ms-lsv2-floor{ position:absolute; left:50%; bottom:60px; transform:translateX(-50%); width:1100px; height:240px; z-index:1;
  background:radial-gradient(60% 100% at 50% 100%, rgba(95,208,232,.10), rgba(95,208,232,0) 70%); filter:blur(8px); pointer-events:none; }

/* ── UI plane (1920×1080, scaled to fit; transform set inline) ─────────── */
.ms-lsv2-scaler{ position:absolute; left:50%; top:50%; width:1920px; height:1080px; transform-origin:center center; z-index:2; }

/* ── branding ─────────────────────────────────────────────────────────── */
.ms-lsv2-branding{ position:absolute; left:96px; top:54px; display:flex; align-items:center; gap:18px; height:84px;
  padding:0 26px 0 22px; border-radius:20px; background:linear-gradient(155deg, rgba(14,31,71,0.97), rgba(8,18,40,0.98));
  border:1.5px solid var(--ms-gold); box-shadow:0 8px 26px rgba(0,0,0,.45), inset 0 0 0 4px rgba(212,175,55,.10), inset 0 0 24px rgba(95,208,232,.05); }
.ms-lsv2-online{ position:absolute; top:-5px; right:-5px; width:13px; height:13px; border-radius:50%; background:var(--ms-cyan);
  box-shadow:0 0 10px var(--ms-cyan); animation:mslsv2-dot 2.2s ease-in-out infinite; transition:opacity .4s; }
.ms-lsv2-logo{ display:flex; flex-direction:column; align-items:flex-start; line-height:1; padding-right:18px; border-right:1px solid rgba(212,175,55,.4); }
.ms-lsv2-logo .tm{ display:flex; align-items:center; gap:6px; }
.ms-lsv2-logo .tm span{ font-weight:800; font-size:15px; letter-spacing:.16em; color:#eaf0ff; }
.ms-lsv2-logo .my{ font-weight:800; font-size:20px; letter-spacing:.05em; background:linear-gradient(90deg,#f4d98a,#d4af37); -webkit-background-clip:text; background-clip:text; color:transparent; }
.ms-lsv2-crest{ height:60px; width:auto; display:block; }
.ms-lsv2-badge-wrap{ display:flex; align-items:center; gap:12px; }
.ms-lsv2-badge{ font-family:'Cinzel',serif; font-weight:600; font-size:21px; letter-spacing:.04em; color:var(--ms-gold-soft); text-shadow:0 0 14px rgba(212,175,55,.35); }

/* ── speech bubbles ───────────────────────────────────────────────────── */
.ms-lsv2-bubble{ position:absolute; top:186px; width:392px; padding:22px 30px 26px; border-radius:22px;
  background:linear-gradient(155deg, rgba(14,31,71,var(--lsv2-bubble-a,.96)), rgba(8,18,40,var(--lsv2-bubble-a,.96)));
  backdrop-filter:blur(2px); color:var(--ms-text); opacity:0; transform:translateY(-12px) scale(.96);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
.ms-lsv2-bubble.is-visible{ opacity:1; transform:translateY(0) scale(1); }
.ms-lsv2-bubble-1{ left:72px; box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.12), inset 0 0 26px rgba(95,208,232,.08), 0 0 0 1px rgba(212,175,55,.55); }
.ms-lsv2-bubble-2{ right:72px; box-shadow:0 12px 34px rgba(0,0,0,.5), inset 0 0 0 4px rgba(212,175,55,.12), inset 0 0 26px rgba(232,156,200,.08), 0 0 0 1px rgba(212,175,55,.55); }
.ms-lsv2-bubble-1.is-visible.speaking{ animation:mslsv2-speakCyan 1.4s ease-in-out infinite; }
.ms-lsv2-bubble-2.is-visible.speaking{ animation:mslsv2-speakPink 1.4s ease-in-out infinite; }
.ms-lsv2-name{ font-family:'Cinzel',serif; font-weight:700; font-size:25px; letter-spacing:.42em; text-align:center; padding-left:.42em; }
.ms-lsv2-bubble-1 .ms-lsv2-name{ color:var(--ms-cyan); text-shadow:0 0 16px rgba(95,208,232,.55); }
.ms-lsv2-bubble-2 .ms-lsv2-name{ color:var(--ms-pink); text-shadow:0 0 16px rgba(232,156,200,.55); }
.ms-lsv2-divider{ display:block; margin:9px auto 4px; color:var(--ms-gold-soft); }
.ms-lsv2-text{ text-align:center; font-size:17.5px; line-height:1.55; color:var(--ms-text); font-weight:400; }
.ms-lsv2-bars{ display:flex; gap:4px; align-items:flex-end; justify-content:center; height:14px; margin:2px 0 8px; }
.ms-lsv2-bars i{ width:3px; height:14px; border-radius:2px; transform-origin:bottom; animation:mslsv2-bar .8s ease-in-out infinite; display:block; }
.ms-lsv2-bubble-1 .ms-lsv2-bars i{ background:var(--ms-cyan); }
.ms-lsv2-bubble-2 .ms-lsv2-bars i{ background:var(--ms-pink); }
.ms-lsv2-tail{ position:absolute; top:100%; margin-top:-2px; filter:drop-shadow(0 6px 6px rgba(0,0,0,.4)); }
.ms-lsv2-bubble-1 .ms-lsv2-tail{ left:52px; } .ms-lsv2-bubble-2 .ms-lsv2-tail{ right:52px; }

/* ── menu ─────────────────────────────────────────────────────────────── */
.ms-lsv2-menu{ position:absolute; left:0; right:0; bottom:54px; display:flex; align-items:center; justify-content:center; gap:48px; padding:0 80px; }
.ms-lsv2-cardgroup{ display:flex; gap:20px; transition:opacity .55s cubic-bezier(.2,.8,.2,1), transform .55s cubic-bezier(.2,.8,.2,1); }
.ms-lsv2-cardgroup.is-hidden{ opacity:0; transform:translateY(16px); pointer-events:none; }
.ms-lsv2-card{ position:relative; width:132px; height:150px; border-radius:18px;
  background:linear-gradient(160deg, rgba(18,38,82,var(--lsv2-card-a,.96)), rgba(9,19,42,var(--lsv2-card-a,.96)));
  border:1.5px solid rgba(212,175,55,0.55); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
  cursor:pointer; overflow:hidden; color:var(--ms-gold-soft);
  box-shadow:0 6px 18px rgba(0,0,0,.45), inset 0 0 0 4px rgba(212,175,55,.07);
  transition:transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s, color .35s; }
.ms-lsv2-cardglow{ position:absolute; inset:0; border-radius:18px; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 30%, rgba(95,208,232,.20), rgba(95,208,232,0) 70%); opacity:0; transition:opacity .35s; }
.ms-lsv2-card:hover{ transform:translateY(-9px) scale(1.045); border-color:var(--ms-cyan); color:var(--ms-gold-bright);
  box-shadow:0 16px 32px rgba(0,0,0,.5), 0 0 22px rgba(95,208,232,.45), inset 0 0 0 4px rgba(212,175,55,.14); }
.ms-lsv2-card:hover .ms-lsv2-cardglow{ opacity:1; }
.ms-lsv2-cardicon{ display:flex; align-items:center; justify-content:center; height:46px; transition:transform .4s cubic-bezier(.2,.8,.2,1), filter .35s; }
.ms-lsv2-card:hover .ms-lsv2-cardicon{ transform:scale(1.18) translateY(-2px); filter:drop-shadow(0 0 8px rgba(95,208,232,.6)); }
.ms-lsv2-cardicon svg{ display:block; }
.ms-lsv2-cardlabel{ font-family:'Poppins',sans-serif; font-weight:600; font-size:14.5px; line-height:1.2; text-align:center; color:var(--ms-text); transition:color .35s; padding:0 6px; }
.ms-lsv2-card:hover .ms-lsv2-cardlabel{ color:var(--ms-gold-bright); }

/* mic cluster */
.ms-lsv2-miccluster{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.ms-lsv2-mic{ position:relative; width:172px; height:172px; border:none; background:transparent; cursor:pointer; padding:0; display:flex; align-items:center; justify-content:center; }
.ms-lsv2-sonar{ position:absolute; top:50%; left:50%; width:168px; height:168px; margin:-84px 0 0 -84px; border-radius:50%;
  border:2px solid var(--ms-cyan); box-shadow:0 0 22px rgba(95,208,232,.55), inset 0 0 14px rgba(95,208,232,.35); pointer-events:none; animation:mslsv2-ripple 3s ease-out infinite; }
.ms-lsv2-sonar.s2{ animation-delay:1s; } .ms-lsv2-sonar.s3{ animation-delay:2s; }
.ms-lsv2-ring{ position:absolute; inset:0; color:var(--ms-gold); animation:mslsv2-spin 38s linear infinite; }
.ms-lsv2-miccore{ position:absolute; inset:18px; border-radius:50%; background:radial-gradient(circle at 50% 38%, #12244e, #0a1733 70%); border:1.5px solid rgba(212,175,55,.5); }
.ms-lsv2-michalo{ position:absolute; inset:14px; border-radius:50%; border:3px solid rgba(95,208,232,0.5);
  box-shadow:0 0 16px rgba(95,208,232,.35), inset 0 0 14px rgba(95,208,232,.22); transition:border-color .4s, box-shadow .4s; pointer-events:none; }
.ms-lsv2-mic[data-state="listening"] .ms-lsv2-michalo{ border-color:var(--ms-cyan); animation:mslsv2-micPulse 1.6s ease-out infinite; }
.ms-lsv2-micic{ position:relative; z-index:2; }
.ms-lsv2-type{ display:flex; align-items:center; gap:11px; padding:10px 22px; border-radius:24px;
  background:linear-gradient(155deg, rgba(14,31,71,0.95), rgba(8,18,40,0.97)); border:1.5px solid var(--ms-gold);
  box-shadow:0 6px 18px rgba(0,0,0,.4), inset 0 0 14px rgba(95,208,232,.12); cursor:pointer; transition:box-shadow .3s; }
.ms-lsv2-type:hover{ box-shadow:0 6px 22px rgba(0,0,0,.4), 0 0 16px rgba(212,175,55,.3); }
.ms-lsv2-type span{ font-family:'Poppins'; font-weight:600; font-size:13.5px; letter-spacing:.14em; color:var(--ms-gold-soft); }