/* Sw1ng Tweaks website. Colours and fonts match the app (core/UI.ps1). */

:root {
  --bg: #050506;
  --bg-alt: rgba(8, 8, 10, .72);
  --card: rgba(15, 15, 18, .84);
  --text: #f7f7f8;
  --sub: #a8a8b2;
  --dim: #70707a;
  --line: rgba(255, 255, 255, .09);
  --line-strong: rgba(255, 255, 255, .17);
  --accent: #ef2b3c;
  --accent-hot: #ff5a50;

  --display: Bahnschrift, "Segoe UI Semibold", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --body: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: Consolas, "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 4vw, 40px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--bg); }
body {
  margin: 0;
  color: var(--text);
  font: 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; margin: 0; }
p, ul, ol, dl, dd { margin: 0; padding: 0; }
a { color: inherit; }
code { font-family: var(--mono); font-size: .92em; }
:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 3px; border-radius: 4px; }

/* The live scene sits behind the whole page */
.liquid { position: fixed; top: 0; left: 0; z-index: -1; display: none; width: 100%; height: 100lvh; }
.has-gl .liquid { display: block; }
.has-gl .scene { display: none; }

.wrap { width: 100%; max-width: 1120px; margin-inline: auto; padding-inline: var(--gutter); }

/* Buttons */
.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font: 600 15px/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .25s, transform .25s;
}
.btn:hover { background: #ff4150; border-color: #ff4150; box-shadow: 0 8px 30px -8px rgba(239, 43, 60, .75); transform: translateY(-1px); }
.btn-ghost { background: transparent; border-color: var(--line-strong); }
.btn-ghost:hover { background: rgba(255, 255, 255, .07); border-color: var(--line-strong); box-shadow: none; }
.btn-small { padding: 8px 14px; font-size: 14px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Top bar */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(5, 5, 6, .84);
  border-bottom: 1px solid var(--line);
}
.topbar-row { display: flex; align-items: center; gap: 22px; min-height: 60px; }
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font: 600 17px/1 var(--display);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #050506;
  box-shadow: 0 0 0 1.5px var(--accent-hot), 0 0 10px 1px var(--accent);
}
.nav { display: flex; gap: 22px; margin-left: auto; }
.nav a { color: var(--sub); font-size: 15px; text-decoration: none; }
.nav a:hover { color: var(--text); }
.account-link { color: var(--text); font-size: 15px; text-decoration: none; white-space: nowrap; }
.account-link:hover { color: var(--sub); }
.push { margin-left: auto; }
.footer a, .faq a, .steps a, .prose a, .panel-note a { color: var(--text); }

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: min(760px, calc(100vh - 61px));
  padding-block: 72px 150px;
  isolation: isolate;
}
.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(70% 90% at 72% 44%, rgba(239, 43, 60, .17), transparent 70%);
}
.eclipse {
  position: absolute;
  top: 45%;
  left: 72%;
  width: clamp(240px, 32vw, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.moon, .corona { position: absolute; border-radius: 50%; }
.moon {
  inset: 0;
  background: radial-gradient(circle at 50% 50%, #030304 60%, #09090b 100%);
  box-shadow:
    0 0 0 1.5px rgba(255, 228, 214, .95),
    0 0 12px 3px rgba(255, 150, 120, .9),
    0 0 44px 12px rgba(239, 43, 60, .7);
}
.corona {
  inset: -42%;
  background: radial-gradient(circle, rgba(255, 96, 76, .38) 40%, rgba(239, 43, 60, .1) 50%, transparent 64%);
  filter: blur(8px);
  animation: breathe 7s ease-in-out infinite;
}
.corona-rays {
  inset: -62%;
  background: conic-gradient(
    from 20deg,
    rgba(245, 62, 72, .95), transparent 30deg, rgba(239, 43, 60, .75) 66deg, transparent 112deg,
    rgba(245, 62, 72, .9) 148deg, transparent 200deg, rgba(239, 43, 60, .7) 236deg, transparent 288deg,
    rgba(245, 62, 72, .8) 327deg, rgba(245, 62, 72, .95)
  );
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%);
  mask: radial-gradient(circle, #000 28%, transparent 70%);
  filter: blur(11px);
  animation: turn 70s linear infinite;
}
/* A second layer turning the other way, so the light seems to flow and merge instead of spinning */
.corona-flow {
  inset: -50%;
  background: conic-gradient(
    from 140deg,
    transparent, rgba(250, 72, 80, .85) 44deg, transparent 92deg, rgba(239, 43, 60, .75) 168deg,
    transparent 224deg, rgba(250, 72, 80, .75) 286deg, transparent
  );
  -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%);
  mask: radial-gradient(circle, #000 30%, transparent 70%);
  filter: blur(9px);
  animation: turn 48s linear infinite reverse;
}
/* Rolling black liquid. Each wave is twice as wide as the page and repeats, so sliding it by half loops forever. */
.waves { position: absolute; left: 0; bottom: 0; width: 100%; height: 300px; overflow: hidden; }
.wave { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; display: block; animation: roll 46s linear infinite; }
.wave-crest { fill: none; stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.wave-far .wave-body { fill: #120709; }
.wave-far .wave-crest { stroke: rgba(239, 43, 60, .75); }
.wave-mid { animation-duration: 31s; animation-direction: reverse; }
.wave-mid .wave-body { fill: #0b0607; }
.wave-mid .wave-crest { stroke: rgba(239, 43, 60, .5); }
.wave-near { animation-duration: 22s; }
.wave-near .wave-body { fill: #050506; }
.wave-near .wave-crest { stroke: rgba(239, 43, 60, .32); }

/* The app's scene stops when nobody can see it. So does this. */
.hero.is-offscreen .corona, .hero.is-offscreen .wave { animation-play-state: paused; }

@keyframes breathe { 50% { opacity: .72; transform: scale(1.03); } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes roll { to { transform: translateX(-50%); } }

.hero-copy { position: relative; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero-note { margin-top: 16px; color: var(--sub); font-size: 14px; }

/* In the hero the moon is a button, as it is in the app. The scene draws the moon itself and lines it up with this. */
.moon-btn {
  position: absolute;
  top: 44%;
  left: 73%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(170px, 21vw, 270px);
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
}
.moon-btn[hidden] { display: none; }
.moon-btn::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid #fff;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s, inset .2s;
}
.moon-btn:hover::after, .moon-btn:focus-visible::after { opacity: .55; }
.moon-btn:active::after { inset: -3px; }
.moon-btn:focus-visible { outline: none; }
.moon-btn svg { width: 22px; height: 28px; fill: #fff; }
.moon-big { margin-top: 6px; font: 600 25px/1.15 var(--display); }
.moon-small { margin-top: 2px; color: var(--sub); font-size: 13px; }

.eyebrow { color: var(--sub); font-size: 14px; font-weight: 600; margin-bottom: 14px; }
h1 { font-size: clamp(44px, 7.4vw, 84px); letter-spacing: -.015em; }
.lede {
  max-width: 460px;
  margin-block: 20px 28px;
  color: #c9c9d1;
  font-size: clamp(17px, 2vw, 19px);
}

/* Stats */
.stats { border-block: 1px solid var(--line); background: rgba(5, 5, 6, .8); }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); }
.stats-row > div { padding-block: 24px; }
.stats strong { display: block; font: 600 clamp(26px, 4vw, 34px)/1.15 var(--display); font-variant-numeric: tabular-nums; }
.stats span { color: var(--sub); font-size: 15px; }

/* Sections */
.section { padding-block: clamp(64px, 9vw, 104px); }
.section-alt { background: var(--bg-alt); border-block: 1px solid var(--line); }
h2 { font-size: clamp(30px, 4.4vw, 44px); }
h3 { font-size: 19px; }
.section-lede { max-width: 560px; margin-top: 12px; color: var(--sub); font-size: 17px; }
.section-lede + .actions { margin-top: 24px; }

/* App screenshots */
.section-tight { padding-bottom: 0; }
.shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: #000;
}
.shot img, .feature-shot { display: block; width: 100%; height: auto; }
.shot { transition: border-color .2s; cursor: zoom-in; }
.shot:hover { border-color: rgba(255, 255, 255, .34); }
.shot-hero {
  margin-top: 36px;
  box-shadow: 0 24px 90px -30px rgba(239, 43, 60, .55);
  transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), border-color .2s;
}
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; margin-top: 40px; }
.shots figure { margin: 0; }
.shots figcaption { margin-top: 10px; color: var(--sub); font-size: 15px; }
.shots-wide { grid-column: 1 / -1; }
.feature-shot { margin-top: 22px; border-radius: 8px; }

/* Features */
.feature-lead {
  margin-top: 40px;
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--card);
}
.feature-lead h3 { font-size: clamp(22px, 3vw, 27px); }
.feature-lead p { max-width: 680px; margin-top: 10px; color: #c9c9d1; font-size: 17px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 16px; }
.card { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); transition: border-color .2s, translate .3s; }
.card:hover { border-color: var(--line-strong); translate: 0 -2px; }
.card p { margin-top: 8px; color: var(--sub); font-size: 15.5px; }

/* Presets */
.presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; margin-top: 36px; list-style: none; }
.presets li { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.presets p { margin-top: 8px; color: var(--sub); font-size: 15px; }
.preset-main { border-color: var(--accent) !important; }
.preset-tag { display: block; margin-bottom: 8px; color: var(--accent-hot); font-size: 13px; font-weight: 600; }

/* Safety */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 72px); }
.facts > div { padding-block: 16px; border-top: 1px solid var(--line); }
.facts > div:last-child { border-bottom: 1px solid var(--line); }
.facts dt { font-weight: 600; }
.facts dd { color: var(--sub); font-size: 15.5px; }

/* Questions */
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 15px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; color: var(--sub); font-size: 20px; line-height: 1; transition: rotate .2s; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding-bottom: 16px; color: var(--sub); font-size: 15.5px; }

