/* FudliGames — Satisfactory landing page: a factory floor you scroll along.
 *
 * One number drives the motion: --belt, a pixel offset scene.js derives from
 * the scroll position. Every conveyor on the page (the hero machine's belt and
 * the full-width line under it) reads it, so scrolling literally moves the
 * production line. On top of that the belts idle at walking pace, which stops
 * under prefers-reduced-motion.
 *
 * Own stylesheet on purpose: landing.css belongs to the Minecraft page and its
 * day/night world. Nothing from it is loaded here.
 */

:root {
  --belt: 0px;               /* conveyor offset, set by scene.js */
  --p: 0;                    /* page progress 0..1, set by scene.js */

  --ink: #f6efe4;
  --ink-soft: #c3cbc6;
  --ink-dim: #8c9893;

  --orange: #ff8a2a;
  --orange-deep: #f06d12;
  --orange-soft: rgba(255, 138, 42, 0.14);
  --yellow: #ffc233;
  --teal: #3fd9c5;
  --teal-soft: rgba(63, 217, 197, 0.14);

  --sky-0: #040c14;
  --sky-1: #08182a;
  --sky-2: #0c2a3a;
  --steel-0: #0e1b20;
  --steel-1: #182a30;
  --steel-2: #24383f;
  --steel-3: #35505a;

  --panel: rgba(9, 22, 27, 0.78);
  --panel-solid: #0b1b20;
  --line: rgba(246, 239, 228, 0.10);
  --line-strong: rgba(246, 239, 228, 0.22);

  --maxw: 1180px;
  --radius: 14px;
  --radius-lg: 22px;

  --display: "Bricolage Grotesque", "Inter Tight", system-ui, sans-serif;
  --sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--sky-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }

.wrap { position: relative; z-index: 2; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 4vw, 40px); }

/* ==========================================================================
   The world — an alien night with a ringed planet and a factory skyline.
   Fixed behind everything; the skyline parallaxes a little with --p. The sky
   itself is a plain deep-blue night; the teal of the planet, the ingots and
   the indicator lights is what makes it another planet.
   ========================================================================== */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.sky { position: absolute; inset: 0; background: linear-gradient(180deg, var(--sky-0) 0%, var(--sky-1) 48%, var(--sky-2) 100%); }
.stars { position: absolute; inset: 0; }
.stars i { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e6f4f1; opacity: 0.55; }
.stars i:nth-child(3n) { opacity: 0.85; }
.stars i:nth-child(4n) { opacity: 0.3; }

.planet {
  position: absolute; right: -8vw; top: 4vh; width: clamp(260px, 40vw, 540px); height: auto;
  opacity: 0.92;
  transform: translateY(calc(var(--p) * -14vh));
}

