/* AiVRIC Fabric Experience — styles
   Brand tokens mirror aivric.com (Jost headings, Inter body, cyan on deep navy).
   Blue / coral / gold are reserved for information streams and their badges. */

:root {
  --bg: #080f1c;
  --bg-deep: #030a12;
  --panel: rgba(8, 15, 28, 0.82);
  --panel-solid: #0b1626;
  --line: rgba(226, 232, 240, 0.12);
  --line-strong: rgba(226, 232, 240, 0.24);
  --text: #e2e8f0;
  --text-muted: #94a3b8;
  --text-dim: #64748b;
  --blue: #00d1ff;
  --coral: #f87171;
  --gold: #ffd63a;
  --green: #2ee59d;
  --purple: #a78bfa;
  --font-head: 'Jost', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --hud-h: 56px;
  --panel-w: 38vw;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 900ms;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Stage (master image + overlays) ---------- */
#stage {
  position: fixed; inset: 0;
  overflow: hidden;
  background: var(--bg-deep);
}
#stage .layer {
  position: absolute; left: 0; top: 0;
  transform-origin: 0 0;
  will-change: transform, opacity;
}
#stage img.scene {
  position: absolute; left: 0; top: 0;
  display: block;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
#stage .layer.room { opacity: 0; transition: opacity var(--dur) var(--ease); }
#stage.in-room .layer.room { opacity: 1; }
#stage.in-room .layer.master-overlays { opacity: 0; pointer-events: none; }
#stage .layer.master-overlays { transition: opacity 400ms var(--ease); }

/* streams overlay */
#streams { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
#streams path {
  fill: none;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 16 24;
  opacity: 0.8;
  filter: drop-shadow(0 0 4px currentColor);
  animation: flow 1.6s linear infinite;
}
#streams path.blue  { stroke: var(--blue); color: var(--blue); }
#streams path.coral { stroke: var(--coral); color: var(--coral); }
#streams path.gold  { stroke: var(--gold); color: var(--gold); stroke-width: 4; }
#streams path.dim { opacity: 0.25; }
#streams path.hot { stroke-width: 4.5; opacity: 1; }
@keyframes flow { to { stroke-dashoffset: -40; } }

/* hotspot pins */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; align-items: center; gap: 10px;
  padding: 0; margin: 0;
  color: var(--text);
  opacity: 0;
  transition: opacity 500ms var(--ease), transform 200ms var(--ease);
}
.pin.show { opacity: 1; }
.pin .dot {
  position: relative;
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.9);
  background: rgba(8,15,28,0.55);
  display: grid; place-items: center;
  flex: none;
}
.pin .dot::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff;
}
.pin .dot::before {
  content: ""; position: absolute; inset: -6px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.5);
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.7); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }
.pin .chip {
  font-family: var(--font-head);
  font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  padding: 6px 12px; border-radius: 6px;
  background: rgba(8,15,28,0.72);
  border: 1px solid var(--line);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  white-space: nowrap;
}
.pin .sub {
  display: block; font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--text-muted);
  max-height: 0; max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-height 220ms var(--ease), max-width 220ms var(--ease), margin 220ms var(--ease);
}
.pin:hover .sub, .pin:focus-visible .sub { max-height: 40px; max-width: 320px; margin-top: 2px; }
.pin:hover .dot, .pin:focus-visible .dot { border-color: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.15); }
.pin:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 8px; }
.pin[data-side="left"] { flex-direction: row-reverse; }