/* Download */
.download-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 32px; margin-top: 44px; }
.steps, .plain { margin-top: 12px; padding-left: 20px; color: var(--sub); }
.steps li, .plain li { margin-top: 8px; }
.steps code { color: var(--text); }
.checksum { margin-top: 44px; padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.checksum-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.checksum p { margin-top: 6px; color: var(--sub); font-size: 15px; }
.hash { display: block; margin-top: 10px; color: var(--text); font-size: 14px; overflow-wrap: anywhere; }

/* Footer */
.footer { padding-block: 32px; border-top: 1px solid var(--line); background: rgba(5, 5, 6, .8); color: #8a8a94; font-size: 14px; }

/* Account and private pages */
.panel-page { display: grid; align-content: center; justify-items: center; gap: 14px; min-height: calc(100vh - 150px); padding-block: 48px; }
.panel { width: min(100%, 560px); padding: clamp(24px, 5vw, 36px); border: 1px solid var(--line-strong); border-radius: 14px; background: var(--card); }
.panel-title { font-size: clamp(28px, 4vw, 36px); }
.panel-sub { margin-top: 8px; color: var(--sub); }
.panel-note { margin-top: 18px; color: var(--sub); font-size: 14px; }
.sign-in { display: grid; gap: 10px; margin-top: 24px; }
.sign-in .btn { text-align: center; }
.key-box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; margin-top: 22px; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: rgba(0, 0, 0, .45); }
.key-box code { font-size: clamp(14px, 2.6vw, 16px); letter-spacing: .02em; overflow-wrap: anywhere; }
.key-facts { display: grid; gap: 8px; margin-top: 18px; }
.key-facts > div { display: flex; justify-content: space-between; gap: 18px; font-size: 15px; }
.key-facts dt { color: var(--sub); }
.key-facts dd { text-align: right; }
.panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.panel-foot { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.text-btn { padding: 0; border: 0; background: none; color: var(--sub); font: 14px var(--body); text-decoration: underline; cursor: pointer; }
.text-btn:hover { color: var(--text); }
.btn:disabled { opacity: .55; cursor: default; box-shadow: none; transform: none; }
.notice { width: min(100%, 560px); padding: 12px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--card); font-size: 15px; }
.notice.is-bad { border-color: rgba(248, 113, 113, .55); }

.admin-page { min-height: 100vh; padding-block: 36px 64px; }
.admin-page .notice { width: 100%; margin-bottom: 14px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; margin-top: 22px; }
.tile { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.tile strong { display: block; font: 600 34px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.tile span { color: var(--sub); font-size: 14px; }
.tile-live strong { color: var(--accent-hot); }
.tile-note { margin-top: 12px; color: var(--sub); font-size: 14px; }
.admin-h2 { margin-top: 36px; font-size: 22px; }
.table-wrap { margin-top: 12px; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.people { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 14.5px; }
.people th { padding: 11px 14px; color: var(--sub); font-weight: 600; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--line); }
.people td { padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.people tr:last-child td { border-bottom: 0; }
.people td .text-btn { margin-right: 12px; }
.people select { padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: #111114; color: var(--text); font: inherit; }
.dot { display: inline-block; width: 8px; height: 8px; margin-right: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dot.is-on { background: var(--accent-hot); box-shadow: 0 0 8px var(--accent); }

.prose { max-width: 720px; padding-block: 48px 72px; }
.prose h2 { margin-top: 32px; font-size: 22px; }
.prose p, .prose ul { margin-top: 10px; color: #c9c9d1; }
.prose ul { padding-left: 20px; }
.prose li { margin-top: 5px; }
.footer-row { display: flex; justify-content: space-between; gap: 16px; }

/* Rising into place. Only ever added by JavaScript, so nothing can stay hidden. */
.rise { opacity: 0; translate: 0 18px; }
.rise.in { opacity: 1; translate: 0 0; transition: opacity .55s var(--wait, 0ms), translate .7s cubic-bezier(.2, .7, .2, 1) var(--wait, 0ms), border-color .2s; }
.rise.in.card:hover { transition-delay: 0ms; translate: 0 -2px; }

/* Screenshot viewer */
.viewer { width: min(94vw, 1240px); max-width: none; max-height: 92vh; padding: 0; overflow: hidden; border: 1px solid var(--line-strong); border-radius: 12px; background: #000; cursor: zoom-out; }
.viewer::backdrop { background: rgba(0, 0, 0, .82); }
.viewer img { display: block; width: 100%; height: auto; max-height: 92vh; object-fit: contain; }
.viewer-close { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(0, 0, 0, .7); cursor: pointer; }
.viewer-close svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.4; }

/* Text above, moon below, before they can run into each other */
@media (max-width: 980px) {
  .hero { min-height: 700px; align-items: flex-start; padding-block: 44px 340px; }
  .eclipse { top: auto; bottom: 90px; left: 50%; transform: translate(-50%, 0); width: 170px; }
  .waves { height: 150px; }
  .moon-btn { top: auto; bottom: 134px; left: 50%; width: 176px; transform: translate(-50%, 0); }
  .moon-big { font-size: 21px; }
  .moon-small { font-size: 12px; }
}

@media (max-width: 760px) {
  .nav { display: none; }
  .topbar-row { gap: 14px; }
  .topbar-row .brand { margin-right: auto; font-size: 15px; }
  .topbar-row .push { margin-left: 0; }
  .split, .shots { grid-template-columns: minmax(0, 1fr); }
  .stats-row > div { padding-block: 18px; }
  .stats span { font-size: 14px; line-height: 1.3; display: block; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .corona, .wave { animation: none; }
  .btn, .card, .shot-hero { transition: none; }
}