/* ==========================================================================
   Muchos Mineros
   Layout deliberately preserves the original composition: percentage widths,
   the padding-bottom aspect-ratio boxes, and the hand-tuned numbers that nest
   the trailer inside the iPhone frame image. Those magic numbers are load
   bearing — changing one drifts the video out of the phone.
   ========================================================================== */

@font-face {
  font-family: BowlbyOneSC;
  src: url(/assets/fonts/BowlbyOneSC-subset.woff2) format("woff2"),
       url(/assets/fonts/BowlbyOneSC-Regular.ttf) format("truetype");
  font-display: swap;
  font-weight: 400;
}

:root {
  --navy-a: #15173A;
  --navy-b: #25274B;
  --text: #fff;
  --text-dim: rgb(235, 235, 235);
  --yellow: rgb(255, 255, 52);
  /* One full 5-stripe cycle. 90s then 24s were both too subtle to read as movement —
     the two navies are close in tone, so the drift has to be reasonably brisk to
     register at all. Raise this to slow it down. */
  --bg-drift: 16s;
  /* One full copy-length of star-column travel. */
  --scroll-dur: 55s;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--text);
  background: var(--navy-a);
  font-family: BowlbyOneSC, helvetica, verdana, sans-serif;
  /* Replaces flowtype.js: the old script set body font-size to width/30 clamped
     2–40px on every resize. This is the same curve with no JS and no reflow. */
  font-size: clamp(13px, 3.33vw, 40px);
  text-align: center;
  overflow-x: hidden;
}

/* CJK has no coverage in Bowlby One SC — fall back to platform gothics rather
   than shipping a 2–4 MB webfont. (The old stylesheet referenced a chineseFont.ttf
   that never existed and 404'd on every load.) */
:lang(ja) { font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; }
:lang(ko) { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Backdrop ───────────────────────────────────────────────────────────── */

/* Oversized and translated rather than animating background-position. Two reasons:
   background-position is a paint-only property, so it repainted a full-screen gradient
   every single frame; and transform is composited, so this is both far cheaper and
   actually smooth. The element is 200% in each axis and offset by -50% so no edge can
   ever enter the viewport while it moves. */
#background {
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  z-index: -3;
  background: repeating-linear-gradient(-45deg,
    var(--navy-a), var(--navy-a) 10px, var(--navy-b) 10px, var(--navy-b) 20px);
  animation: drift var(--bg-drift) linear infinite;
  will-change: transform;
}

/* 141.42px is exactly 5 stripe periods: the gradient repeats every 20px along a -45°
   line, which is 20·√2 ≈ 28.28px measured horizontally. Landing on a whole multiple is
   what makes the loop seamless — any other distance jumps on every repeat. */
@keyframes drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(141.42px, 0, 0); }
}

/* ── Star columns ───────────────────────────────────────────────────────────
   Previously a 65 KB whiteStar.png tiled with background-repeat, sized by jQuery
   on every resize. Background tiles cannot be transformed individually, so each
   star is now its own <svg> — which is also how the PNG became a ~300 byte path.
   The columns stretch to full document height from .page's position:relative,
   so the resize JS is gone entirely.
   ────────────────────────────────────────────────────────────────────────── */

.page { position: relative; }

/* Viewport-height and fixed, rather than stretched to the document. The columns now
   scroll themselves, so they read as a continuous conveyor rather than as decoration
   pinned to the page — and a copy only has to cover 100vh instead of an unknown
   document height, which is what lets the star count drop from 50 to 24. */
.star-col {
  position: fixed;
  top: 0;
  height: 100vh;
  width: 7.5%;
  z-index: -1;
  overflow: hidden;
  contain: layout paint style;
  pointer-events: none;
}

.star-col--left { left: 2.5%; }
.star-col--right { left: 90%; }

/* Left travels up, right travels down. -50% is exactly one copy of the doubled set,
   so the wrap lands on identical content and never jumps. */
.star-track {
  display: flex;
  flex-direction: column;
  animation: star-scroll var(--scroll-dur) linear infinite;
  will-change: transform;
}

.star-col--right .star-track { animation-direction: reverse; }

@keyframes star-scroll { to { transform: translateY(-50%); } }