/* ---------- HUD ---------- */
#hud {
  position: fixed; left: 0; right: 0; top: 0; height: var(--hud-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  background: linear-gradient(to bottom, rgba(3,10,18,0.92), rgba(3,10,18,0.55));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  z-index: 40;
}
#hud .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
#hud .brand svg { width: 22px; height: 24px; }
#hud .brand b { font-family: var(--font-head); font-weight: 600; font-size: 18px; letter-spacing: 0.06em; }
#hud .brand span { color: var(--text-muted); font-size: 13px; margin-left: 4px; }
#hud .crumbs { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 14px; }
#hud .crumbs b { color: var(--text); font-weight: 500; }
#hud .crumbs .sep { opacity: 0.5; }
#hud .nav { display: flex; align-items: center; gap: 6px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 7px; white-space: nowrap;
  font-family: var(--font-head); font-weight: 500; font-size: 14px; letter-spacing: 0.01em;
  color: var(--text);
  border: 1px solid transparent;
  transition: background 160ms, border-color 160ms, color 160ms;
}
.btn:hover { background: rgba(226,232,240,0.08); }
.btn.outline { border-color: var(--line-strong); }
.btn.outline:hover { border-color: var(--text-muted); }
.btn.primary { background: var(--blue); color: #03202a; }
.btn.primary:hover { background: #33dbff; }
.btn.active { background: rgba(0,209,255,0.14); color: #fff; }
.btn.icon { padding: 8px; }
.btn.icon svg { width: 18px; height: 18px; }
.btn[disabled] { opacity: 0.45; cursor: default; }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

#hud .nav .room-btn::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-muted));
}
#hud .nav .btn { padding: 8px 11px; }
#hud .crumbs { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; margin: 0 16px; }
@media (max-width: 1500px) { #hud .brand span { display: none; } }
@media (max-width: 1280px) { #hud .crumbs { display: none; } }
@media (max-width: 1100px) { #hud .nav .room-btn { font-size: 13px; padding: 8px 8px; } }

/* legend + hint */
#legend {
  position: fixed; left: 22px; bottom: 22px; z-index: 30;
  display: grid; gap: 8px; font-size: 13px; color: var(--text-muted);
  transition: opacity 300ms;
}
#legend div { display: flex; align-items: center; gap: 10px; }
#legend i { display: block; width: 28px; height: 2px; border-radius: 2px; }
#legend i.blue { background: var(--blue); } #legend i.coral { background: var(--coral); } #legend i.gold { background: var(--gold); }
#hint {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 30;
  color: var(--text-muted); font-size: 14px; letter-spacing: 0.02em;
  transition: opacity 300ms;
}
body.in-room #legend, body.in-room #hint { opacity: 0; pointer-events: none; }

/* mobile room strip (narrow screens only) */
#mobile-rooms {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom));
  gap: 8px; overflow-x: auto; scrollbar-width: none;
  background: linear-gradient(to top, rgba(3,10,18,0.95), rgba(3,10,18,0));
  transition: opacity 300ms;
}
#mobile-rooms::-webkit-scrollbar { display: none; }
#mobile-rooms .btn { flex: none; border: 1px solid var(--line-strong); background: rgba(8,15,28,0.7); font-size: 13px; padding: 8px 12px; }
#mobile-rooms .btn::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--dot, var(--text-muted)); }
body.in-room #mobile-rooms { opacity: 0; pointer-events: none; }

/* room nav arrows (bottom of scene while in room) */
#room-nav {
  position: fixed; left: 24px; right: calc(var(--panel-w) + 24px); bottom: 22px; z-index: 30;
  display: flex; justify-content: space-between;
  opacity: 0; pointer-events: none; transition: opacity 300ms;
}
body.in-room #room-nav { opacity: 1; pointer-events: auto; }
#room-nav .btn { font-size: 15px; }

/* ---------- Panel ---------- */
#panel {
  position: fixed; top: var(--hud-h); right: 0; bottom: 0; width: var(--panel-w); min-width: 360px; max-width: 640px;
  background: var(--panel);
  border-left: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translateX(104%);
  transition: transform 600ms var(--ease);
  z-index: 35;
  display: flex; flex-direction: column;
  overflow: hidden;
}
body.in-room #panel { transform: translateX(0); }
#panel .tabs {
  display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--line);
  overflow-x: auto; scrollbar-width: none;
}
#panel .tabs::-webkit-scrollbar { display: none; }
#panel .tab {
  padding: 10px 12px; font-family: var(--font-head); font-weight: 500; font-size: 14px; color: var(--text-muted);
  border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px;
}
#panel .tab:hover { color: var(--text); }
#panel .tab.active { color: var(--text); border-bottom-color: var(--blue); }
#panel .body { padding: 22px 26px 28px; overflow-y: auto; flex: 1; }
#panel .meta { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text-muted); margin-bottom: 10px; }
.badge {
  font-family: var(--font-head); font-weight: 500; font-size: 11.5px; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px; border: 1px solid currentColor;
}
.badge.live { color: var(--green); } .badge.beta { color: var(--blue); } .badge.alpha { color: var(--purple); }
.badge.roadmap, .badge.coming-soon { color: var(--text-muted); } .badge.service { color: var(--gold); }
#panel h2 {
  font-family: var(--font-head); font-weight: 500; font-size: 26px; line-height: 1.2; margin: 0 0 12px;
}
#panel .summary { color: var(--text-muted); margin: 0 0 18px; }
#panel .gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
#panel .gallery .thumb {
  position: relative; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden;
  border: 1px solid var(--line); background: #0f1b2c; padding: 0; text-align: left;
}
#panel .gallery .thumb img, #panel .gallery .thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
#panel .gallery .thumb .play {
  position: absolute; inset: 0; display: grid; place-items: center; background: rgba(3,10,18,0.35);
}
#panel .gallery .thumb .play span {
  width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; display: grid; place-items: center; background: rgba(8,15,28,0.6);
}
#panel .gallery .thumb .play svg { width: 18px; height: 18px; margin-left: 3px; }
#panel .gallery .thumb:hover { border-color: var(--line-strong); }
#panel .gallery .thumb .cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 6px 8px; font-size: 11.5px; color: var(--text);
  background: linear-gradient(to top, rgba(3,10,18,0.85), transparent);
  opacity: 0; transition: opacity 160ms;
}
#panel .gallery .thumb:hover .cap { opacity: 1; }
#panel h3 { font-family: var(--font-head); font-weight: 500; font-size: 16px; margin: 0 0 8px; }
#panel ul.caps { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
#panel ul.caps li { display: flex; gap: 10px; align-items: flex-start; color: var(--text); font-size: 14px; }
#panel ul.caps li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 1.5px solid var(--text-muted);
  background: center / 9px no-repeat url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.3 2.3L9.5 4' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
