@font-face {
  font-family: "Exo 2";
  src: url("/fonts/exo2.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Golos Text";
  src: url("/fonts/golos-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --ft-bpm: 120;
  --ft-bar: calc(240s / var(--ft-bpm)); /* one 4/4 bar */
  --bg: #07060c;
  --name: #f2eff9;
  --line: #8b3dff;
  --hi: #00ffb3;
  --text: #f1effa;
  --muted: #a29fb6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(50rem 28rem at 50% 30%, rgba(139, 61, 255, 0.18), transparent 70%),
    var(--bg);
  color: var(--text);
  font: 400 1rem/1.6 "Golos Text", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--text); text-underline-offset: 3px; text-decoration-color: var(--line); }
a:hover { text-decoration-color: var(--hi); }
a:focus-visible { outline: 2px solid var(--hi); outline-offset: 3px; border-radius: 4px; }

.stage {
  flex: 1;
  display: grid;
  place-items: center;
  padding: 3rem 1rem;
}

.frame {
  position: relative;
  width: 100%;
  max-width: 44rem;
  padding: clamp(2rem, 6vw, 3.5rem) clamp(1.25rem, 5vw, 3rem);
  border: 1px solid rgba(139, 61, 255, 0.55);
  border-radius: 6px;
  text-align: center;
}

/* viewfinder corners */
.frame::before, .frame::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2px solid var(--hi);
}
.frame::before { top: -2px; left: -2px; border-right: 0; border-bottom: 0; }
.frame::after { bottom: -2px; right: -2px; border-left: 0; border-top: 0; }

.name { margin: 0; line-height: 0; }

.ft-logo {
  display: block;
  width: min(100%, 26rem);
  height: auto;
  margin: 0 auto;
  overflow: visible;
}
.ft-name { fill: var(--name); }
.ft-mark { fill: var(--line); }
.ft-flash { fill: var(--hi); opacity: 0; }

/* Logo motion: one cycle per bar, spec of record in flowtrance-website-logo-file-spec.md */
.ft-mark { animation: ft-push var(--ft-bar) linear infinite; }
.ft-shard-front { animation: ft-kick-front var(--ft-bar) linear infinite; }
.ft-shard-top { animation: ft-kick-top var(--ft-bar) linear infinite; }
.ft-shard-bottom { animation: ft-kick-bottom var(--ft-bar) linear infinite; }
.ft-flash { animation: ft-flash var(--ft-bar) linear infinite; }

.beat {
  display: block;
  width: 5rem;
  height: 3px;
  margin: 1.25rem auto 1.75rem;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--line), var(--hi));
  transform-origin: center;
  opacity: 0.85;
}

@keyframes ft-push {
  0% { transform: translate(93.5px, 0); }
  12.5% { transform: translate(73.87px, 0); }
  25% { transform: translate(56.1px, 0); }
  50% { transform: translate(27.11px, 0); }
  75% { transform: translate(7.48px, 0); }
  100% { transform: translate(0.0px, 0); }
}
@keyframes ft-kick-front {
  0% { transform: translate(85px, 0); }
  12.5% { transform: translate(67.15px, 0); }
  25% { transform: translate(51.0px, 0); }
  50% { transform: translate(24.65px, 0); }
  75% { transform: translate(6.8px, 0); }
  100% { transform: translate(0px, 0); }
}
@keyframes ft-kick-top {
  0% { transform: translate(-38.25px, -75.65px); }
  12.5% { transform: translate(-30.22px, -59.76px); }
  25% { transform: translate(-22.95px, -45.39px); }
  50% { transform: translate(-11.09px, -21.94px); }
  75% { transform: translate(-3.06px, -6.05px); }
  100% { transform: translate(-0.0px, -0.0px); }
}
@keyframes ft-kick-bottom {
  0% { transform: translate(-47.6px, 70.55px); }
  12.5% { transform: translate(-37.6px, 55.73px); }
  25% { transform: translate(-28.56px, 42.33px); }
  50% { transform: translate(-13.8px, 20.46px); }
  75% { transform: translate(-3.81px, 5.64px); }
  100% { transform: translate(-0.0px, 0.0px); }
}
@keyframes ft-flash {
  0% { opacity: 1; }
  12.5% { opacity: 0.79; }
  25% { opacity: 0.6; }
  50% { opacity: 0.29; }
  75% { opacity: 0.08; }
  100% { opacity: 0; }
}

.hook {
  margin: 0 auto 0.75rem;
  max-width: 32rem;
  font-family: "Exo 2", system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.3;
}

.support { margin: 0 auto 2rem; max-width: 30rem; color: var(--muted); }

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(0, 255, 179, 0.4);
  border-radius: 999px;
  font-size: 0.95rem;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hi); }

.foot {
  padding: 1.5rem 1rem 2rem;
  color: var(--muted);
  font-size: 0.875rem;
  text-align: center;
}
.foot p { margin: 0 0 0.35rem; }
.foot a { color: var(--muted); }
.foot a:hover { color: var(--text); }
.quiet { opacity: 0.75; }

@media (max-width: 480px) {
  .status { border-radius: 12px; text-align: left; font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-mark, .ft-shard, .ft-flash { animation: none; }
  .ft-flash { opacity: 0; }
}