/* FudliGames Palworld landing — a sunny island you scroll through.
 *
 * The page hangs off one custom property, --t, which scene.js sets from the
 * scroll position: 0 is sunrise, 1 is midday. The sun climbs, the warm dawn
 * veil fades and the base in the hero picks up its work (furnace glow, smoke).
 * Everything that changes with the time of day reads that one number.
 *
 * Its own stylesheet on purpose: the Minecraft landing is a dark night-fall
 * world, this one is bright daylight, and neither should inherit the other's
 * palette by accident. The calculator hooks (data-calc, data-in, data-out) are
 * shared with pricing-calculator.js; the class names are not.
 */

:root {
  --t: 0;                       /* 0 = sunrise, 1 = midday. Set by scene.js. */

  --ink: #10303f;
  --ink-soft: #2b4556;
  --ink-dim: #3f5d6d;           /* only on paper panels: too light for the open sky */
  --coral: #ff6a3d;
  --coral-deep: #f0582b;
  --coral-ink: #2a1208;
  --gold: #ffd34d;
  --sea: #149fc4;
  --sea-deep: #0b6f8f;
  --grass: #4faf3c;

  --paper: rgba(255, 255, 255, 0.85);
  --paper-strong: rgba(255, 255, 255, 0.92);
  --line: rgba(16, 48, 63, 0.12);
  --line-strong: rgba(16, 48, 63, 0.24);

  --maxw: 1180px;
  --pad: clamp(18px, 4vw, 40px);
  --radius: 16px;
  --radius-lg: 24px;

  --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: #a6dcff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
:focus-visible { outline: 3px solid var(--sea-deep); outline-offset: 3px; border-radius: 8px; }
:focus:not(:focus-visible) { outline: none; }

.wrap { position: relative; z-index: 2; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ==========================================================================
   The world: sky, sun, clouds and a sea at the bottom of every viewport.
   Fixed, so the island illustrations float over one continuous morning.
   ========================================================================== */
.world { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.world-sky {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #74c6f6 0%, #a9dfff 40%, #dff3ff 74%, #f2fbff 100%);
}
/* Dawn lives at the horizon only: a warm band rising from the bottom of the
   viewport that thins as the sun climbs. The blue stays blue up top. Tinting
   the whole sky orange would mix into grey halfway through the fade, which is
   the muddy crossfade the Minecraft page also avoids. */
.world-dawn {
  position: absolute; inset: 0;
  opacity: calc(1 - var(--t));
  background: linear-gradient(0deg, rgba(255, 170, 110, 0.5) 0%, rgba(255, 200, 150, 0.36) 30%, rgba(255, 230, 190, 0.18) 55%, rgba(255, 240, 215, 0) 78%);
}
/* A flat two-tone disc, like the rest of the artwork; no halo. */
.sun {
  position: absolute; left: 70%; top: calc(46% - var(--t) * 30%);
  width: 128px; height: 128px; margin: -64px 0 0 -64px; border-radius: 50%;
  background: radial-gradient(circle, #fff8d0 0 58%, #ffd34d 60% 100%);
}
.clouds { position: absolute; inset: 0; transform: translateY(calc(var(--t) * -36px)); }
.cloud {
  position: absolute; width: 190px; height: 54px; border-radius: 999px;
  background: #fff; opacity: 0.92;
  animation: drift var(--d, 80s) linear infinite;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}
.cloud::before, .cloud::after { content: ""; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 76px; height: 76px; left: 30px; top: -38px; }
.cloud::after { width: 54px; height: 54px; left: 96px; top: -24px; }
.c1 { top: 11%; --d: 92s; --s: 1; }
.c2 { top: 24%; --d: 120s; --delay: -48s; --s: 0.7; opacity: 0.8; }
.c3 { top: 6%;  --d: 140s; --delay: -90s; --s: 0.55; opacity: 0.7; }
.c4 { top: 34%; --d: 105s; --delay: -20s; --s: 0.85; }
.c5 { top: 18%; --d: 160s; --delay: -130s; --s: 0.45; opacity: 0.65; }
@keyframes drift {
  from { transform: translateX(-30vw) scale(var(--s, 1)); }
  to { transform: translateX(115vw) scale(var(--s, 1)); }
}
.world-sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 15vh; min-height: 80px;
  background: #1aa9c9;
}
.world-sea::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 22vh;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(214, 246, 255, 0.55) 100%);
}
/* The scalloped edge is a small repeating SVG, flat like the rest of the art. */
.swell {
  position: absolute; left: 0; right: 0; top: -12px; height: 14px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 14'%3E%3Cpath d='M0 14C0 6 8 2 22 2s22 4 22 12z' fill='%232cc4de'/%3E%3C/svg%3E") repeat-x 0 0 / 44px 14px;
  animation: swell 7s linear infinite;
}
.swell.s2 { top: -5px; opacity: 0.55; background-size: 60px 14px; animation-duration: 11s; animation-direction: reverse; }
@keyframes swell { to { background-position-x: 44px; } }

/* ==========================================================================
   Chrome
   ========================================================================== */
.scroll-rail {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--coral), var(--gold));
  pointer-events: none;
}
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.nav.is-condensed { background: rgba(255, 255, 255, 0.82); 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.02em; font-size: 18px; }
.brand .logo { width: 26px; height: 26px; border-radius: 7px; }
.nav-links { display: flex; gap: 24px; font-size: 14.5px; font-weight: 500; color: var(--ink-soft); }
.nav-links a:hover { color: var(--sea-deep); }
.nav-right { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-right .txt-link { font-size: 14.5px; font-weight: 500; 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: 11px 18px; border-radius: 12px; 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-coral { background: var(--coral); color: var(--coral-ink); box-shadow: 0 12px 24px -14px rgba(0, 0, 0, 0.3); }
.btn-coral:hover { background: var(--coral-deep); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover { background: #1b4356; }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: rgba(255, 255, 255, 0.55); }
.btn-ghost:hover { border-color: var(--sea-deep); color: var(--sea-deep); background: rgba(255, 255, 255, 0.8); }
.btn-lg { padding: 14px 24px; font-size: 15.5px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-block { width: 100%; }

h1, h2, h3 { font-family: var(--display); }
.h-display { font-weight: 800; letter-spacing: -0.03em; line-height: 0.96; font-size: clamp(40px, 6vw, 78px); margin: 0 0 22px; }
.h-2 { font-weight: 800; letter-spacing: -0.025em; line-height: 1.02; font-size: clamp(30px, 4.8vw, 52px); margin: 0 0 18px; }
.hl { color: var(--sea-deep); }
.lead { color: var(--ink-soft); font-size: clamp(16px, 1.7vw, 18px); max-width: 58ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.chapter { position: relative; z-index: 2; padding: clamp(64px, 10vw, 140px) 0; }
.chapter-head { max-width: 760px; margin-bottom: 46px; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero { padding-top: clamp(28px, 6vw, 72px); padding-bottom: clamp(40px, 7vw, 100px); }
.hero-inner { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: 70vh; }
.hero-hint { margin-top: 30px; font-size: 13.5px; color: var(--ink-soft); }
.hero-stage { position: relative; width: 100%; aspect-ratio: 900 / 560; }
.hero-stage svg { width: 100%; height: 100%; overflow: visible; }

/* The island's moving parts. Transforms on SVG groups use the group's own box
   as origin, so a windmill spins around its hub and a creature hops from its
   feet rather than from the page corner. */
.isle .mill-blades { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite; }
.isle .float { transform-box: fill-box; transform-origin: center; animation: bob 7s ease-in-out infinite; }
.isle .critter-main { transform-box: fill-box; transform-origin: center bottom; animation: hop 3.4s ease-in-out infinite; }
.isle .critter-sea { transform-box: fill-box; transform-origin: center; animation: bob 5.2s ease-in-out infinite; animation-delay: -2s; }
.isle .birds { transform-box: fill-box; transform-origin: center; animation: glide 18s ease-in-out infinite alternate; }
.wave.w1 { animation: wave1 9s linear infinite; }
.wave.w2 { animation: wave2 14s linear infinite reverse; }
/* The base wakes shortly after the hero has landed: ember, glow and smoke
   fade in on a timer rather than with --t, because on a phone the island has
   scrolled away before any scroll-driven value gets anywhere. */
.isle .ember, .isle .ember-glow, .isle .smoke { opacity: 0; animation: wake 1.6s ease-out 1.4s forwards; }
@keyframes wake { to { opacity: 1; } }
.isle .smoke circle { transform-box: fill-box; transform-origin: center; animation: puff 4.2s ease-out infinite; }
.isle .smoke circle:nth-child(2) { animation-delay: -1.4s; }
.isle .smoke circle:nth-child(3) { animation-delay: -2.8s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(8px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 42% { transform: translateY(-10px) scale(0.96, 1.04); } 60% { transform: translateY(0) scale(1.04, 0.96); } }
@keyframes glide { from { transform: translate(0, 0); } to { transform: translate(-40px, 14px); } }
@keyframes wave1 { to { transform: translateX(100px); } }
@keyframes wave2 { to { transform: translateX(120px); } }
@keyframes puff {
  0% { transform: translateY(0) scale(0.5); opacity: 0; }
  25% { opacity: 0.9; }
  100% { transform: translateY(-70px) scale(1.6); opacity: 0; }
}

/* ==========================================================================
   Hosts: one paper slab, three machines drawn to the same scale
   ========================================================================== */
.hosts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  padding: 32px 24px;
  border-radius: var(--radius-lg); background: var(--paper); border: 1px solid rgba(255, 255, 255, 0.7);
}
.host { display: flex; flex-direction: column; gap: 16px; padding: 0 clamp(12px, 2vw, 26px); }
.host + .host { border-left: 1px solid var(--line); }
.host-fig { width: 136px; height: 170px; }
.host h3 { font-size: 21px; font-weight: 800; margin-bottom: 4px; }
.host-size { font-size: 14px; font-weight: 600; color: var(--sea-deep); margin-bottom: 10px; }
.host-body p:last-child { font-size: 14.5px; color: var(--ink-soft); }
.aside-note { max-width: 60ch; margin-top: 26px; font-size: 15px; color: var(--ink-soft); }

/* ==========================================================================
   Calculator
   ========================================================================== */
.calc { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 18px; align-items: start; }
.calc-controls, .calc-out {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-lg);
}
.calc-controls {
  border: 1px solid rgba(255, 255, 255, 0.7); background: var(--paper);
  display: flex; flex-direction: column; gap: 26px;
}
.calc-out {
  border: 1px solid rgba(255, 193, 60, 0.5);
  background: linear-gradient(180deg, rgba(255, 211, 77, 0.3), var(--paper-strong) 42%);
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 92px;
}
.calc-tier {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 16px; border-radius: 14px;
  background: rgba(255, 211, 77, 0.22); border: 1px solid rgba(240, 170, 40, 0.4);
}
.calc-tier b { display: block; font-size: 16px; margin-bottom: 3px; }
.calc-tier span { display: block; font-size: 13px; color: var(--ink-soft); line-height: 1.45; }
.tier-sun { flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: radial-gradient(circle, #fff8d0 0 34%, #ffd34d 36% 100%); border: 2px solid #fff; }

.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: 14.5px; font-weight: 600; }
.calc-val { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--sea-deep); }
.calc-field small { font-size: 12.5px; color: var(--ink-dim); }
.calc-field input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px; outline: none;
  background: rgba(16, 48, 63, 0.16); cursor: pointer;
}
.calc-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%; background: var(--coral);
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.calc-field input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px; border-radius: 50%; background: var(--coral);
  border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.calc-field input[type="range"]:focus-visible { outline-offset: 6px; }

.calc-title { font-size: 14px; font-weight: 600; color: var(--ink-soft); }
.calc-price { display: flex; align-items: baseline; gap: 8px; }
.calc-price b { display: inline-block; font-family: var(--display); font-size: clamp(36px, 4.6vw, 50px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.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); } 35% { transform: scale(1.045); } 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: 14px; 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-size: 13px; }
.calc-note { font-size: 13.5px; line-height: 1.5; color: var(--ink); padding: 12px 14px; border-radius: 12px; background: #e4f3f9; border: 1px solid #b9dfec; }

/* ==========================================================================
   Join and panel chapters: copy beside an illustration
   ========================================================================== */
.join-inner, .panel-inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.join-stage svg, .panel-stage svg { width: 100%; height: auto; overflow: visible; }
.facts { margin-top: 30px; }
.facts > div { display: grid; grid-template-columns: minmax(130px, 0.6fr) 1.4fr; gap: 6px 22px; padding: 15px 0; border-top: 1px solid var(--line-strong); }
.facts > div:last-child { border-bottom: 1px solid var(--line-strong); }
.facts dt { font-weight: 700; font-size: 15.5px; }
.facts dd { font-size: 14.5px; color: var(--ink-soft); }

.jetty .boat { transform-box: fill-box; transform-origin: center bottom; animation: rock 5.5s ease-in-out infinite; }
.jetty .critter-wave .arm { transform-box: fill-box; transform-origin: left bottom; animation: wave-arm 1.8s ease-in-out infinite; }
.camp .zz { animation: zz 3.2s ease-in-out infinite; }
.camp .critter-sleep { transform-box: fill-box; transform-origin: center bottom; animation: breathe 3.2s ease-in-out infinite; }
@keyframes rock { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-5px); } }
@keyframes wave-arm { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-28deg); } }
@keyframes zz { 0% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-10px); } }
@keyframes breathe { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.03, 0.97); } }

