/* Rocket Shell Games: studio site. Colours from the studio logo; same pixel family as
   the Airborne Critters site. */

/* Jersey 15 has one weight. Claiming 100-900 stops browsers drawing a smeared fake bold. */
@font-face {
  font-family: "Jersey 15";
  src: url("../fonts/jersey-15-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Jersey 15";
  src: url("../fonts/jersey-15-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Sampled from the studio logo. */
  --space-1: #000c1f;
  --space-2: #00152e;
  --space-3: #0a2a5c;
  --cyan: #22d3f2;
  --cyan-2: #00a8f0;
  --flame: #ff5a1f;
  --flame-2: #ffb02e;
  --shell: #46b02c;
  --paper: #fff7e6;
  --ink: #0b1433;

  --pixel: "Jersey 15", "Courier New", monospace;
  --body: ui-rounded, "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--space-2);
  color: #fff;
  font: 1.125rem/1.6 var(--body);
}
/* Pixel fonts' ligatures can turn letter pairs like "fl" into one odd glyph. The font
   shorthand resets this property, so it needs !important to hold everywhere. */
body, body * { font-variant-ligatures: none !important; }
img { image-rendering: pixelated; max-width: 100%; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; line-height: 1.1; margin: 0 0 .5em; }
h2 { font-size: clamp(2.4rem, 6vw, 3.5rem); }
h3 { font-size: 1.9rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 4px solid var(--flame-2); outline-offset: 3px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
section { padding: 72px 0; }
.lead { font-size: 1.25rem; max-width: 60ch; }
.small { font-size: .95rem; }

.skip {
  position: absolute; left: 16px; top: -100px; z-index: 50;
  background: var(--flame-2); color: var(--ink); padding: 8px 14px; border: 3px solid var(--ink); font-weight: 700;
}
.skip:focus { top: 12px; }

/* ---------- Pixel bits ---------- */

.panel {
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
}
.btn {
  display: inline-block;
  font: 1.5rem/1.1 var(--pixel);
  text-decoration: none;
  color: var(--ink);
  padding: .7em 1.2em;
  border: 4px solid var(--ink);
  box-shadow: 0 6px 0 var(--ink);
  transition: transform .05s, box-shadow .05s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--ink); }
.btn--flame { background: var(--flame-2); }
.chip {
  display: inline-block;
  font: 1.2rem/1 var(--pixel);
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--flame-2); color: var(--ink);
  border: 3px solid var(--ink);
  padding: .35em .6em;
}

/* Sprite sheets: frame size and loop come from art/sprites.css (made from the game's data). */
.sprite {
  --s: 2;
  display: inline-block;
  width: calc(var(--fw) * var(--s) * 1px);
  height: calc(var(--fh) * var(--s) * 1px);
  background-repeat: no-repeat;
  background-size: calc(var(--sw) * var(--s) * 1px) calc(var(--fh) * var(--s) * 1px);
  image-rendering: pixelated;
  animation: sprite-loop var(--t) steps(var(--n)) infinite;
}
@keyframes sprite-loop {
  from { background-position: calc(var(--start) * var(--fw) * var(--s) * -1px) 0; }
  to { background-position: calc((var(--start) + var(--n)) * var(--fw) * var(--s) * -1px) 0; }
}
.s2 { --s: 2; }
.bob { display: inline-block; animation: bob 2.4s ease-in-out infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* ---------- Hero: deep space ---------- */

.hero {
  position: relative; overflow: hidden;
  min-height: clamp(620px, 100svh, 900px);
  display: flex; flex-direction: column;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(34, 211, 242, .28), transparent 55%),
    linear-gradient(var(--space-1), var(--space-2) 55%, var(--space-3));
  border-bottom: 6px solid var(--ink);
}
.stars {
  position: absolute; inset: 0;
  background: url("../art/night/stars.png") 0 0 / 720px auto repeat;
  image-rendering: pixelated;
  opacity: .9;
}
/* A few bigger pixel stars that twinkle. */
.twinkles i {
  position: absolute; width: 6px; height: 6px; background: #fff;
  box-shadow: 0 -6px 0 rgba(255, 255, 255, .6), 0 6px 0 rgba(255, 255, 255, .6),
    -6px 0 0 rgba(255, 255, 255, .6), 6px 0 0 rgba(255, 255, 255, .6);
  animation: twinkle 3s steps(2) infinite;
}
.twinkles i:nth-child(1) { left: 8%;  top: 18%; animation-delay: -.4s; }
.twinkles i:nth-child(2) { left: 22%; top: 62%; animation-delay: -1.6s; }
.twinkles i:nth-child(3) { left: 38%; top: 12%; animation-delay: -2.2s; }
.twinkles i:nth-child(4) { left: 64%; top: 22%; animation-delay: -.9s; }
.twinkles i:nth-child(5) { left: 80%; top: 70%; animation-delay: -2.7s; }
.twinkles i:nth-child(6) { left: 90%; top: 14%; animation-delay: -1.1s; }
.twinkles i:nth-child(7) { left: 12%; top: 84%; animation-delay: -2s; }
.twinkles i:nth-child(8) { left: 54%; top: 88%; animation-delay: -.2s; }
@keyframes twinkle { 50% { opacity: .2; } }

.topbar {
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1100px; width: 100%; margin: 0 auto; padding: 14px 16px;
}
.brand { font: 1.7rem/1 var(--pixel); color: #fff; text-decoration: none; text-shadow: 0 3px 0 var(--ink); }
.topbar ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.topbar ul a {
  display: block; padding: 8px 10px;
  font: 1.45rem/1 var(--pixel); color: var(--cyan); text-decoration: none;
}
.topbar ul a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 520px) {
  .brand { font-size: 1.35rem; }
  .topbar ul a { font-size: 1.25rem; padding: 8px 6px; }
}

.hero-inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 8px 16px 64px;
}
.hero-logo { margin: 0 0 8px; line-height: 0; }
.hero-logo img {
  width: min(460px, 86vw); height: auto;
  image-rendering: auto;
  filter: drop-shadow(0 10px 24px rgba(34, 211, 242, .25));
  animation: bob 4s ease-in-out infinite;
}
.tagline {
  font: clamp(1.7rem, 4.2vw, 2.4rem)/1.15 var(--pixel);
  max-width: 24ch; margin-bottom: .4em;
  text-shadow: 0 4px 0 var(--ink);
}
.made {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font: 1.5rem/1.2 var(--pixel); color: var(--cyan);
}

