/* Cloud Sorcery — the architecture tour.
   Same house rules: one accent per surface (the active scene's accent),
   every hover reacts under 100ms, every state change is presented. */

.sorcery { padding-top: 92px; padding-bottom: 80px; }

.s-head h1 {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4.5vw, 44px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.s-head .s-sub { color: var(--text-mid); margin-top: 8px; max-width: 60ch; }

/* ---------------- tabs ---------------- */

.arch-tabs { display: flex; gap: 14px; margin: 24px 0 16px; }
.arch-tab {
  --accent: var(--ember);
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-mid);
  font-family: var(--display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 12px 22px 14px;
  transition: transform 120ms var(--settle), border-color 120ms, color 120ms, box-shadow 160ms;
}
.arch-tab .t-kind {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--text-low);
  margin-bottom: 4px;
  transition: color 120ms;
}
.arch-tab:hover { transform: scale(1.03); color: var(--text-hi); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.arch-tab:active { transform: scale(0.97); }
.arch-tab[aria-selected='true'] {
  color: var(--text-hi);
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 4px 30px color-mix(in srgb, var(--accent) 18%, transparent);
}
.arch-tab[aria-selected='true'] .t-kind { color: var(--accent); }

/* ---------------- stage ---------------- */

.stage-wrap { position: relative; scroll-margin-top: 64px; }
.stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(160deg, var(--panel2), var(--bg1) 70%);
  overflow: hidden;
}
.stage svg { display: block; width: 100%; height: auto; }

/* accent-colored sweep that sells a scene swap */
.stage-sweep { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 14px; z-index: 5; }
.stage-sweep::after {
  content: '';
  position: absolute; top: 0; bottom: 0; left: -45%; width: 40%;
  background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--scene-accent) 55%, transparent), transparent);
  filter: blur(2px);
  animation: sweep-move 620ms var(--settle) forwards;
}
@keyframes sweep-move { to { left: 105%; } }

/* nodes */
.node { cursor: pointer; }
body.wand-active .node { cursor: none; }
.node rect {
  fill: var(--panel);
  stroke: var(--line);
  stroke-width: 1;
  transition: stroke 120ms, filter 160ms;
}
.node .n-glyph { font-size: 26px; }
.node .n-name {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  fill: var(--text-hi);
}
.node .n-sub { font-family: var(--body); font-size: 10px; fill: var(--text-mid); }
.node { transition: transform 120ms var(--settle), opacity 500ms var(--settle); transform-box: fill-box; transform-origin: center; }
.node:hover { transform: scale(1.05); }
.node:hover rect { stroke: var(--scene-accent); filter: drop-shadow(0 0 14px color-mix(in srgb, var(--scene-accent) 45%, transparent)); }
.node.dim { opacity: 0.55; }   /* recessed but READABLE — the map must stay parseable */
.node.lit rect {
  stroke: color-mix(in srgb, var(--scene-accent) 65%, var(--line));
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--scene-accent) 30%, transparent));
  animation: node-breathe 4200ms ease-in-out infinite;
  animation-delay: var(--breathe-delay, 0s);
}
@keyframes node-breathe {
  0%, 100% { filter: drop-shadow(0 0 9px color-mix(in srgb, var(--scene-accent) 26%, transparent)); }
  50% { filter: drop-shadow(0 0 17px color-mix(in srgb, var(--scene-accent) 48%, transparent)); }
}
.node.enter { animation: node-in 500ms var(--pop) backwards; }
@keyframes node-in { from { opacity: 0; transform: scale(0.8) translateY(10px); } }

/* the beat a node lights on: camera lands on it, a quick reward-pop overshoot */
.node.spotlight-in { animation: node-spotlight-pop 420ms var(--pop); }
@keyframes node-spotlight-pop {
  0% { transform: scale(0.88); }
  45% { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.node.spotlight-in rect { animation: node-spotlight-glow 420ms var(--settle); }
@keyframes node-spotlight-glow {
  0% { filter: drop-shadow(0 0 2px transparent); }
  35% { filter: drop-shadow(0 0 24px color-mix(in srgb, var(--scene-accent) 75%, transparent)); }
  100% { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--scene-accent) 30%, transparent)); }
}