.skyline {
  position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: auto;
  transform: translateY(calc(var(--p) * 10vh));
}
.skyline .lamp { animation: lamp 3.4s ease-in-out infinite; }
.skyline .lamp:nth-child(2n) { animation-delay: 1.1s; }
.skyline .lamp:nth-child(3n) { animation-delay: 2.3s; }
@keyframes lamp { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ==========================================================================
   Chrome
   ========================================================================== */
.rail {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 60; pointer-events: none;
  transform-origin: 0 50%; transform: scaleX(var(--p));
  background: repeating-linear-gradient(135deg, var(--yellow) 0 10px, var(--steel-0) 10px 20px);
}

.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(4, 20, 26, 0.55);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.is-condensed { background: rgba(4, 20, 26, 0.88); border-bottom-color: var(--line); }
.nav-inner { display: flex; align-items: center; gap: 30px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; letter-spacing: -0.01em; font-size: 18px; }
.brand .logo { width: 26px; height: 26px; }
.nav-links { display: flex; gap: 24px; font-size: 14.5px; color: var(--ink-soft); }
.nav-links a:hover { color: var(--yellow); }
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-right .txt-link { font-size: 14.5px; color: var(--ink-soft); }
.nav-right .txt-link:hover { color: var(--ink); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: 11px; border: 1px solid transparent;
  font-weight: 650; font-size: 14.5px; cursor: pointer; font-family: inherit;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.18s;
}
.btn:active { transform: translateY(1px); }
.btn-orange { background: var(--orange); color: #2a1300; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.7); }
.btn-orange:hover { background: var(--yellow); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: rgba(4, 20, 26, 0.4); }
.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-lg { padding: 15px 26px; font-size: 15.5px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }

.h-display { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; line-height: 0.96; font-size: clamp(40px, 7vw, 84px); margin: 0 0 22px; }
.h-2 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(30px, 4.6vw, 52px); margin: 0 0 18px; }
.lead { color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 18.5px); max-width: 58ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mono { font-family: var(--mono); font-size: 0.92em; color: var(--yellow); }

.chapter { position: relative; z-index: 2; padding: clamp(72px, 10vw, 140px) 0; }
.chapter-head { max-width: 760px; margin-bottom: clamp(34px, 5vw, 54px); }
.chapter-head p + p { margin-top: 12px; }

/* Readability over a sky that is lighter at the bottom: everything after the
   line stands on one continuous dark floor. Only its first edge fades in, so
   adjacent chapters never show a lighter band between them. */
.chapter-floor::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(4, 12, 18, 0.78); }
#ports::before { background: linear-gradient(180deg, rgba(4, 12, 18, 0.2), rgba(4, 12, 18, 0.78) 30%); }
.hero .lead, .hero .h-display { text-shadow: 0 2px 24px rgba(4, 16, 20, 0.6); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 40px); }
.hero-inner { display: grid; grid-template-columns: 1.02fr 0.98fr; gap: clamp(28px, 5vw, 64px); align-items: center; min-height: min(70vh, 620px); }
.hero-hint { margin-top: 34px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-dim); }
.hero-stage { position: relative; }
.hero-stage svg { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.45)); }

/* The machine. The belt groups are nested: the outer one follows the scroll
   offset, the inner one idles. Both shift by whole periods of 192 user units,
   which is why the items are drawn well past both edges. */