/* A critter from our first game zooms across space now and then. */
.sky-flyer {
  position: absolute; z-index: 3; left: 0; top: 22%; pointer-events: none;
  animation: fly-across 18s linear infinite;
}
@keyframes fly-across {
  0% { transform: translateX(-200px); }
  60%, 100% { transform: translateX(calc(100vw + 40px)); }
}

/* ---------- Games ---------- */

.games { background: var(--space-3); }
.games h2, .about h2 { text-align: center; text-shadow: 0 5px 0 var(--ink); }
.game-cards { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 28px; }
@media (min-width: 900px) { .game-cards { grid-template-columns: 2fr 1fr; } }
.game { display: grid; overflow: hidden; }
@media (min-width: 640px) { .game:not(.game--next) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.game-logo { width: 100%; height: 100%; object-fit: cover; image-rendering: auto; border-bottom: 4px solid var(--ink); }
@media (min-width: 640px) { .game:not(.game--next) .game-logo { border-bottom: 0; border-right: 4px solid var(--ink); } }
.game-body { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; }
.game-body h3 { font-size: 2.2rem; margin-top: .4em; }
.platforms { font: 1.35rem/1.2 var(--pixel); color: var(--cyan-2); }
.game-body .btn { margin-top: auto; }
.mystery {
  display: grid; place-items: center; min-height: 200px;
  background: repeating-linear-gradient(45deg, var(--space-2) 0 16px, var(--space-3) 16px 32px);
  border-bottom: 4px solid var(--ink);
}
.mystery span { font: 7rem/1 var(--pixel); color: var(--flame-2); text-shadow: 0 6px 0 var(--ink); animation: bob 2s ease-in-out infinite; }

/* ---------- About ---------- */

.about .lead { margin: 0 auto 8px; text-align: center; }
.values { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 24px; }
@media (min-width: 760px) { .values { grid-template-columns: repeat(3, 1fr); } }
.values li { padding: 22px; }
.values img, .values .leaf { width: 40px; height: 40px; margin-bottom: 10px; }

/* ---------- Contact ---------- */

.contact { background: var(--space-1); }
.contact-inner { max-width: 760px; margin: 0 auto; padding: 28px; text-align: center; }
.contact-inner a { color: var(--cyan-2); font-weight: 700; }

/* ---------- Footer ---------- */

.footer { background: var(--ink); color: var(--paper); padding: 32px 0; border-top: 6px solid var(--space-1); }
.footer-inner { display: grid; gap: 10px; justify-items: center; text-align: center; }
.footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; font: 1.35rem/1 var(--pixel); }
.copy { font-size: .85rem; opacity: .75; margin: 0; max-width: 60ch; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-play-state: paused !important; transition: none !important; }
}