@font-face {
  font-family: "Jersey 10";
  src: url("assets/Jersey10-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/*
  Palette: the haze is the town's own sky (#a9d5ef), lifted a touch; text is
  the plum of the logo's outline; the status pixel is the logo's star.
*/
:root {
  color-scheme: light;
  --mist: #bcdcee;
  --mist-rgb: 188 220 238;
  --plum: #3b2142;
  --plum-soft: #553f5c;
  --star: #f7c948;
  --rose: #f29bb6;
  --edge: clamp(16px, 3vw, 44px);
  --column: min(460px, 40vw);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --dissolve: cubic-bezier(.45, 0, .55, 1);
  --haze-mask: linear-gradient(90deg, #000 0%, #000 31%, rgb(0 0 0 / .55) 44%, transparent 60%);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--mist); }
body {
  margin: 0;
  background: var(--mist);
  color: var(--plum);
  font-family: "Jersey 10", "Arial Narrow", sans-serif;
  font-size: 20px;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
::selection { background: var(--rose); color: var(--plum); }

/* One screen: content centred in its column, the footer on the bottom edge. */
.hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
}

/*
  The town, drawn slightly larger than the screen so the parallax never shows an
  edge. It is one compositor layer that only ever moves: nothing in it is redrawn
  while the logo floats or the pointer drifts.
*/
.hero-scene {
  position: absolute;
  z-index: -3;
  inset: -24px;
  transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0);
  transition: transform 1.1s var(--ease);
  will-change: transform;
  animation: scene-in 1.6s var(--ease) both;
}
.hero-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
@keyframes scene-in {
  from { opacity: 0; scale: 1.035; }
  to { opacity: 1; scale: 1; }
}

/*
  The town alive: an idle loop over the still, whose first frame it is, so it takes
  over without a jump. Shown only once it really plays.
*/
.hero-town {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
  opacity: 0;
}
.hero-town.is-live { opacity: 1; }

/*
  The tilt-shift: a blurred copy of the still town, drawn once, fading out toward the
  action. It is a still, so it steps aside while the town loop is live.
*/
.hero-scene::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  background: url("assets/cloveria-town.webp") 62% 50% / cover no-repeat;
  filter: blur(5px);
  -webkit-mask-image: var(--haze-mask);
  mask-image: var(--haze-mask);
}

/*
  While a clip plays, the town under it fades away once the clip is fully in, so two
  scenes never show at once (on phones the clip is a band); it is back at once when
  the clip starts to leave.
*/
.hero-scene.is-live::after { opacity: 0; }
/* ...and the town rises back out of the haze. */
.hero-scene.is-returning .hero-image,
.hero-scene.is-returning .hero-town,
.hero-scene.is-returning::after {
  transition: opacity 1.2s var(--dissolve);
}
.hero-scene.is-playing .hero-image,
.hero-scene.is-playing .hero-town,
.hero-scene.is-playing::after {
  opacity: 0;
  transition: opacity .3s 1.5s;
}

/*
  The sneak peek: real gameplay that takes turns with the still town (script.js),
  crossfading over it and its blurred copy. Hidden unless the script shows it. On
  landscape screens its centre sits right of the middle, clear of the haze.
*/
.hero-video {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s var(--dissolve);
}
.hero-video.is-showing { opacity: 1; }
/* The last clip leaves quickly into the sky haze (after the golem's slam lands). */
.hero-video.is-leaving { transition: opacity .5s cubic-bezier(.55, 0, 1, .45); }
@supports (width: 1cqw) {
  @media (orientation: landscape) {
    .hero-scene { container-type: size; }
    .hero-video {
      inset: auto;
      top: 50%;
      left: 66cqw;
      width: max(132cqw, 177.78cqh);
      height: auto;
      aspect-ratio: 16 / 9;
      transform: translate(-50%, -50%);
    }
  }
  @media (orientation: landscape) and (max-height: 560px) {
    .hero-video { left: 70cqw; width: max(140cqw, 177.78cqh); }
  }
}

/*
  A soft sky haze where the words sit, clearing toward the town; a low band along
  the bottom carries the footer. Plain gradients, no live blur, so nothing behind
  them is recomputed while things move.
*/
.hero-haze {
  position: absolute;
  z-index: -2;
  inset: 0;
  background: rgb(var(--mist-rgb) / .8);
  -webkit-mask-image: var(--haze-mask);
  mask-image: var(--haze-mask);
}
.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 120px;
  background: linear-gradient(0deg, rgb(var(--mist-rgb) / .86) 0%, rgb(var(--mist-rgb) / .5) 45%, rgb(var(--mist-rgb) / 0) 100%);
  pointer-events: none;
}

.hero-content {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--column);
  margin-left: max(var(--edge), calc(25vw - var(--column) / 2));
  padding: 56px 0 24px;
  text-align: center;
}
.hero-intro { position: relative; display: flex; flex-direction: column; align-items: center; }
/* The float moves the heading as its own layer: the logo and its shadow are drawn once and glide. */
.title {
  margin: 0;
  font-size: inherit;
  line-height: 0;
  animation: logo-float 6s ease-in-out infinite;
  will-change: transform;
}
.logo {
  width: min(420px, 100%);
  height: auto;
  filter: drop-shadow(0 18px 24px rgb(59 33 66 / .16));
}
@keyframes logo-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