/* scene-switch ceremony: the old chapter winks out before the new one arrives */
.node.leaving {
  transition: transform 220ms var(--settle), opacity 220ms var(--settle);
  transform: scale(0.7);
  opacity: 0;
}

/* hover = spotlight of interest: connected geometry brightens, the rest recedes */
.node.hover-dim { opacity: 0.45; }
.node.hover-focus rect { stroke: var(--scene-accent); filter: drop-shadow(0 0 16px color-mix(in srgb, var(--scene-accent) 50%, transparent)); }

/* edges */
.edge { stroke: #5a3542; stroke-width: 1.4; fill: none; opacity: 0.7; transition: opacity 160ms, stroke 160ms; }
.edge.lit { stroke: color-mix(in srgb, var(--scene-accent) 60%, var(--line)); opacity: 1; }
.edge.dim { opacity: 0.45; }   /* unlit connections stay legible */
.edge.hover-lit { stroke: var(--scene-accent); opacity: 1; stroke-width: 2; }
.edge.hover-dim { opacity: 0.35; }

/* packets: comet tail + node reception */
.packet-ghost { pointer-events: none; }
.arrival-ring {
  fill: none;
  stroke: var(--scene-accent);
  stroke-width: 2.4;
  opacity: 0.9;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: ring-pulse 480ms var(--settle) forwards;
}
@keyframes ring-pulse {
  from { stroke-width: 3; opacity: 0.95; transform: scale(0.94); }
  to { stroke-width: 0.4; opacity: 0; transform: scale(1.16); }
}
.block-shield {
  font-size: 20px;
  text-anchor: middle;
  pointer-events: none;
  filter: drop-shadow(0 0 6px #ff5d6c);
  animation: shield-flicker 560ms steps(7, end) forwards;
}
@keyframes shield-flicker {
  0%, 100% { opacity: 0; }
  8% { opacity: 1; }
  20% { opacity: 0.15; }
  32% { opacity: 1; }
  48% { opacity: 0.1; }
  64% { opacity: 0.9; }
  82% { opacity: 0.2; }
}

/* ---------------- caption bar ---------------- */

.caption-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;   /* narration sits ABOVE the stage — words first */
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg1);
  padding: 12px 16px;
}
.caption-body { flex: 1; min-width: 0; }
.caption {
  font-size: 15.5px;
  color: var(--text-hi);
  line-height: 1.45;
  min-height: 2.9em;
  transition: opacity 250ms var(--settle), transform 250ms var(--settle);
}
.caption.swap { opacity: 0; transform: translateY(6px); }
.caption strong { color: var(--scene-accent); font-weight: 650; }

.step-dots { display: flex; gap: 7px; margin-top: 8px; }
.step-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1px solid var(--text-low);
  background: transparent;
  padding: 0;
  transition: transform 120ms var(--settle), background 120ms, border-color 120ms;
}
.step-dot:hover { transform: scale(1.4); border-color: var(--scene-accent); }
.step-dot.on { background: var(--scene-accent); border-color: var(--scene-accent); transform: scale(1.2); }

.step-progress { height: 2px; background: var(--line); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.step-progress-fill { height: 100%; width: 0; background: var(--scene-accent); }
.step-progress-fill.run { animation: prog var(--step-ms, 5200ms) linear forwards; }
@keyframes prog { from { width: 0; } to { width: 100%; } }
.step-progress-fill.paused { animation-play-state: paused; }

.mode-toggle {
  background: none;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--text-mid);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  padding: 8px 14px;
  white-space: nowrap;
  transition: transform 120ms var(--settle), color 120ms, border-color 120ms, box-shadow 160ms;
}
.mode-toggle:hover { transform: scale(1.04); color: var(--text-hi); border-color: color-mix(in srgb, var(--scene-accent) 40%, var(--line)); }
.mode-toggle:active { transform: scale(0.96); }
.mode-toggle[aria-pressed='true'] {
  color: var(--scene-accent);
  border-color: color-mix(in srgb, var(--scene-accent) 55%, var(--line));
  box-shadow: 0 2px 18px color-mix(in srgb, var(--scene-accent) 20%, transparent);
}

