/* Pumptower: the "soon" page (style-v1.css: bump the number in the file name on every change, it is cached for a year) */

/* while Jersey 15 loads (or if it never does), a local monospace shrunk to its width, so nothing jumps when it arrives */
@font-face {
  font-family: "Jersey 15 Fallback";
  src: local("Consolas"), local("Menlo-Regular"), local("Menlo"), local("SFMono-Regular"), local("DejaVu Sans Mono"),
       local("Roboto Mono"), local("Droid Sans Mono"), local("Courier New");
  size-adjust: 76%;
}

:root {
  --bg: #05040f;
  --ink: #eef1f8;
  --muted: #9aa3bd;
  --mint: #5cf59a;
  --mint-l: #c8ffe0;
  --green: #4ade80;
  --green-d: #15803d;
  --on-green: #04120a;
  --line: rgba(92, 245, 154, 0.18);
  --pix: "Jersey 15", "Jersey 15 Fallback", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  overflow-x: hidden;
}
@supports (overflow: clip) { html { overflow-x: clip; } }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--pix);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

/* the night: two layers of pixel stars and a faint mint glow where the tower would be */
.sky {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 40% at 50% 47%, rgba(74, 222, 128, 0.11), rgba(74, 222, 128, 0) 72%),
    radial-gradient(ellipse 110% 60% at 50% 115%, rgba(44, 32, 120, 0.42), rgba(44, 32, 120, 0) 70%),
    var(--bg);
}
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("stars.png");
  background-size: 720px 720px;
  background-repeat: repeat;
  image-rendering: pixelated;
}
.sky::before { opacity: 0.75; }
.sky::after {
  background-position: 353px 211px;
  opacity: 0.4;
  animation: twinkle 6s ease-in-out infinite alternate;
}
/* the pause button stops the stars too */
.still .sky::after { animation-play-state: paused; }
@keyframes twinkle { from { opacity: 0.08; } to { opacity: 0.55; } }

.stage {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.6vh, 26px);
  padding:
    max(28px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(28px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  text-align: center;
}
/* the headline and the button: stacked like the rest by default, side by side on wide, short screens */
.cta { display: contents; }

/* the logo (pixel art, drawn as SVG rectangles) */
.logo {
  margin: 0 0 clamp(2px, 1vh, 10px);
  width: clamp(240px, 78vw, 440px);
  line-height: 0;
}
.logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 18px rgba(74, 222, 128, 0.28));
}

/* the screen: the teaser, framed like a window on the night */
/* (its width keeps the whole page on one screen: 392px of height are left for the logo, the words and the button) */
.screen {
  position: relative;
  width: 100%;
  max-width: 980px;
  aspect-ratio: 16 / 9;
  background: #000 url("../media/poster-v2.webp") center / cover no-repeat;
  border-radius: 6px;
  overflow: hidden;
  box-shadow:
    0 0 0 1px var(--line),
    0 0 0 7px rgba(5, 4, 15, 0.85),
    0 0 0 8px rgba(255, 255, 255, 0.05),
    0 30px 90px -30px rgba(74, 222, 128, 0.42),
    0 0 140px -40px rgba(92, 245, 154, 0.3);
}
@supports (width: min(1px, 2px)) {
  .screen {
    width: max(min(100%, 300px), min(100%, 980px, calc((100vh - 392px) * 16 / 9)));
  }
}
@supports (height: 100svh) {
  .screen {
    width: max(min(100%, 300px), min(100%, 980px, calc((100svh - 392px) * 16 / 9)));
  }
}
.screen video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
}

/* controls on the screen (they fade back a little when nobody touches the screen: see main.js) */
.controls {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  gap: 8px;
  transition: opacity 0.3s ease;
}
.screen.idle .controls { opacity: 0.4; }
.screen.idle .controls:focus-within,
.screen.idle .controls:hover { opacity: 1; }

.ctl,
.big-play {
  appearance: none;
  margin: 0;
  padding: 0;
  font: inherit;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(5, 4, 15, 0.62);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.ctl {
  width: 40px;
  height: 40px;
  border-radius: 8px;
}
.ctl svg { width: 20px; height: 20px; fill: currentColor; shape-rendering: crispEdges; }
.ctl:hover { background: rgba(5, 4, 15, 0.85); border-color: rgba(92, 245, 154, 0.55); }
.ctl:active { transform: translateY(1px); }

#toggle-play .i-play,
#toggle-play[data-state="paused"] .i-pause { display: none; }
#toggle-play[data-state="paused"] .i-play { display: block; }
#toggle-sound .i-on,
#toggle-sound[data-state="on"] .i-off { display: none; }
#toggle-sound[data-state="on"] .i-on { display: block; }
#toggle-sound[data-state="on"] { color: var(--mint); border-color: rgba(92, 245, 154, 0.55); }

.big-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  border-radius: 50%;
  border-color: rgba(92, 245, 154, 0.6);
  color: var(--mint);
  box-shadow: 0 0 40px -6px rgba(92, 245, 154, 0.45);
}
.big-play svg { width: 30px; height: 30px; margin-left: 4px; fill: currentColor; shape-rendering: crispEdges; }
.big-play:hover { background: rgba(5, 4, 15, 0.82); color: var(--mint-l); }

/* the words */
.soon {
  margin: clamp(4px, 1.2vh, 12px) 0 0;
  font-size: 54px;
  line-height: 1;
  letter-spacing: 0.03em;
  color: var(--mint);
  text-shadow: 0 0 22px rgba(92, 245, 154, 0.35);
}