.star {
  flex: none;
  width: 100%;
  aspect-ratio: 1;
  fill: #fff;
  opacity: .9;
  /* --dur is written per star by the build, randomised between 48s and 16s. */
  animation: star-spin var(--dur, 48s) linear infinite;
  /* A negative delay starts the animation as though it had already been running
     that long, so star i sits at (i/n)·360° at t=0 — every star a unique angle,
     evenly spaced around the circle. The formula self-normalises: the star's own
     duration cancels out of (|delay|/dur)·360, so the spacing holds even though
     every star now turns at a different speed. */
  animation-delay: calc(var(--i) * (var(--dur, 48s) / var(--n)) * -1);
}

/* Every star turns clockwise, both columns. Only the column *travel* differs —
   that reverse lives on .star-track above and must not be applied here. */
@keyframes star-spin { to { transform: rotate(360deg); } }

/* ── Content shell ──────────────────────────────────────────────────────── */

#content {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto;
  padding-top: 2.5%;
}

.smallestText { color: var(--text-dim); font-size: 40%; }
.smallText    { color: var(--text-dim); font-size: 60%; }

.mediumText {
  color: var(--text-dim);
  font-size: 100%;
  line-height: 1.15;
  width: 60%;
  margin: 10px auto 0;
}

/* ── Title ──────────────────────────────────────────────────────────────── */

#titleLogo {
  position: relative;
  margin: 5% auto 0;
  height: 0;
  padding-bottom: 35%;
  background-image: url(/assets/title.png);
  background-image: image-set(url(/assets/title.webp) type("image/webp"),
                              url(/assets/title.png) type("image/png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

/* ── Language switcher ──────────────────────────────────────────────────── */

#languageSelect { margin-top: 1%; }

.langs {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .4em;
  margin: 0 auto;
  padding: 0;
  max-width: 90%;
}

.langs a {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .3em .6em;
  border-radius: .5em;
  border: 2px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: var(--text-dim);
  font-size: 45%;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s, border-color .18s;
}

.langs a:hover,
.langs a:focus-visible {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .45);
}

/* The original had no selected state at all — you could not tell which language
   you were reading except from the label underneath. */
.langs a[aria-current] {
  background: rgba(255, 255, 52, .16);
  border-color: var(--yellow);
  color: #fff;
}

.flag {
  width: 1.6em;
  height: 1.07em;
  border-radius: 2px;
  flex: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}

.lang-current { margin: .5em 0 0; }

/* ── Trailer, nested inside the iPhone frame ────────────────────────────── */

/* Percentage padding resolves against the CONTAINING BLOCK's width, not this
   element's own — so width and padding are not independent. Changing width alone
   changes the box's aspect ratio, which flips background-size:contain from
   fitting-to-width to fitting-to-height. The phone image then shrinks and centres
   while .video-container keeps scaling off the full width, and the video spills
   out of the screen. That is exactly what the 900px breakpoint used to do.

   Deriving both from one variable keeps the ratio locked at any width:
     2/65  = 0.0308     40/65 = 0.6154                                          */
#video_image_border {
  --frame-w: 65%;
  position: relative;
  width: var(--frame-w);
  margin: 0 auto;
  height: 0;
  padding-top: calc(var(--frame-w) * 0.0308);
  padding-bottom: calc(var(--frame-w) * 0.6154);
  background-image: url(/assets/iPhone6New.png);
  background-image: image-set(url(/assets/iPhone6New.webp) type("image/webp"),
                              url(/assets/iPhone6New.png) type("image/png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.video-container {
  position: relative;
  left: 11%;
  margin-top: 7%;
  width: 78%;
  height: 0;
  padding-bottom: 44.5%;
  overflow: hidden;
}

.video-container iframe,
.video-facade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Façade: the real player is ~1 MB of JS and used to load on every visit whether
   or not anyone pressed play. Swapped in on click by main.js. */
.video-facade {
  padding: 0;
  background: #000;
  cursor: pointer;
  display: block;
}

.video-facade img { width: 100%; height: 100%; object-fit: cover; display: block; }

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55) no-repeat center/38%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  border: 3px solid rgba(255, 255, 255, .9);
  transition: transform .2s var(--ease), background-color .2s;
}

.video-facade:hover .video-play,
.video-facade:focus-visible .video-play {
  transform: scale(1.12);
  background-color: rgba(188, 0, 45, .85);
}

/* ── Store badges ───────────────────────────────────────────────────────── */

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
  margin-top: 30px;
}

.badge {
  display: inline-block;
  border-radius: 10px;
  transition: transform .2s var(--ease), filter .2s;
}

.badge img { display: block; max-width: 220px; width: 100%; height: auto; }

.badge:hover,
.badge:focus-visible {
  transform: translateY(-4px) scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .55));
}

.badge:active { transform: translateY(-1px) scale(1.01); }