.step-arrow {
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-mid);
  font-size: 22px;
  line-height: 1;
  padding: 8px 13px 10px;
  transition: transform 120ms var(--settle), color 120ms, border-color 120ms;
}
.step-arrow:hover { transform: scale(1.06); color: var(--scene-accent); border-color: color-mix(in srgb, var(--scene-accent) 40%, var(--line)); }
.step-arrow:active { transform: scale(0.94); }

.resume-tour {
  position: absolute;
  top: 14px; right: 14px;
  background: color-mix(in srgb, var(--scene-accent) 90%, #fff);
  color: var(--ink);
  border: none;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  padding: 8px 14px;
  animation: node-in 300ms var(--pop);
  transition: transform 120ms var(--settle), box-shadow 120ms;
}
.resume-tour:hover { transform: scale(1.05); box-shadow: 0 4px 22px color-mix(in srgb, var(--scene-accent) 45%, transparent); }
.resume-tour:active { transform: scale(0.95); }

/* ---------------- drill-down panel ---------------- */

.drill {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(430px, 92vw);
  z-index: 200;
  background: linear-gradient(200deg, var(--panel2), var(--bg1) 70%);
  border-left: 1px solid color-mix(in srgb, var(--scene-accent) 35%, var(--line));
  box-shadow: -20px 0 70px rgba(0, 0, 0, 0.6);
  padding: 84px 34px 34px;
  transform: translateX(105%);
  transition: transform 320ms var(--pop);
  overflow-y: auto;
}
.drill.open { transform: translateX(0); }
.drill-glyph {
  position: absolute;
  top: 60px; right: -6px;
  font-size: 220px;
  line-height: 1;
  opacity: 0.07;
  color: var(--scene-accent);
  filter: grayscale(0.3);
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transform: rotate(-6deg);
  transition: opacity 300ms var(--settle);
}
.drill-close, .drill-kind, .drill h2, .drill ul, .drill-tech { position: relative; z-index: 1; }
.drill-close {
  position: absolute;
  top: 26px; left: 30px;
  background: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text-mid);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  padding: 7px 13px;
  transition: transform 120ms var(--settle), color 120ms, border-color 120ms;
}
.drill-close:hover { transform: scale(1.05); color: var(--scene-accent); border-color: color-mix(in srgb, var(--scene-accent) 40%, var(--line)); }
.drill-kind {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--scene-accent);
  margin-bottom: 10px;
}
.drill h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 26px;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
}
.drill ul { list-style: none; }
.drill li {
  color: var(--text-mid);
  font-size: 14.5px;
  line-height: 1.55;
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  position: relative;
  animation: node-in 400ms var(--settle) backwards;
}
.drill li::before { content: '✦'; position: absolute; left: 0; color: var(--scene-accent); }
.drill li:nth-child(2) { animation-delay: 70ms; }
.drill li:nth-child(3) { animation-delay: 140ms; }
.drill li:nth-child(4) { animation-delay: 210ms; }
.drill li:nth-child(5) { animation-delay: 280ms; }

.drill-tech {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--line) 55%, transparent);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--text-low);
  animation: node-in 400ms var(--settle) 350ms backwards;
}
.drill-tech strong { color: var(--text-mid); font-weight: 500; }

.s-foot { margin-top: 46px; color: var(--text-mid); }
.s-foot a { color: var(--gold); }
.s-foot a:hover { text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 60%, transparent); }

@media (max-width: 700px) {
  .caption { font-size: 13.5px; }
  .caption-bar { flex-wrap: wrap; }
  .mode-toggle { font-size: 10px; padding: 6px 10px; }
  .drill { top: auto; left: 0; right: 0; width: auto; max-height: 72vh; border-left: none; border-top: 1px solid color-mix(in srgb, var(--scene-accent) 35%, var(--line)); transform: translateY(105%); padding: 64px 22px 28px; }
  .drill.open { transform: translateY(0); }
}