.follow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 24px 12px;
  border-radius: 8px;
  font-size: 27px;
  line-height: 1;
  color: var(--on-green);
  background: var(--green);
  text-decoration: none;
  box-shadow: 0 4px 0 var(--green-d), 0 14px 34px -12px rgba(74, 222, 128, 0.65);
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.follow svg { width: 19px; height: 19px; fill: currentColor; flex: none; margin-top: 2px; }
.follow:hover { background: var(--mint); transform: translateY(-1px); box-shadow: 0 5px 0 var(--green-d), 0 18px 40px -12px rgba(74, 222, 128, 0.75); }
.follow:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--green-d), 0 8px 20px -12px rgba(74, 222, 128, 0.6); }

.motto {
  margin: clamp(2px, 1vh, 8px) 0 0;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.22em;
  color: var(--muted);
}

/* focus */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--mint-l);
  outline-offset: 3px;
}
.ctl:focus-visible,
.big-play:focus-visible { outline-offset: 2px; }
/* (on the video, the ring sits on a dark band, whatever frame is playing) */
.ctl:focus-visible { box-shadow: 0 0 0 7px rgba(5, 4, 15, 0.9); }

/* a quiet entrance */
.logo, .screen, .soon, .follow, .motto { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; }
.screen { animation-delay: 0.08s; }
.soon { animation-delay: 0.2s; }
.follow { animation-delay: 0.3s; }
.motto { animation-delay: 0.4s; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* laptops (1366 x 657, 1280 x 720, 1536 x 730…): a smaller logo, the headline and the button on one row, a bigger screen */
@media (min-width: 700px) and (max-height: 820px) {
  .stage {
    gap: 12px;
    padding-top: max(18px, env(safe-area-inset-top));
    padding-bottom: max(18px, env(safe-area-inset-bottom));
  }
  .logo { width: 340px; margin: 0; }
  .cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 28px;
  }
  .soon { margin: 0; font-size: 40px; }
  .follow { font-size: 23px; min-height: 46px; padding: 9px 20px 11px; }
  .motto { margin: 4px 0 0; font-size: 16px; }
  .screen { width: max(min(100%, 300px), min(100%, 980px, calc((100vh - 206px) * 16 / 9))); }
  @supports (height: 100svh) {
    .screen { width: max(min(100%, 300px), min(100%, 980px, calc((100svh - 206px) * 16 / 9))); }
  }
}

/* phones */
@media (max-width: 600px) {
  .stage { gap: 18px; }
  .soon { font-size: 36px; }
  .follow { font-size: 24px; min-height: 50px; padding: 10px 20px 12px; }
  .motto { font-size: 18px; }
  .controls { right: 8px; bottom: 8px; gap: 6px; }
  /* the screen runs edge to edge */
  .screen {
    width: calc(100% + 32px);
    max-width: none;
    border-radius: 0;
    box-shadow:
      0 -1px 0 var(--line),
      0 1px 0 var(--line),
      0 30px 90px -30px rgba(74, 222, 128, 0.42),
      0 0 140px -40px rgba(92, 245, 154, 0.3);
  }
}
/* tall phones (375 x 812 and up): bolder */
@media (max-width: 600px) and (min-height: 700px) {
  .stage { gap: 24px; }
  .logo { width: min(88vw, 360px); }
  .soon { font-size: 44px; }
  .follow { width: 100%; max-width: 343px; justify-content: center; min-height: 56px; }
}
/* tiny screens (the Galaxy Fold cover screen, 280 px) */
@media (max-width: 340px) {
  .follow { font-size: 21px; gap: 8px; padding: 10px 14px 12px; }
  .follow span { white-space: nowrap; }
  .soon { font-size: 32px; }
  .ctl { width: 34px; height: 34px; }
}
@media (pointer: coarse) and (min-width: 341px) {
  .ctl { width: 44px; height: 44px; }
}

/* landscape phones (812 x 375…): the screen on the left, the words and the button on the right, all on one screen */
@media (orientation: landscape) and (max-height: 500px) {
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "screen logo" "screen soon" "screen follow" "screen motto";
    align-content: center;
    align-items: center;
    justify-items: center;
    column-gap: 28px;
    row-gap: 12px;
    padding-top: max(16px, env(safe-area-inset-top));
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .cta { display: contents; }
  .logo { grid-area: logo; width: min(36vw, 320px); margin: 0; }
  .screen { grid-area: screen; width: 100%; }
  .soon { grid-area: soon; margin: 0; font-size: 34px; }
  /* (a slimmer button leaves more width to the screen on small landscape phones: 667 x 375, 640 x 360) */
  .follow { grid-area: follow; font-size: 22px; gap: 10px; min-height: 46px; padding: 8px 16px 10px; }
  .motto { grid-area: motto; margin: 0; font-size: 16px; }
}

/* motion off: no twinkle, no entrance, no autoplay (see main.js) */
@media (prefers-reduced-motion: reduce) {
  .sky::after { animation: none; opacity: 0.3; }
  .logo, .screen, .soon, .follow, .motto { animation: none; }
  .ctl, .big-play, .follow, .controls { transition: none; }
  .follow:hover, .follow:active, .ctl:active { transform: none; }
}

@media (forced-colors: active) {
  .follow, .ctl, .big-play { border: 1px solid ButtonText; }
}