#panel .ctas { display: flex; gap: 10px; flex-wrap: wrap; }
#panel .ctas .btn { text-decoration: none; }
#panel .ctas .btn svg { width: 14px; height: 14px; }
#panel .room-intro { color: var(--text-muted); font-size: 13.5px; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }

/* ---------- Lightbox ---------- */
#lightbox {
  position: fixed; inset: 0; z-index: 60; background: rgba(3,10,18,0.94);
  display: grid; grid-template-rows: 1fr auto; padding: 56px 24px 24px;
  opacity: 0; pointer-events: none; transition: opacity 250ms;
}
#lightbox.open { opacity: 1; pointer-events: auto; }
#lightbox .media { display: grid; place-items: center; min-height: 0; }
#lightbox .media img, #lightbox .media video { max-width: 100%; max-height: 100%; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,0.6); }
#lightbox .cap { text-align: center; color: var(--text-muted); padding-top: 14px; font-size: 14px; }
#lightbox .close { position: absolute; top: 14px; right: 16px; }
#lightbox .prev, #lightbox .next { position: absolute; top: 50%; transform: translateY(-50%); }
#lightbox .prev { left: 14px; } #lightbox .next { right: 14px; }

/* ---------- Intro ---------- */
#intro {
  position: fixed; inset: 0; z-index: 70; background: #000;
  display: grid; place-items: center;
  transition: opacity 900ms var(--ease);
}
#intro.out { opacity: 0; pointer-events: none; }
#intro video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#intro .veil { position: absolute; inset: 0; background: linear-gradient(to top, rgba(3,10,18,0.9) 0%, rgba(3,10,18,0.2) 45%, rgba(3,10,18,0.35) 100%); }
#intro .copy {
  position: relative; text-align: center; max-width: 720px; padding: 0 24px;
  transform: translateY(18vh);
}
#intro .eyebrow { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 14px; }
#intro h1 { font-family: var(--font-head); font-weight: 500; font-size: clamp(28px, 4vw, 46px); line-height: 1.15; margin: 0 0 14px; }
#intro p { color: var(--text-muted); font-size: 16px; margin: 0 auto 26px; max-width: 560px; }
#intro .actions { display: flex; gap: 12px; justify-content: center; align-items: center; }
#intro .actions .btn.primary { padding: 12px 22px; font-size: 15px; }
#intro .sound { position: absolute; right: 20px; top: 16px; }

/* ---------- Boot / errors ---------- */
#boot { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; background: var(--bg-deep); color: var(--text-muted); font-family: var(--font-head); letter-spacing: 0.12em; text-transform: uppercase; font-size: 12px; transition: opacity 400ms; }
#boot.out { opacity: 0; pointer-events: none; }

/* ---------- Mobile / reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #streams path, .pin .dot::before { animation: none; }
  :root { --dur: 1ms; }
  #panel, #intro, .pin, #stage .layer { transition-duration: 1ms !important; }
}
@media (max-width: 767px) {
  :root { --panel-w: 100vw; --hud-h: 52px; }
  #hud { padding: 0 12px; }
  #hud .brand span, #hud .crumbs { display: none; }
  #hud .nav .room-btn { display: none; }
  #legend { display: none; }
  #hint { font-size: 13px; bottom: 64px; }
  #mobile-rooms { display: flex; }
  #panel { min-width: 0; max-width: none; top: 40vh; border-left: 0; border-top: 1px solid var(--line); border-radius: 14px 14px 0 0; }
  #panel h2 { font-size: 22px; }
  #panel .body { padding: 18px; }
  #room-nav { right: 24px; bottom: auto; top: calc(40vh - 52px); }
  .pin .chip { font-size: 12.5px; padding: 4px 9px; }
  .pin .dot { width: 24px; height: 24px; }
  .pin .sub { display: none; }
}