/* ── Press kit ──────────────────────────────────────────────────────────── */

.presskit-link {
  display: inline-block;
  margin-top: .6em;
  padding: .35em .9em;
  border: 3px solid var(--yellow);
  border-radius: .5em;
  color: var(--yellow);
  font-size: 55%;
  text-decoration: none;
  transition: transform .18s var(--ease), background-color .18s, color .18s;
}

.presskit-link:hover,
.presskit-link:focus-visible {
  transform: translateY(-3px);
  background: var(--yellow);
  color: var(--navy-a);
}

/* ── Screenshots ────────────────────────────────────────────────────────── */

#screenshots {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin: 10px auto 0;
  padding: 0;
}

#screenshots a {
  display: block;
  border-radius: 8px;
  overflow: hidden;
  cursor: zoom-in;
  transition: transform .22s var(--ease), box-shadow .22s;
}

#screenshots img { display: block; width: 250px; max-width: 100%; height: auto; }

#screenshots a:hover,
#screenshots a:focus-visible {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 12px 26px rgba(0, 0, 0, .6);
}

/* ── Share ──────────────────────────────────────────────────────────────── */

.share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6em;
  margin-top: 1em;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .45em .8em;
  border-radius: .4em;
  color: #fff;
  font-size: 50%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  /* The original transition was 25ms — technically present, humanly invisible. */
  transition: transform .18s var(--ease), filter .18s;
}

.share-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.share-btn:hover, .share-btn:focus-visible { transform: translateY(-3px); filter: brightness(1.15); }
.share-btn:active { transform: translateY(-1px); }

.share-btn--fb { background: #3b5998; }
.share-btn--tw { background: #1da1f2; }
.share-btn--wa { background: #25d366; }

/* ── App icon, diamonds, footer ─────────────────────────────────────────── */

.appIcon {
  display: inline-block;
  width: 40%;
  height: 0;
  padding-bottom: 40%;
  margin: 2% auto;
  background-image: url(/assets/logoIconLightSmall.png);
  background-image: image-set(url(/assets/logoIconLightSmall.webp) type("image/webp"),
                              url(/assets/logoIconLightSmall.png) type("image/png"));
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.diamonds {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 6%;
  padding: 10px 0 0;
  margin: 0;
}

.diamonds img { width: 100%; max-width: 65px; height: auto; }

.out-now { margin-top: .6em; color: #fff; }

/* The page now ends on the store badges; give them room to breathe. */
.badges:last-of-type { margin-bottom: 2.5em; }

/* ── Lightbox ───────────────────────────────────────────────────────────────
   The old markup carried data-lightbox attributes but the library was never
   included, so clicking a thumbnail navigated to a raw 1.2–1.7 MB PNG.
   ────────────────────────────────────────────────────────────────────────── */

#lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: 94vw;
  max-height: 94vh;
  overflow: visible;
}

#lightbox::backdrop { background: rgba(0, 0, 0, .88); }
#lightbox img { display: block; max-width: 94vw; max-height: 94vh; width: auto; height: auto; border-radius: 6px; }

.lightbox-close {
  position: absolute;
  top: -.4em;
  right: -.4em;
  width: 1.6em;
  height: 1.6em;
  font-size: 28px;
  line-height: 1;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--navy-a);
  cursor: pointer;
  transition: transform .15s var(--ease);
}

.lightbox-close:hover { transform: scale(1.12); }

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   Gated on .js so the page is never invisible if the script fails to load.
   ────────────────────────────────────────────────────────────────────────── */

.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s var(--ease);
}

.js .reveal.is-visible { opacity: 1; transform: none; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  /* Below this the columns are ~25px wide: the stars read as noise, and dropping
     them takes 100 animated elements off the weakest devices. */
  .star-col { display: none; }
  .mediumText { width: 86%; }
  /* Only the width variable — the padding follows it automatically. */
  #video_image_border { --frame-w: 92%; }
  .langs a { font-size: 58%; }
  .share-btn { font-size: 62%; }
  .smallText { font-size: 72%; }
  .smallestText { font-size: 52%; }
}

@media (max-width: 520px) {
  #screenshots img { width: 180px; }
  .badge img { max-width: 170px; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────────
   Stars keep their staggered start angles — the composition survives, only the
   movement stops.
   ────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  #background { animation: none; }
  .star-track { animation: none; }

  .star {
    animation: none;
    transform: rotate(calc(var(--i) * (360deg / var(--n))));
  }

  .js .reveal { opacity: 1; transform: none; transition: none; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}