/* The teaser site (EAR-485). One page, no script. Unlike the app, this is read on phones
   too, so it lays out for any width. Fonts are the app's own (Barlow, OFL), kept beside the
   page so nothing is fetched from anyone else. The icicles are SVG, drawn once and written
   into the page. */

@font-face {
  font-family: 'Barlow Condensed';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-800-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/barlow-condensed-latin-700-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/barlow-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/barlow-latin-600-normal.woff2') format('woff2');
}

:root {
  --night: #070a10;
  --border: #223046;
  --ice: #bfeaff;
  --ice-strong: #7fd4ff;
  --brand: #5ff5e2;
  --text: #e9eef6;
  --muted: #9fb0c6;
  --display: 'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --body: 'Barlow', system-ui, 'Segoe UI', sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  background: var(--night);
  color: var(--text);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.5;
}

body {
  margin: 0;
  min-height: 100vh;
  /* A cold light from above, as through a frosted window. */
  background:
    radial-gradient(ellipse 90% 700px at 50% -80px, rgb(127 212 255 / 0.2), transparent 70%),
    radial-gradient(ellipse 60% 500px at 85% 380px, rgb(95 245 226 / 0.06), transparent 70%),
    var(--night);
  background-repeat: no-repeat;
  overflow-x: hidden;
}

a {
  color: var(--ice-strong);
}

.defs {
  position: absolute;
}

/* Falling snow, drawn with dots and no script. It is still for anyone who asks for less motion. */
.snow {
  position: fixed;
  inset: -370px 0 0;
  pointer-events: none;
  background-image:
    radial-gradient(2px 2px at 20px 30px, rgb(255 255 255 / 0.8), transparent),
    radial-gradient(2px 2px at 110px 80px, rgb(255 255 255 / 0.5), transparent),
    radial-gradient(1.5px 1.5px at 170px 150px, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(2.5px 2.5px at 60px 180px, rgb(191 234 255 / 0.6), transparent),
    radial-gradient(1.5px 1.5px at 140px 20px, rgb(255 255 255 / 0.4), transparent);
  background-size: 200px 200px;
  opacity: 0.45;
  animation: fall 14s linear infinite;
}

/* A second, sparser sheet falling at another pace, so the flakes do not line up in rows. */
.snow::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(2px 2px at 40px 210px, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(3px 3px at 250px 60px, rgb(191 234 255 / 0.5), transparent),
    radial-gradient(1.5px 1.5px at 310px 290px, rgb(255 255 255 / 0.6), transparent),
    radial-gradient(2px 2px at 150px 330px, rgb(255 255 255 / 0.4), transparent);
  background-size: 370px 370px;
  animation: fall-far 23s linear infinite;
}

@keyframes fall {
  to {
    transform: translateY(200px);
  }
}

@keyframes fall-far {
  to {
    transform: translateY(370px);
  }
}

.top {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.2rem 1.5rem;
}

.wordmark {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand);
}

a.wordmark {
  text-decoration: none;
}

.top nav {
  display: flex;
  gap: 0.6rem;
}

