/* Cozysters: the site. It borrows the game's own look (its ink panels, candy buttons and Baloo lettering), so the
   page reads like the game paused on a sheet. Behind everything, the sky runs through a day as you scroll. */
:root {
  --ink: #221d45;
  --ink-raised: #2f2860;
  --panel: rgba(34, 29, 69, 0.9);
  --text: #fff6e6;
  --body: #e4def8;
  --muted: #b8b1da;
  --bulb: #ffd36b;
  --bulb-edge: #c99a2e;
  --mint: #7fe0c4;
  --candy: #ff8fb8;
  --line: rgba(255, 255, 255, 0.13);
  --font: 'Baloo 2', ui-rounded, 'SF Pro Rounded', 'Avenir Next', system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 40px);
  --wide: 1240px;
  /* the sky, set from js/site.js as you scroll (these are the game's midday colors) */
  --sky-top: #4a98e4; --sky-mid: #8cc6ef; --sky-bot: #dceff3; --glow: #fff4d2; --glow-a: 0.3; --glow-x: 50%; --stars: 0;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.55; color: var(--text); background: transparent; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--bulb); outline-offset: 3px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------ the sky */
.sky {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, var(--sky-top), var(--sky-mid) 58%, var(--sky-bot) 93%, color-mix(in srgb, var(--sky-bot), white 20%));
}
/* the glow on the sun's side of the horizon */
.sky .glow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 75% at var(--glow-x) 100%, var(--glow), transparent 70%);
  opacity: var(--glow-a);
}
.sky .stars { position: absolute; inset: 0 0 25%; opacity: var(--stars); background-size: 900px 600px; mask-image: linear-gradient(to bottom, #000 55%, transparent); }

/* ------------------------------------------------ the wordmark, as on the game's main menu */
.sign { margin: 0; line-height: 0; }
.wordmark { width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 30px rgba(20, 8, 30, 0.35)); }
.wordmark text { font-family: var(--font); paint-order: stroke; stroke-linejoin: round; stroke-width: 15px; fill: var(--text); stroke: var(--ink); }
.wordmark .w-cozy { font-family: Pacifico, cursive; font-size: 104px; fill: var(--bulb); }
.wordmark .w-sters { font-size: 114px; font-weight: 800; letter-spacing: -0.01em; }

/* ------------------------------------------------ "coming very soon", on the game's yellow buy button, a size up (and the 404's way home) */
.soon, .home {
  display: inline-block; margin: 0; border-radius: 999px; padding: 13px 30px 10px;
  background: var(--bulb); color: var(--ink); font-weight: 800; font-size: 21px; line-height: 1.2;
  box-shadow: 0 4px 0 var(--bulb-edge), 0 14px 32px rgba(20, 8, 30, 0.35);
}
.home { text-decoration: none; transition: transform 0.08s ease, box-shadow 0.08s ease; }
.home:hover { background: #ffdc85; }
.home:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--bulb-edge), 0 8px 20px rgba(20, 8, 30, 0.35); }
/* under it, quietly, the way to hear when it's out: the Bluesky butterfly, linking to the profile */
.follow { display: block; margin-top: 18px; padding: 4px; line-height: 0; opacity: 0.85; transition: opacity 0.15s ease, transform 0.15s ease; }
.follow:hover { opacity: 1; transform: translateY(-1px); }
.follow svg { width: 30px; height: 30px; fill: currentColor; filter: drop-shadow(0 1px 2px rgba(20, 8, 30, 0.6)) drop-shadow(0 1px 10px rgba(20, 8, 30, 0.45)); }

/* ------------------------------------------------ hero: the park, with the menu over it */
.hero { position: relative; min-height: min(100svh, 1000px); display: grid; place-items: center; overflow: hidden; background: #8cc6ef; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a soft shade behind the words, so they read over any frame of the video */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 45% at 50% 44%, rgba(34, 29, 69, 0.34), transparent 72%), linear-gradient(to bottom, rgba(34, 29, 69, 0.2), transparent 30%);
}
.hero-card { position: relative; z-index: 1; display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter) 6vh; }
.hero .sign { width: min(620px, 88vw); }
.tagline { margin: 6px 0 26px; font-size: clamp(20px, 2.4vw, 27px); font-weight: 700; line-height: 1.25; text-shadow: 0 2px 14px rgba(20, 8, 30, 0.55); }
/* the video's pause and play: just the symbols, the one for what a tap will do */
.motion {
  position: absolute; z-index: 1; right: var(--gutter); bottom: 20px; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%;
  background: var(--panel); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
}
.motion[hidden] { display: none; }
.motion:hover { background: var(--ink-raised); }
.motion svg { display: block; width: 18px; height: 18px; margin: auto; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.motion .i-play, .motion.paused .i-pause { display: none; }
.motion.paused .i-play { display: block; }

/* ------------------------------------------------ the features: a picture from the game beside a sheet of words */
main { display: grid; gap: clamp(90px, 16vh, 170px); padding: clamp(90px, 16vh, 170px) 0 0; }
.feature { width: min(var(--wide), 100% - 2 * var(--gutter)); margin: 0 auto; display: grid; gap: clamp(20px, 3vw, 36px); align-items: center; }
@media (min-width: 960px) {
  .feature { grid-template-columns: 7fr 5fr; }
  .feature.flip { grid-template-columns: 5fr 7fr; }
  .feature.flip .shot { order: 2; }
}
/* a sheet, like the ones the game opens in the corner */
.sheet {
  background: var(--panel); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 22px; padding: clamp(22px, 2.8vw, 34px) clamp(22px, 3vw, 36px);
  box-shadow: 0 18px 50px rgba(8, 5, 25, 0.45);
}
.sheet h2 { margin: 0 0 12px; font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.005em; text-wrap: balance; }
.sheet p { margin: 0 0 12px; color: var(--body); font-size: 18px; max-width: 46ch; text-wrap: pretty; }
.sheet p:last-child { margin-bottom: 0; }
.shot { display: block; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(8, 5, 25, 0.45); }
.shot img { width: 100%; height: auto; }

/* ------------------------------------------------ the finale: night falls on the park */
.night { width: 100%; position: relative; display: grid; place-items: center; margin-top: 40px; }
.night-shot {
  grid-area: 1 / 1; width: 100%; height: auto; min-height: 520px; object-fit: cover;
  /* the picture's own night sky melts into the page's */
  mask-image: linear-gradient(to bottom, transparent, #000 22%);
}
.finale { grid-area: 1 / 1; position: relative; display: grid; justify-items: center; text-align: center; padding: 0 var(--gutter); align-self: start; margin-top: clamp(40px, 12vw, 170px); }
.finale .sign { width: min(440px, 76vw); }
.finale .tagline { margin-top: 0; }
/* the 404 page: the same night, filling the window, with the park along the bottom */
.lost { margin-top: 0; min-height: 100svh; align-items: end; }

.foot { padding: 28px var(--gutter) 40px; text-align: center; background: #040820; }
.foot p { margin: 0; font-size: 14px; color: var(--muted); }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { min-height: 88svh; }
  .soon, .home { font-size: 19px; padding: 12px 26px 9px; }
  .sheet p { font-size: 17px; }
}