/* ==========================================================================
   CTA, footer
   ========================================================================== */
.cta {
  text-align: center; padding: 64px 48px;
  border: 1px solid rgba(255, 193, 60, 0.5); border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 211, 77, 0.3), var(--paper-strong) 60%);
}
.cta .lead { margin: 0 auto; }
.cta .actions { justify-content: center; }
.chapter-cta { padding-bottom: clamp(80px, 12vw, 160px); }

.footer { position: relative; z-index: 2; padding: 34px 0 46px; background: rgba(16, 48, 63, 0.92); color: #d9e9f0; }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer-brand { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; color: #fff; }
.footer p { font-size: 13px; color: #b7cdd8; flex: 1 1 340px; }
.footer-links { display: flex; gap: 18px; font-size: 13.5px; color: #d9e9f0; }
.footer-links a:hover { color: var(--gold); }

/* ==========================================================================
   Motion, and its off switch
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.fx-armed [data-reveal],
  html.fx-armed [data-hero] { opacity: 0; }
}

/* ==========================================================================
   Phones and narrow screens: the island goes full-bleed above the headline,
   the hosts become a list with the figure beside the text, the calculator
   stacks, and the price panel stops sticking.
   ========================================================================== */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; min-height: auto; gap: 14px; }
  .hero-stage { order: -1; width: calc(100% + 2 * var(--pad)); margin: 0 calc(-1 * var(--pad)); aspect-ratio: 900 / 540; }
  .hero-stage svg { padding: 0 2px; }
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
  .hosts { grid-template-columns: 1fr; gap: 8px; padding: 10px 18px; }
  .cta { padding: 44px 22px; }
  .host { display: grid; grid-template-columns: 92px 1fr; gap: 16px; align-items: center; padding: 14px 0; }
  .host + .host { border-left: none; border-top: 1px solid var(--line); }
  .host-fig { width: 92px; height: 116px; }
  .join-inner, .panel-inner { grid-template-columns: 1fr; }
  .panel-stage { order: 2; max-width: 460px; }
  .join-stage { max-width: 560px; }
  .facts > div { grid-template-columns: 1fr; gap: 3px; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .nav-inner { gap: 16px; }
  .h-display { font-size: clamp(36px, 10.6vw, 50px); }
  .h-2 { font-size: clamp(28px, 8vw, 38px); }
  .c4, .c5 { display: none; }
  /* On a phone the island sits at the top, so the sun rises behind its right
     end and, risen, tucks in between the nav and the headings. */
  .sun { width: 76px; height: 76px; margin: -38px 0 0 -38px; left: 86%; top: calc(26% - var(--t) * 14%); }
  .actions .btn-lg { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cloud, .swell, .isle *, .wave, .jetty *, .camp *, .calc-price.is-bumped b { animation: none !important; }
  .isle .ember, .isle .ember-glow, .isle .smoke { opacity: 1; }
  html.fx-armed [data-reveal],
  html.fx-armed [data-hero] { opacity: 1 !important; }
  .scroll-rail { display: none; }
}