/* A key: Register is filled, Login is an outline. */
.key {
  display: inline-block;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgb(127 212 255 / 0.6);
  border-radius: 8px;
  background: rgb(127 212 255 / 0.06);
  color: var(--ice);
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.key:hover {
  background: rgb(127 212 255 / 0.16);
}

.key.solid {
  border-color: transparent;
  background: linear-gradient(#e6f7ff, #8fd4fb);
  color: #06202f;
}

.key.solid:hover {
  background: linear-gradient(#ffffff, #b4e3ff);
}

/* The Register and Login panels: opened by their keys, closed by a click anywhere else. */
.panel {
  width: min(26rem, calc(100vw - 2rem));
  margin: auto;
  padding: 1.6rem 1.6rem 1.3rem;
  border: 1px solid rgb(127 212 255 / 0.5);
  border-radius: 14px;
  background: linear-gradient(#131c2b, #0b111c);
  color: var(--text);
  box-shadow:
    0 0 60px rgb(127 212 255 / 0.2),
    0 30px 80px rgb(0 0 0 / 0.8);
}

.panel::backdrop {
  background: rgb(4 7 12 / 0.7);
  backdrop-filter: blur(3px);
}

.panel h2 {
  font-size: 1.8rem;
}

.panel p {
  margin: 0.7rem 0 0;
  color: var(--muted);
}

.panel form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.panel label {
  font-size: 0.9rem;
  color: var(--muted);
}

.panel input[type='email'] {
  height: 2.7rem;
  padding: 0 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--night);
  color: var(--text);
  font: inherit;
}

.panel input[type='email']:focus {
  outline: 2px solid var(--ice-strong);
  outline-offset: 1px;
}

.panel form .key {
  margin-top: 0.4rem;
  padding: 0.7rem 1rem;
}

/* The field people never see. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.fine {
  font-size: 0.85rem;
}

.small-panel {
  text-align: center;
}

.small-panel .key {
  margin-top: 1rem;
}

.soon {
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--ice) !important;
}

/* A plain heading for the short pages (thanks, try again, not found). */
h1.plain {
  font-size: clamp(2.4rem, 8vw, 5.5rem);
  color: var(--ice);
  text-shadow:
    0 0 18px rgb(127 212 255 / 0.55),
    0 0 60px rgb(127 212 255 / 0.25);
}

/* An aside in a heading, said under the breath. */
.aside {
  font-style: italic;
  text-transform: none;
  font-size: 0.6em;
  color: var(--muted);
  white-space: nowrap;
}

main {
  position: relative;
}

/* ---- The tagline, cut from ice ------------------------------------------------------- */

.hero {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 8vw, 6rem) 1.5rem clamp(3rem, 7vw, 5rem);
  text-align: center;
}

h1 {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: clamp(2.7rem, 10.5vw, 8rem);
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

/* Each line is white where the light catches the top and blue deepening towards the foot,
   with a cold glow behind it and icicles hanging from its letters. */
.line {
  position: relative;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0 0.08em;
  color: var(--ice);
  background: linear-gradient(#ffffff 10%, #dff5ff 36%, #8fd4fb 64%, #4aa3e0 96%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgb(255 255 255 / 0.5);
  filter: drop-shadow(0 0 14px rgb(127 212 255 / 0.5)) drop-shadow(0 0 46px rgb(74 163 224 / 0.32));
}

/* Room under the first line for its icicles before the second begins. */
.line + .line {
  margin-top: 0.16em;
}

/* The icicles: a strip as wide as the line, its top tucked just inside the foot of the letters. */
.ice {
  position: absolute;
  left: 0;
  top: 79.5%;
  width: 100%;
  height: 0.3em;
  overflow: visible;
  pointer-events: none;
}

.line + .line .ice {
  height: 0.62em;
}

/* A few drawn snowflakes, turning slowly behind the words. */
.flakes {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: rgb(191 234 255 / 0.3);
}

.flake {
  position: absolute;
  animation: turn 40s linear infinite;
}

.flake:nth-child(1) {
  left: 4%;
  top: 14%;
}

.flake:nth-child(2) {
  right: 7%;
  top: 8%;
  animation-duration: 55s;
}

.flake:nth-child(3) {
  right: 4%;
  bottom: 20%;
  animation-direction: reverse;
}

.flake:nth-child(4) {
  left: 12%;
  bottom: 10%;
  animation-duration: 70s;
}

@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .snow,
  .snow::after,
  .flake {
    animation: none;
  }
}

.pitch {
  margin: clamp(3.2rem, 9vw, 6.5rem) 0 0;
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}

.coming {
  margin: clamp(1.2rem, 3vw, 2rem) 0 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.3rem);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ice-strong);
}

/* ---- Sections ---------------------------------------------------------------------- */

h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ice);
}

.lede {
  max-width: 44rem;
  margin: 0.8rem auto 0;
  color: var(--muted);
  font-size: 1.1rem;
}

.shot {
  max-width: 1240px;
  margin: 0 auto;
  padding: 2rem 1.5rem clamp(5rem, 10vw, 8rem);
  text-align: center;
}