.tagline {
  margin-top: 4px;
  font-size: clamp(34px, 3vw, 44px);
  line-height: 1;
  text-wrap: balance;
}
.status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  color: var(--plum-soft);
  font-size: 22px;
  line-height: 1;
}
.status-dot {
  width: 8px;
  height: 8px;
  background: var(--star);
  box-shadow: 0 0 0 2px var(--plum);
}

/* Not links until the store listings exist. */
.platforms {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 38px 0 0;
  padding: 0;
  list-style: none;
}
.platform {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 156px;
  padding: 10px 20px 11px 16px;
  border: 2px solid rgb(59 33 66 / .7);
  border-radius: 14px;
  background: rgb(255 255 255 / .3);
  text-align: left;
  cursor: default;
}
.platform svg { flex: none; width: 24px; height: 24px; color: var(--plum); }
.platform-status { display: block; color: var(--plum-soft); font-size: 18px; line-height: 1; }
.platform-name { display: block; margin-top: 2px; font-size: 28px; line-height: .9; white-space: nowrap; }

.hero-footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 0 var(--edge) max(var(--edge), env(safe-area-inset-bottom));
  color: var(--plum-soft);
  font-size: 18px;
  line-height: 1;
}

/*
  Portrait screens: the name in the haze at the top, the town in the middle,
  the store badges down where a thumb rests. The haze follows the intro's height.
*/
@media (orientation: portrait) {
  .hero-scene { inset: 16% -16px -16px; }
  .hero-image { object-position: 54% 50%; }
  .hero-haze, .hero-scene::after { display: none; }
  /* The clip in a band low on the screen, wide enough to hold the whole party. */
  .hero-video {
    inset: auto 0 0;
    height: 70%;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 24%);
    mask-image: linear-gradient(180deg, transparent 0, #000 24%);
  }
  .hero::after { height: max(150px, 20%); }
  .hero-intro::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -60vh -60vw -110px;
    background: rgb(var(--mist-rgb) / .9);
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 130px), transparent 100%);
    mask-image: linear-gradient(180deg, #000 calc(100% - 130px), transparent 100%);
  }
  .hero-content {
    align-self: stretch;
    justify-self: center;
    width: min(100%, 520px);
    margin: 0;
    padding: max(32px, 5svh) 20px 0;
  }
  .logo { width: min(400px, 80vw); }
  .tagline { margin-top: 2px; font-size: clamp(28px, 8.2vw, 44px); }
  .status { margin-top: 12px; }
  .platforms { flex-wrap: nowrap; gap: 10px; margin-top: auto; padding-top: 28px; }
  .platform {
    min-width: 0;
    gap: 9px;
    padding: 9px 16px 10px 12px;
    background: rgb(var(--mist-rgb) / .86);
  }
  .platform svg { width: 20px; height: 20px; }
  .platform-status { font-size: 16px; }
  .platform-name { font-size: 24px; }
  .hero-footer { padding-top: 16px; font-size: 16px; white-space: nowrap; }
}

@media (orientation: portrait) and (max-width: 380px) {
  .logo { width: 72vw; }
  .platform { padding: 8px 12px 9px 10px; gap: 8px; }
  .platform-name { font-size: 22px; }
  .hero-footer { flex-direction: column; align-items: center; gap: 6px; }
}

/* Short landscape screens (phones on their side): everything scales to the height. */
@media (orientation: landscape) and (max-height: 560px) {
  :root {
    --column: min(460px, 46vw);
    --haze-mask: linear-gradient(90deg, #000 0%, #000 40%, rgb(0 0 0 / .55) 52%, transparent 66%);
  }
  .hero-content { padding: 14px 0 4px; }
  .logo { width: min(100%, 48svh); }
  .tagline { margin-top: 4svh; font-size: clamp(26px, 7svh, 34px); }
  .status { margin-top: 2svh; font-size: 20px; }
  .platforms { margin-top: 5svh; }
  .platforms { gap: 10px; flex-wrap: nowrap; }
  .platform { min-width: 0; gap: 9px; padding: 7px 14px 8px 11px; }
  .platform svg { width: 20px; height: 20px; }
  .platform-name { font-size: 22px; }
  .platform-status { font-size: 16px; }
  .hero-footer { font-size: 16px; padding-bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .title, .hero-scene { animation: none; }
  .hero-video, .hero-town { display: none; }
  .hero-scene { transform: none !important; transition: none; }
}