/* ============================================================================
   Fibonacci Nautilus — styles
   Colors and finishing amounts live in CSS custom properties. js/config.js
   writes these variables at boot so there is a single source of truth
   (FN.animationConfig). Do not hard-code palette values below this block.
   ============================================================================ */

.fable-nautilus-loader {
  /* Palette — overwritten from js/config.js at boot */
  --fn-bg:          #0a0c10;
  --fn-bg-lift:     #10141b;
  --fn-bg-deep:     #06070a;
  --fn-ink:         #e8e0cd;   /* warm ivory construction lines            */
  --fn-gold:        #c9a86a;   /* antique gold accents                     */
  --fn-xray:        #bcd9ea;   /* pale blue-white x-ray illumination       */
  --fn-dust:        #d9dcd2;   /* neutral particle tone                    */

  /* Finishing amounts — overwritten from js/config.js */
  --fn-grain-opacity:    0.05;
  --fn-vignette-opacity: 0.62;
  --fn-text-opacity:     0.82;

  /* Per-frame scale: world units per CSS pixel. Written by the render loop
     onto the <svg> element; used so hairline strokes keep a constant screen
     weight while the camera zooms. */
  --fn-px: 0.05px;
}

.fable-nautilus-loader,
.fable-nautilus-loader * { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   Stage & preview frames (full window / embedded card / mobile card)
   --------------------------------------------------------------------------- */

.fable-nautilus-loader.fn-stage {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 44%, var(--fn-bg-lift) 0%, var(--fn-bg) 52%, var(--fn-bg-deep) 100%);
  color: var(--fn-ink);
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  -webkit-font-smoothing: antialiased;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 0s linear 360ms;
  contain: layout paint style;
  overflow: hidden;
}

.fable-nautilus-loader[hidden] { display: none; }
.fable-nautilus-loader.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 320ms ease;
}
.fable-nautilus-loader.is-exiting {
  opacity: 0;
  visibility: visible;
  pointer-events: none;
}

.fable-nautilus-loader.is-dev-preview {
  position: fixed;
  z-index: 9998;
}

.fable-loader-dev-controls {
  position: fixed;
  right: 12px;
  bottom: 12px;
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: min(520px, calc(100vw - 24px));
  padding: 8px;
  border: 1px solid rgba(232, 224, 205, 0.2);
  border-radius: 10px;
  background: rgba(6, 7, 10, 0.88);
  backdrop-filter: blur(8px);
}

.fable-loader-dev-controls button {
  padding: 6px 9px;
  border: 1px solid rgba(232, 224, 205, 0.22);
  border-radius: 6px;
  background: rgba(232, 224, 205, 0.08);
  color: #e8e0cd;
  font: 12px/1.2 system-ui, sans-serif;
  cursor: pointer;
}

.fable-loader-dev-controls button:focus-visible {
  outline: 2px solid #c9a86a;
  outline-offset: 2px;
}

.fable-loader-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.fn-frame {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(115% 85% at 50% 42%, var(--fn-bg-lift) 0%, var(--fn-bg) 55%, var(--fn-bg-deep) 100%);
}

/* Full-window preview */
.fn-view-full .fn-frame {
  width: 100%;
  height: 100%;
}