/* The player, in a frame with ice hanging from its sill. */
.frame {
  position: relative;
  margin: clamp(1.6rem, 4vw, 2.6rem) 0 0;
  border: 1px solid rgb(127 212 255 / 0.45);
  border-radius: 14px;
  box-shadow:
    0 0 0 1px rgb(0 0 0 / 0.6),
    0 0 80px rgb(127 212 255 / 0.2),
    0 30px 80px rgb(0 0 0 / 0.7);
}

.frame a {
  display: block;
  border-radius: 13px;
  overflow: hidden;
}

.frame img {
  display: block;
  width: 100%;
  height: auto;
}

.eave {
  top: calc(100% - 1px);
  left: 1.2%;
  width: 97.6%;
  height: clamp(28px, 6vw, 72px);
}

.feature {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3rem) 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* Every other one has its picture on the left, still in the wider column. */
.feature.flip {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
}

.feature.flip .words {
  order: 2;
}

/* A capture much wider than it is tall is shown from its left edge at a size that can be
   read, and runs out of its frame on the right; a click opens the whole of it. */
.feature figure.wide img {
  width: 165%;
  max-width: none;
}

.feature figure a {
  display: block;
}

.kicker {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brand);
}

.words p {
  margin: 0.9rem 0 0;
  font-size: 1.08rem;
}

.words ul {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

/* Each point hangs from a small icicle. */
.words li {
  position: relative;
  margin-top: 0.5rem;
  padding-left: 1.3rem;
}

.words li::before {
  content: '';
  position: absolute;
  left: 0.15rem;
  top: 0.35em;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 14px solid var(--ice-strong);
  opacity: 0.85;
}

.feature figure {
  margin: 0;
  border: 1px solid var(--border);
  border-top-color: rgb(127 212 255 / 0.45);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.6);
}

.feature img {
  display: block;
  width: 100%;
  height: auto;
}

/* The spec sheet: the playback engine in four figures. */
.hifi {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem 1rem;
  text-align: center;
}

.hifi dl {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  text-align: left;
}

.hifi dl > div {
  padding: 1.3rem 1.4rem;
  background: linear-gradient(rgb(17 23 35 / 0.9), rgb(12 16 25 / 0.9));
  border: 1px solid var(--border);
  border-top-color: rgb(127 212 255 / 0.45);
  border-radius: 12px;
}

/* The figure, large, as on the front of an amplifier. */
.hifi dt {
  font-family: var(--display);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--ice);
}

.hifi dt span {
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand);
}

.hifi dd {
  margin: 0.8rem 0 0;
  color: var(--muted);
}

.hifi dd strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--text);
}

.next {
  max-width: 44rem;
  margin: 1.6rem auto 0;
  padding: 0.9rem 1.2rem;
  border: 1px dashed rgb(127 212 255 / 0.4);
  border-radius: 10px;
  color: var(--muted);
}

.next span {
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ice-strong);
}

.ahead {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 7vw, 5rem) 1.5rem 4rem;
  text-align: center;
}

.ahead ul {
  list-style: none;
  margin: 2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  text-align: left;
}

/* Not here yet: drawn as if still under frost. */
.ahead li {
  padding: 1.3rem 1.4rem;
  background: linear-gradient(rgb(127 212 255 / 0.08), rgb(12 16 25 / 0.9) 55%);
  border: 1px dashed rgb(127 212 255 / 0.4);
  border-radius: 12px;
}

.ahead h3 {
  margin: 0 0 0.4rem;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: var(--ice);
}

.ahead li p {
  margin: 0;
  color: var(--muted);
}

footer {
  position: relative;
  padding: 2.5rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  text-align: center;
  color: var(--muted);
}

footer p {
  margin: 0.2rem 0;
}

.sign {
  margin-bottom: 0.8rem;
  font-family: var(--display);
  font-style: italic;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ice);
}

.small {
  font-size: 0.85rem;
  opacity: 0.7;
}

/* On a narrow screen the picture goes under the words. */
@media (max-width: 820px) {
  .feature {
    grid-template-columns: minmax(0, 1fr);
  }

  .feature.flip .words {
    order: 0;
  }
}