/*
  rifflenotes.com — the marketing page.

  Tokens are copied from `web/src/theme/tokens.css` rather than imported: this
  page is static, served by nginx with no build step, and has to stay up when
  the app is down. If the palette changes there, change it here.

  Same rule as the app: monochrome, colour reserved for meaning. The only hue on
  the page is the mark itself, and the one primary action is the inverse slab.
*/

:root {
  color-scheme: light dark;
  --bg: #f8f6f1;
  --surface: #ffffff;
  --surface-sunken: #efebe2;
  --inverse: #001219;
  --on-inverse: #f8f6f1;
  --text: #001219;
  --text-muted: #4a5b60;
  --text-faint: #8a9599;
  --border: rgb(0 18 25 / 0.08);
  --border-strong: rgb(0 18 25 / 0.16);
  --shadow-lifted: 0 24px 60px rgb(0 18 25 / 0.18);
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #001219;
    --surface: #04222b;
    --surface-sunken: #0a2f39;
    --inverse: #e9e4d8;
    --on-inverse: #001219;
    --text: #ede8dc;
    --text-muted: #94a5a8;
    --text-faint: #6b7e84;
    --border: rgb(233 228 216 / 0.1);
    --border-strong: rgb(233 228 216 / 0.2);
    --shadow-lifted: 0 24px 60px rgb(0 0 0 / 0.6);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  /* One screen: the hero takes what the footer leaves, and the phones take what the copy leaves. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

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

@media (min-width: 720px) { :root { --gutter: 32px; } }

/* Buttons ---------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  background: var(--inverse);
  color: var(--on-inverse);
  border: 1px solid transparent;
  transition: transform 130ms var(--ease-out), background-color 130ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn:focus-visible, .foot a:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

.btn-store span { display: flex; flex-direction: column; line-height: 1.1; text-align: left; font-size: 18px; }
.btn-store small { font-size: 11px; font-weight: 500; opacity: 0.8; }

.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-sunken); }

/* Hero ------------------------------------------------------------------- */

/* One centred column, a screen tall: the mark, the line, the actions, the phones. */
.hero { flex: 1; display: flex; flex-direction: column; padding: 40px 0 0; overflow-x: clip; }

.hero-inner {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-copy { display: flex; flex-direction: column; align-items: center; }

.tile {
  display: block;
  width: 64px;
  height: 64px;
  margin-bottom: 24px;
  filter: drop-shadow(0 10px 24px rgb(0 0 0 / 0.25));
}

/*
  The deal: both back cards start squared up behind the front one (+14°) and
  swing out to rest. The front card never moves. Ease-out, 60ms stagger — the
  numbers `brand-tile.tsx` uses.
*/
.deal {
  transform-box: view-box;
  transform-origin: 20px 44.41px;
  animation: deal 620ms var(--ease-out) 250ms both;
}
.deal-0 { --from: 28deg; }
.deal-1 { --from: 14deg; animation-delay: 310ms; }

@keyframes deal {
  from { transform: rotate(var(--from)); }
  to { transform: rotate(0deg); }
}

h1 {
  font-size: clamp(36px, 6.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 750;
  margin: 0 0 16px;
  max-width: 13em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(17px, 2vw, 19px);
  color: var(--text-muted);
  max-width: 30em;
  margin: 0 0 20px;
  text-wrap: balance;
}

.chips {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.chips li {
  font-size: 14px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
}

.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }

/* Phones ----------------------------------------------------------------- */

/*
  Each phone is a small 3D object, CSS only: a bezel face with a metal rim, two
  slabs stacked behind it for thickness, a glare on the glass, and a soft shadow
  far behind that drifts with parallax as the phone turns. Nothing in the chain
  may take `filter` or `opacity` — either one flattens preserve-3d — so dimming
  goes through `--dim` on the glare instead.
*/
.phone {
  --dim: transparent;
  position: relative;
  margin: 0;
  border-radius: 44px;
  padding: 6px;
  border: 2px solid transparent;
  background:
    linear-gradient(#050607, #050607) padding-box,
    linear-gradient(135deg, #9aa0a8, #2a2d31 28%, #141619 60%, #7a8088) border-box;
  transform-style: preserve-3d;
}

/* The body: two slabs behind the face, so a turned phone shows a machined edge. */
.phone::before, .phone::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, #6a7077, #1b1d20 40%, #0d0e10 70%, #50555b);
}
.phone::before { transform: translateZ(-5px); }
.phone::after { transform: translateZ(-10px); }

.screen {
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(0.5px);
}
.screen img { border-radius: 36px; width: 100%; }

/* Cast shadow, well behind the phone. */
.screen::before {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 44px;
  background: rgb(0 18 25 / 0.28);
  filter: blur(28px);
  transform: translate3d(18px, 34px, -70px);
}

/* Glass. */
.screen::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 36px;
  pointer-events: none;
  background:
    linear-gradient(115deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.04) 26%, transparent 40%, transparent 72%, rgb(255 255 255 / 0.05)),
    linear-gradient(var(--dim), var(--dim));
  transform: translateZ(1px);
}

@media (prefers-color-scheme: dark) {
  .screen::before { background: rgb(0 0 0 / 0.55); }
}

/* Three phones fanned about one pivot below the group, like the mark, standing in one 3D stage. */
/*
  The fan takes whatever height the copy leaves, and the phones are sized from
  that height (cqh), so all three always stand whole on one screen — nothing is
  cropped or faded. `overflow: hidden` keeps the entrance and drift from ever
  growing the page.
*/
.fan {
  position: relative;
  flex: 1 1 0;
  min-height: 130px;
  max-height: 460px;
  max-width: 880px;
  width: 100%;
  margin: 28px auto 0;
  overflow: hidden;
  container-type: size;
  perspective: 1800px;
  animation: fade-in 600ms var(--ease-out) both;
}
.fan-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(10deg);
  animation: drift 9s ease-in-out infinite alternate;
}
.fan .phone {
  position: absolute;
  left: 50%;
  --pw: min(230px, 37cqh, 31vw);
  top: 3%;
  border-radius: calc(var(--pw) * 0.17);
  width: var(--pw);
  margin-left: calc(var(--pw) / -2);
  transform-origin: 50% 160%;
  transform: translateZ(var(--z)) rotate(var(--rot));
  animation: fan-in 800ms var(--ease-out) both;
}
.fan .phone-back-l { --rot: -14deg; --z: -90px; --dim: rgb(0 0 0 / 0.2); animation-delay: 150ms; }
.fan .phone-back-r { --rot: 14deg; --z: -50px; --dim: rgb(0 0 0 / 0.2); animation-delay: 210ms; }
.fan .phone-front { --rot: 0deg; --z: 40px; }

@keyframes fade-in { from { opacity: 0; } }

@keyframes fan-in {
  from { transform: translateY(40px) translateZ(var(--z)) rotate(0deg); }
  to { transform: translateZ(var(--z)) rotate(var(--rot)); }
}

@keyframes drift {
  from { transform: rotateX(11deg) rotateY(14deg); }
  to { transform: rotateX(6deg) rotateY(-6deg); }
}

/* At fan size the phones can get small, so the corners and the shadow scale with them. */
.fan .screen img, .fan .screen::after { border-radius: calc(var(--pw) * 0.14); }
.fan .screen::before {
  border-radius: calc(var(--pw) * 0.17);
  filter: blur(calc(var(--pw) * 0.08));
  transform: translate3d(calc(var(--pw) * 0.05), calc(var(--pw) * 0.08), -70px);
}

/* Short or narrow screens: tighten everything above the phones so they keep room to stand. */
@media (max-width: 480px) {
  .chips { display: none; }
  .lede { margin-bottom: 24px; }
}
@media (max-height: 780px) {
  .hero { padding-top: 28px; }
  .tile { width: 52px; height: 52px; margin-bottom: 16px; }
  h1 { font-size: clamp(32px, 5.4vw, 50px); margin-bottom: 12px; }
  .lede { margin-bottom: 16px; }
  .chips { margin-bottom: 24px; }
  .fan { margin-top: 20px; }
}

/*
  Wide screens: the copy on the left, and the fan on the right at nearly the full
  height of the screen. The fan only clips vertically here, so the outer phones
  can lean past their column.
*/
@media (min-width: 900px) {
  .hero { padding-top: 16px; }
  .hero-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    align-items: center;
    gap: 24px;
    text-align: left;
  }
  .hero-copy { align-items: flex-start; }
  .chips, .ctas { justify-content: flex-start; }
  h1 { font-size: clamp(40px, 4.6vw, 64px); max-width: 11em; }
  .lede { text-wrap: pretty; }
  .fan {
    height: clamp(420px, calc(100svh - 90px), 760px);
    max-height: none;
    margin: 0;
    overflow: visible;
    overflow-y: clip;
  }
  .fan .phone { --pw: min(310px, 37cqh); }
}

/* Footer ----------------------------------------------------------------- */

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
  padding: 8px var(--gutter) 40px;
  font-size: 13px;
  color: var(--text-faint);
}
.foot a { text-decoration: none; }
.foot a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  .deal, .fan, .fan-stage, .fan .phone { animation: none; }
}