.belt-scroll { transform: translateX(var(--belt)); }
.belt-flow { animation: flow 4.2s linear infinite; }
@keyframes flow { from { transform: translateX(-192px); } to { transform: translateX(0px); } }
.gear { transform-box: fill-box; transform-origin: center; animation: spin 9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.led-live { animation: led 1.8s ease-in-out infinite; }
@keyframes led { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.glow { animation: glow 3s ease-in-out infinite; }
@keyframes glow { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ==========================================================================
   The line — a full-width conveyor between hero and the first chapter.
   Crates and ingots are built by scene.js to fill the viewport; they ride on
   the same --belt offset as the machine's belt.
   ========================================================================== */
.line { position: relative; z-index: 2; height: 76px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #06161b; }
.line-belt { position: absolute; left: 0; right: 0; bottom: 14px; height: 22px; background: var(--steel-0); border-top: 1px solid var(--steel-3); border-bottom: 1px solid var(--steel-3); }
.line-belt::before {
  content: ""; position: absolute; inset: 2px -200px;
  background: repeating-linear-gradient(90deg, var(--steel-2) 0 6px, transparent 6px 16px);
  transform: translateX(var(--belt));
  animation: flow 4.2s linear infinite;
}
.line-scroll { position: absolute; left: 0; bottom: 36px; height: 30px; transform: translateX(var(--belt)); }
.line-flow { display: flex; align-items: flex-end; height: 30px; animation: flow 4.2s linear infinite; }
.line-item { flex: none; width: 96px; display: flex; justify-content: center; align-items: flex-end; height: 30px; }
.crate { width: 30px; height: 26px; border-radius: 3px; background: linear-gradient(180deg, #ffb06a 0 15%, var(--orange) 15% 40%, #c9560a 40% 62%, var(--orange) 62%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35); }
.ingot { width: 34px; height: 13px; background: var(--teal); box-shadow: inset 0 3px 0 #9cf3e8, inset 0 -3px 0 #1ea593; clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%); }

/* ==========================================================================
   Figures used by the chapters
   ========================================================================== */
.figure { position: relative; }
.figure svg { width: 100%; height: auto; overflow: visible; }
.figure-ports { max-width: 500px; }
.cable { stroke-dasharray: 10 14; animation: cable 1.6s linear infinite; }
@keyframes cable { to { stroke-dashoffset: -24; } }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.split-text .h-2 { margin-bottom: 16px; }
.split-text p { color: var(--ink-soft); font-size: clamp(15px, 1.5vw, 16.5px); max-width: 52ch; }
.split-text p + p { margin-top: 12px; }

.port-list { list-style: none; display: grid; gap: 10px; margin-top: 22px; }
.port-list li { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-solid); }
.port-list b { font-family: var(--mono); font-weight: 600; font-size: 15px; color: var(--yellow); white-space: nowrap; }
.port-list span { font-size: 14px; color: var(--ink-soft); }

/* ==========================================================================
   Calculator, in a control cabinet
   ========================================================================== */
.cabinet { position: relative; }
.cabinet-edge {
  position: absolute; inset: 14px -10px -22px 10px; z-index: -1;
  border-radius: var(--radius-lg);
  background: rgba(255, 138, 42, 0.08);
  border: 1px solid rgba(255, 138, 42, 0.2);
}
.calc { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 18px; align-items: start; }
.calc-controls, .calc-out {
  padding: 24px;
  border-radius: var(--radius-lg);
}
.calc-controls { border: 1px solid var(--line); background: var(--panel-solid); display: flex; flex-direction: column; gap: 26px; }
.calc-out {
  border: 1px solid rgba(255, 138, 42, 0.35);
  background: #10211f;
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 92px;
}
.calc-out h3 { font-family: var(--sans); font-weight: 500; font-size: 14px; color: var(--ink-soft); }

.calc-tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.calc-tier {
  position: relative; text-align: left; cursor: pointer; color: var(--ink);
  padding: 16px 16px 16px 50px; border-radius: 13px;
  border: 1px solid var(--line); background: rgba(246, 239, 228, 0.03);
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
}
.calc-tier:hover { border-color: var(--line-strong); transform: translateY(-2px); }
.calc-tier.is-active { border-color: rgba(255, 138, 42, 0.55); background: var(--orange-soft); }
.calc-tier b { display: block; font-size: 16px; margin-bottom: 4px; }
.calc-tier.is-active b { color: var(--yellow); }
.tier-note { display: block; font-size: 12.5px; color: var(--ink-soft); line-height: 1.45; }
.tier-icon { position: absolute; left: 16px; top: 17px; width: 22px; height: 22px; color: var(--ink-dim); }
.calc-tier.is-active .tier-icon { color: var(--yellow); }

.calc-field { display: flex; flex-direction: column; gap: 9px; }
.calc-field[hidden] { display: none; }
.calc-field label { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 14px; font-weight: 500; color: var(--ink-soft); }
.calc-val { font-family: var(--mono); font-size: 15px; color: var(--yellow); font-weight: 600; }
.calc-field small { font-size: 12.5px; color: var(--ink-dim); line-height: 1.5; }
.calc.is-247 .note-ondemand, .calc:not(.is-247) .note-247 { display: none; }
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px; border-radius: 999px; outline: none;
  background: rgba(246, 239, 228, 0.16); cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 4px; background: var(--orange);
  border: 3px solid var(--panel-solid);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 4px; background: var(--orange);
  border: 3px solid var(--panel-solid);
}
.calc-field input[type="range"]:focus-visible { outline-offset: 8px; }
@media (min-width: 981px) {
  .calc-controls, .calc-out { padding: 32px; }
  .cta { padding: 70px 60px; }
}

.calc-price { display: flex; align-items: baseline; gap: 8px; }
.calc-price b { display: inline-block; font-family: var(--display); font-size: clamp(34px, 4.4vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.calc-price span { font-size: 14px; color: var(--ink-soft); }
.calc-price.is-bumped b { animation: bump 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes bump { 0% { transform: scale(1.05); } 100% { transform: scale(1); } }
.calc-rate { font-family: var(--mono); font-size: 12.5px; color: var(--ink-dim); }

.calc-break { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.calc-break li { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--ink-soft); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.calc-break li:last-child { border-bottom: none; padding-bottom: 0; }
.calc-break b { color: var(--ink); font-family: var(--mono); font-weight: 500; font-size: 13px; }

.calc-hint { font-size: 13px; line-height: 1.5; color: var(--ink-soft); padding: 12px 14px; border-radius: 10px; background: var(--teal-soft); border: 1px solid rgba(63, 217, 197, 0.28); }
.calc-hint:empty { display: none; }
.calc-stop { font-size: 12.5px; line-height: 1.5; color: var(--ink-dim); }

/* ==========================================================================
   Joining — four stations on one line. A real sequence, hence the numbers.
   ========================================================================== */
.steps { list-style: none; counter-reset: station; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; position: relative; }
.steps::before {
  content: ""; position: absolute; left: 24px; right: 24px; top: 22px; height: 6px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--steel-3) 0 6px, var(--steel-1) 6px 16px);
}
.step { position: relative; counter-increment: station; padding-top: 66px; }
.step::before {
  content: counter(station);
  position: absolute; left: 0; top: 0; width: 50px; height: 50px;
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 20px; color: #2a1300;
  background: var(--orange);
  clip-path: polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%);
}
.step h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.step p { font-size: 14.5px; color: var(--ink-soft); }

/* ==========================================================================
   Machines
   ========================================================================== */
.machines { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.machine {
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--panel-solid); overflow: hidden;
}
.machine.is-on { border-color: rgba(63, 217, 197, 0.35); }
.machine-stage { height: 170px; display: grid; place-items: end center; padding: 0 24px; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.025)); border-bottom: 1px solid var(--line); }
.machine-stage svg { width: 100%; max-width: 230px; height: auto; }
.machine-body { padding: 20px 24px 26px; }
.machine-tag { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink-soft); margin-bottom: 12px; }
.machine-tag b { font-weight: 600; color: var(--ink); }
.machine h3 { font-family: var(--display); font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.machine p { font-size: 14px; color: var(--ink-soft); margin-bottom: 14px; }
.machine ul { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.machine li { font-size: 13.5px; color: var(--ink-dim); padding-left: 16px; position: relative; }
.machine li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; background: var(--steel-3); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.machine.is-on li::before { background: var(--teal); }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.dot.on { background: var(--teal); }
.dot.off { background: var(--ink-dim); }


/* ==========================================================================
   Saves, CTA, footer
   ========================================================================== */
.figure-saves { max-width: 420px; margin: 0 auto; }
.hook { animation: hook 5s ease-in-out infinite; }
@keyframes hook { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(14px); } }

.cta { text-align: center; padding: 44px 24px; border: 1px solid rgba(255, 138, 42, 0.35); border-radius: var(--radius-lg); background: #10211f; }
.cta .lead { margin: 0 auto; }
.cta .actions { justify-content: center; }

.footer { position: relative; z-index: 2; border-top: 1px solid var(--line); padding: 34px 0 46px; background: rgba(4, 16, 20, 0.9); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer-brand { font-family: var(--display); font-weight: 800; }
.footer p { font-size: 13px; color: var(--ink-dim); flex: 1 1 340px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 18px; font-size: 13.5px; color: var(--ink-soft); }
.footer-links a:hover { color: var(--yellow); }

/* ==========================================================================
   Motion, and its off switch
   ========================================================================== */
@media (max-width: 980px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; gap: 18px; }
  .hero-stage { order: -1; max-width: 560px; }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split-figure { order: -1; }
  .figure-ports { max-width: 400px; }
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .steps { grid-template-columns: 1fr; gap: 26px; padding-left: 0; }
  .steps::before { left: 22px; right: auto; top: 24px; bottom: 24px; width: 6px; height: auto; background: repeating-linear-gradient(180deg, var(--steel-3) 0 6px, var(--steel-1) 6px 16px); }
  .step { padding-top: 0; padding-left: 70px; }
  .machines { grid-template-columns: 1fr; }
  .machine-stage { height: 140px; }
}
@media (max-width: 620px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
  .h-display { font-size: clamp(36px, 10.5vw, 48px); }
  .h-2 { font-size: clamp(28px, 8vw, 36px); }
  .calc-tiers { grid-template-columns: 1fr; }
  .actions .btn-lg { flex: 1 1 100%; }
  .line { height: 64px; }
  .hero-hint { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .belt-flow, .line-flow, .line-belt::before, .gear, .led-live, .glow, .cable, .hook, .skyline .lamp, .calc-price.is-bumped b { animation: none !important; }
  .rail { display: none; }
}