/* Embedded-container preview: how it would sit inside another app */
.fn-view-embed { background: #101014; }
.fn-view-embed .fn-frame {
  width: min(780px, 92vw);
  height: min(500px, 82vh);
  border-radius: 14px;
  border: 1px solid rgba(232, 224, 205, 0.08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* Mobile-size preview */
.fn-view-mobile { background: #101014; }
.fn-view-mobile .fn-frame {
  width: min(390px, 94vw);
  height: min(740px, 88vh);
  border-radius: 26px;
  border: 1px solid rgba(232, 224, 205, 0.10);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ---------------------------------------------------------------------------
   Scene layers
   --------------------------------------------------------------------------- */

.fn-svg, .fn-canvas, .fn-vignette, .fn-grain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.fn-canvas   { pointer-events: none; }
.fn-vignette {
  pointer-events: none;
  background: radial-gradient(90% 78% at 50% 46%,
              rgba(0,0,0,0) 42%,
              rgba(0,0,0,0.14) 68%,
              rgba(3,4,6,var(--fn-vignette-opacity)) 100%);
}
.fn-grain {
  pointer-events: none;
  opacity: var(--fn-grain-opacity);
  mix-blend-mode: overlay;
  background-repeat: repeat;   /* background-image set from JS (generated noise tile) */
}

/* ---------------------------------------------------------------------------
   SVG line-work classes.
   Stroke widths are expressed as calc(var(--fn-px) * N) so they stay N screen
   pixels wide regardless of the camera zoom (viewBox width).
   --------------------------------------------------------------------------- */

.fn-svg { display: block; }

.fn-svg text {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  user-select: none;
}

.fn-stroke-hair   { stroke-width: calc(var(--fn-px) * 1.0); }
.fn-stroke-fine   { stroke-width: calc(var(--fn-px) * 1.3); }
.fn-stroke-line   { stroke-width: calc(var(--fn-px) * 1.7); }
.fn-stroke-hero   { stroke-width: calc(var(--fn-px) * 2.1); }
.fn-stroke-halo   { stroke-width: calc(var(--fn-px) * 7.0); }
.fn-stroke-dot    { stroke-width: calc(var(--fn-px) * 3.4); stroke-linecap: round; }
.fn-stroke-seed   { stroke-width: calc(var(--fn-px) * 2.6); stroke-linecap: round; }

/* Quality: the glow filter is removed in low-quality mode */
.fn-quality-low .fn-filter-glow { filter: none !important; }

/* Hide toggles driven by the developer panel */
.fn-hide-particles    .fn-canvas          { display: none; }
.fn-hide-construction .fn-g-construction,
.fn-hide-construction .fn-g-numbers      { visibility: hidden; }
.fn-hide-shading      .fn-shell-shading  { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Loading text
   --------------------------------------------------------------------------- */

.fn-text {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(26px, 7vh, 72px);
  text-align: center;
  pointer-events: none;
  opacity: var(--fn-text-opacity);
  transition: opacity 600ms ease;
}
.fable-nautilus-loader .fn-text { display: none !important; }
.fn-text.fn-text-hidden { opacity: 0; }

.fn-text-line1 {
  font-style: italic;
  font-size: clamp(14px, 1.9vw, 17px);
  letter-spacing: 0.04em;
  color: var(--fn-ink);
  animation: fn-text-breathe 5.2s ease-in-out infinite;
}
.fn-text-line2 {
  margin-top: 7px;
  font-size: clamp(10px, 1.4vw, 12px);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fn-ink) 52%, transparent);
}

@keyframes fn-text-breathe {
  0%, 100% { opacity: 0.72; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fn-text-line1 { animation: none; }
  .fable-nautilus-loader.fn-stage { transition-duration: 180ms; }
}


/* ---------------------------------------------------------------------------
   Developer panel (built by js/controls.js)
   --------------------------------------------------------------------------- */

.fn-panel-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 40;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(232,224,205,0.22);
  background: rgba(10,12,16,0.72);
  color: var(--fn-ink);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.28;
  transition: opacity 200ms ease;
}
.fn-panel-toggle:hover,
.fn-panel-toggle:focus-visible { opacity: 1; outline: none; }
.fn-panel-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(201,168,106,0.7); }

.fn-panel {
  position: fixed;
  right: 14px;
  bottom: 56px;
  z-index: 41;
  width: 300px;
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  padding: 14px 14px 12px;
  border-radius: 12px;
  border: 1px solid rgba(232,224,205,0.14);
  background: rgba(9, 11, 15, 0.88);
  backdrop-filter: blur(10px);
  font-family: "Segoe UI", system-ui, sans-serif;
  font-size: 12px;
  color: #cfd3da;
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.fn-panel[hidden] { display: none; }

.fn-panel h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fn-gold);
  margin-bottom: 10px;
}
.fn-panel h3 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(207,211,218,0.55);
  margin: 12px 0 6px;
}

.fn-panel .fn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}

.fn-panel button,
.fn-panel select {
  font: inherit;
  color: #dfe3e9;
  background: rgba(232,224,205,0.07);
  border: 1px solid rgba(232,224,205,0.16);
  border-radius: 7px;
  padding: 4px 9px;
  cursor: pointer;
}
.fn-panel button:hover  { background: rgba(232,224,205,0.15); }
.fn-panel button:focus-visible,
.fn-panel select:focus-visible,
.fn-panel input:focus-visible,
.fn-panel label:focus-within {
  outline: none;
  box-shadow: 0 0 0 2px rgba(201,168,106,0.65);
  border-radius: 7px;
}
.fn-panel button[aria-pressed="true"] {
  background: rgba(201,168,106,0.22);
  border-color: rgba(201,168,106,0.55);
  color: #f0e6cf;
}
.fn-panel button:disabled { opacity: 0.4; cursor: default; }

.fn-panel label.fn-check {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 2px;
  cursor: pointer;
  user-select: none;
}
.fn-panel input[type="checkbox"] { accent-color: var(--fn-gold); }
.fn-panel input[type="text"] {
  font: inherit;
  width: 100%;
  color: #dfe3e9;
  background: rgba(232,224,205,0.06);
  border: 1px solid rgba(232,224,205,0.16);
  border-radius: 7px;
  padding: 4px 8px;
  margin-top: 4px;
}

.fn-panel .fn-stats {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(232,224,205,0.10);
  font-family: Consolas, "Cascadia Mono", monospace;
  font-size: 11px;
  line-height: 1.6;
  color: rgba(207,211,218,0.62);
  white-space: pre;
}

.fn-panel .fn-keys {
  margin-top: 8px;
  font-size: 10px;
  line-height: 1.5;
  color: rgba(207,211,218,0.42);
}

.fn-noscript {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fn-ink);
  font-size: 15px;
}