/* Tiny Planet Airship Captain: the website. One page whose sky runs through a day, from early
   morning at the top to night at the bottom, with everything on it a postcard. */

@font-face { font-family: 'Amarante'; src: url('fonts/amarante-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('fonts/figtree-var.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('fonts/caveat-var.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }

:root {
  --navy: #1b2e69;        /* the top bar and the early sky */
  --ink: #14284f;         /* text on the light skies */
  --deep: #06103a;        /* outlines and hard shadows */
  --amber: #f2b233;       /* the call to action, the flight line */
  --red: #b5543c;         /* the ship's trim */
  --sea: #1d5a8e;
  --cream: #fbe9d2;       /* text at dusk */
  --title: 'Amarante', Georgia, serif;
  --body: 'Figtree', 'Segoe UI', system-ui, sans-serif;
  --hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --ship: 72px;           /* the ship's width on the flight line */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: #040b2a; color: var(--ink);
  font-family: var(--body); font-size: 20px; line-height: 1.55;
  overflow-x: clip;       /* the tilted cards poke out; not `hidden`, which would unstick the line */
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, p, figure { margin: 0; }

/* --- The title, which scrolls away -------------------------------------------------------- */
.masthead { background: var(--navy); padding: 20px 24px 0; }
.title { max-width: 1180px; margin: 0 auto; }
.title svg { display: block; width: 100%; overflow: visible; }
.title text {
  font-family: var(--title); font-size: 84px; fill: #fff;
  stroke: #0c1740; stroke-width: 10px; stroke-linejoin: round; paint-order: stroke;
}

/* --- The flight line, which stays ---------------------------------------------------------- */
.flightline {
  --p: 0;
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 14px;
  padding: 8px clamp(12px, 2.4vw, 36px);
  background: var(--navy); box-shadow: 0 4px 0 rgba(6, 16, 58, .35);
}
.track { flex: 1; min-width: 0; position: relative; height: 44px; color: var(--amber); }
.track::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  border-top: 3px dotted currentColor; opacity: .75;
}
.ship {
  position: absolute; top: 3px; width: var(--ship); height: 38px;
  left: calc(var(--p) * (100% - var(--ship)));
  background: var(--navy);            /* hides the dots behind the ship */
  fill: none; stroke: currentColor; stroke-width: 1.4;
}
.ship ellipse { fill: var(--navy); }
.ship rect { fill: currentColor; stroke: none; }

/* --- Buttons ------------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 56px; padding: 0 30px;
  font: 700 19px/1.2 var(--body); text-decoration: none; cursor: pointer;
  background: var(--amber); color: var(--deep);
  border: 2px solid var(--deep); border-radius: 10px; box-shadow: 5px 5px 0 var(--deep);
  transition: transform .12s, box-shadow .12s;
}
.btn.alt { background: #fff; color: var(--ink); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 16px; box-shadow: 3px 3px 0 var(--deep); }
a.btn:hover, .card:hover .btn, button.btn:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--deep); }
a.btn:active, button.btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--deep); }
/* Not on Steam yet (config.js): the button stays, but is no link. */
.soon, .soon .btn { cursor: default; }
.btn.soon, .soon .btn { background: #fff; color: var(--ink); }
.btn.soon:hover, .card.soon:hover .btn { transform: none; box-shadow: 5px 5px 0 var(--deep); }
.btn.small.soon:hover { box-shadow: 3px 3px 0 var(--deep); }

:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.sky:not(.dusk):not(.night) :focus-visible { outline-color: var(--deep); }

/* --- Postcards ----------------------------------------------------------------------------- */
.card {
  display: flex; flex-direction: column; gap: 10px;
  background: #fff; color: var(--ink); padding: 14px 14px 12px;
  text-decoration: none; transform: rotate(var(--tilt, 0deg));
  box-shadow: 9px 11px 0 var(--drop, var(--deep));
  transition: transform .18s;
}
.card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
a.card:not(.soon):hover { transform: rotate(0deg) scale(1.015); }
.caption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; min-height: 48px; }
.hand { font-family: var(--hand); font-weight: 600; font-size: 31px; line-height: 1.1; }
.tilt-a { --tilt: -2deg; }  .tilt-b { --tilt: 1.5deg; }  .tilt-c { --tilt: 1deg; }
.tilt-d { --tilt: -1.5deg; } .tilt-e { --tilt: 2deg; }   .tilt-f { --tilt: -2.5deg; }
.shadow-amber { --drop: var(--amber); } .shadow-red { --drop: var(--red); }
.shadow-navy { --drop: #0c1740; }       .shadow-sea { --drop: var(--sea); }

.frame { position: relative; display: block; }
.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 88px; height: 88px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--amber); color: var(--deep);
  border: 3px solid var(--deep); box-shadow: 5px 5px 0 var(--deep);
}
.play svg { width: 32px; height: 32px; fill: currentColor; }

/* --- The sky, section by section. Each one fades in from the one above it. ----------------- */
.sky { padding: 104px 32px 96px; }
.morning {
  padding: 52px 28px 120px;
  background: linear-gradient(180deg, #1b2e69 0%, #2a4d8f 26%, #5d8fc9 64%, #a9c9e6 100%);
  display: flex; flex-direction: column; align-items: center; gap: 60px;
}
.dawn { background: linear-gradient(180deg, #a9c9e6 0, #f1b9a0 110px, #f7dcc6 240px); }
.noon { background: linear-gradient(180deg, #f7dcc6 0, #a9d3f0 150px); }
.dusk { background: linear-gradient(180deg, #a9d3f0 0, #7a5a8c 130px, #3d2a55 260px); color: var(--cream); }
.night { background: linear-gradient(180deg, #3d2a55 0, #1a1f4a 130px, #101a40 280px); color: #fff; }

/* --- The four cards at the top ------------------------------------------------------------- */
.cards { width: 100%; max-width: 1200px; display: flex; flex-wrap: wrap; justify-content: center; }
.cards.top { gap: 48px 56px; }
.cards.top .card { flex: 1 1 340px; max-width: 572px; padding: 16px 16px 14px; gap: 12px; box-shadow: 10px 12px 0 var(--drop); }
.cards.bottom { gap: 48px 72px; }
.cards.bottom .card { flex: 0 1 480px; }
.cards.bottom .hand { font-size: 27px; }

/* --- The three statements ------------------------------------------------------------------ */
.pair { max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 48px 80px; }
.pair.flip { flex-direction: row-reverse; }
.words { flex: 1 1 360px; display: flex; flex-direction: column; gap: 18px; }
.words p { max-width: 460px; }
.pair .card { flex: 0 1 500px; min-width: 0; }
.pair .card img { aspect-ratio: 3 / 2; }
h2 { font-family: var(--title); font-weight: 400; font-size: clamp(38px, 4.4vw, 60px); line-height: 1.05; text-wrap: balance; }

/* --- Night: the closing call ---------------------------------------------------------------- */
.closing { display: flex; flex-direction: column; align-items: center; gap: 26px; text-align: center; padding: 110px 32px; }
.closing .card { width: 100%; max-width: 460px; margin-bottom: 14px; text-align: left; }
.closing .card img { aspect-ratio: 3 / 2; }
.closing h2 { font-size: clamp(40px, 5vw, 66px); }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 20px; }
.night .btn { box-shadow: 5px 5px 0 #3b4c93; }
.night a.btn:hover { box-shadow: 6px 6px 0 #3b4c93; }
.platforms { font-size: 16px; color: #b6c1e0; }

/* --- Footer --------------------------------------------------------------------------------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px;
  padding: 20px 32px; background: #040b2a; color: #aab6d8; font-size: 15px;
}
.foot nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.foot a { display: inline-flex; align-items: center; min-height: 44px; color: #fff; }

/* --- The trailer's overlay ------------------------------------------------------------------ */
.trailer {
  width: min(1180px, 100vw - 24px); max-width: none; max-height: none;
  padding: 12px; border: 0; background: #fff; color: var(--ink);
  box-shadow: 12px 14px 0 var(--amber);
}
.trailer::backdrop { background: rgba(4, 11, 42, .88); }
.trailer video { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: calc(100vh - 110px); background: var(--deep); }
.trailer-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 10px; }

/* --- The legal pages (impressum.html, privacy.html) ----------------------------------------- */
.legal { background: #101a40; color: #dfe6f7; min-height: 100vh; display: flex; flex-direction: column; }
.legal .back { display: block; padding: 20px 32px; background: var(--navy); color: #fff; font-family: var(--title); font-size: 24px; text-decoration: none; }
.legal main { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 56px 32px 72px; font-size: 18px; }
.legal h1 { font-family: var(--title); font-weight: 400; font-size: clamp(36px, 5vw, 52px); line-height: 1.1; margin-bottom: 28px; color: #fff; }
.legal h2 { font-size: 28px; margin: 36px 0 10px; color: #fff; }
.legal p { margin-bottom: 14px; }
.legal mark { background: var(--amber); color: var(--deep); padding: 0 4px; border-radius: 3px; }

/* --- Small screens --------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .cards.top, .cards.bottom { gap: 40px 36px; }
  .cards.bottom .card { flex-basis: 340px; }
  .pair { gap: 40px; }
  .words { flex-basis: 260px; }
  .pair .card { flex-basis: 380px; }
}
@media (max-width: 720px) {
  body { font-size: 18px; }
  .masthead { padding: 14px 12px 0; }
  .sky { padding: 72px 20px 64px; }
  .morning { padding: 36px 20px 84px; gap: 44px; }
  .cards.top, .cards.bottom { gap: 40px; }
  .hand { font-size: 27px; }
  .play { width: 68px; height: 68px; }
  .btn { min-height: 52px; padding: 0 22px; font-size: 18px; }
  .closing { padding: 84px 20px; }
  .foot { padding: 16px 20px; }
}
/* A phone on its side: little height, so the line and the title take less of it. */
@media (max-height: 480px) {
  :root { --ship: 56px; }
  .masthead { padding-top: 8px; }
  .title { max-width: 620px; }
  .flightline { padding-block: 4px; }
  .track { height: 36px; }
  .ship { top: 3px; height: 30px; }
  .btn.small { min-height: 36px; }
  .morning { padding-top: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .card { transition: none; }
}