/* ---------------------------------------------------------------
   Canvas - the Prezi-style zooming world.
   #stage is the fixed viewport window. #world is the pannable/
   zoomable layer whose CSS transform is driven by js/camera.js.

   Two layouts (html[data-layout]):
   - desktop: every .frame is a fixed 1600x900 canvas; the camera
     scales it to fit. No internal scrolling.
   - compact: every .frame is exactly the viewport size at 1:1
     scale, content reflows vertically, and a frame may scroll
     internally if its content is taller than the screen.
   --frame-w / --frame-h are set by camera.js.
--------------------------------------------------------------- */

html, body { height: 100%; overflow: hidden; }

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);   /* letterbox follows the current frame's theme */
  transition: background var(--dur-med) var(--ease-soft);
}

#world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  will-change: transform;
}

.frame {
  position: absolute;
  width: var(--frame-w);
  height: var(--frame-h);
  box-sizing: border-box;
  padding: var(--frame-pad-top) var(--frame-pad-x) var(--frame-pad-bottom);
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
html[data-layout="compact"] .frame {
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  scrollbar-width: none;
}
html[data-layout="compact"] .frame::-webkit-scrollbar { display: none; }

.frame__stage {
  position: relative;
  z-index: 2;
  width: 100%;
  margin-block: auto;   /* centers when short, never clips when tall */
}

.frame__bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
html[data-layout="compact"] .frame__bg { position: fixed; width: 100%; height: 100%; }

.frame__header { margin-bottom: var(--space-md); }
.frame__header .eyebrow { display: block; margin-bottom: var(--space-xs); }
.frame__title { font-size: var(--fs-h1); line-height: 1.03; margin-bottom: var(--space-sm); }
.frame__title--md { font-size: var(--fs-h2); }

/* -----------------------------------------------------------
   HUD - fixed chrome above the world, unaffected by the camera.
----------------------------------------------------------- */
.hud { position: fixed; inset: 0; z-index: var(--z-hud); pointer-events: none; }
.hud > * { pointer-events: auto; }

.hud__counter {
  position: fixed;
  top: 28px;
  right: 32px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg-1);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 999px;
  transition: background var(--dur-med) var(--ease-soft), color var(--dur-med) var(--ease-soft), border-color var(--dur-med);
}
.hud__counter span { opacity: 0.6; }

.navarrow {
  position: fixed;
  bottom: 32px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--bg-1);
  border: 1px solid var(--border-strong);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), border-color var(--dur-fast), background var(--dur-med), color var(--dur-med);
}
.navarrow:hover { transform: scale(1.08); border-color: var(--blue); color: var(--blue); }
.navarrow:disabled { opacity: 0.3; pointer-events: none; }
.navarrow svg { width: 18px; height: 18px; }
.navarrow--prev { right: 92px; }
.navarrow--next { right: 32px; }

.hud__hint {
  position: fixed;
  bottom: 42px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
  transition: opacity 0.6s;
  white-space: nowrap;
}
.hud__hint.is-hidden { opacity: 0; pointer-events: none; }

html[data-layout="compact"] .hud__counter { top: 18px; right: 16px; }
html[data-layout="compact"] .navarrow {
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 52px; height: 52px;
}
html[data-layout="compact"] .navarrow--prev { left: 16px; right: auto; }
html[data-layout="compact"] .navarrow--next { right: 16px; }
html[data-layout="compact"] .hud__hint { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 18px); font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
  .navarrow, .hud__counter { transition: none; }
}