/* heypetr.com, the shared base of all three directions (2026-11-10).
   Petr's own design system: the tokens are the app's (Beatframe/src/renderer/src/theme.css), with a web type scale
   added on top. One colour per job, as in the app:
     yellow (--c-look)   the one main action on a screen (Get Petr: the founding plan's checkout)
     cobalt / violet     Petr: his name, his words, his orb, what is alive
     clay                your Claude plan
   Spacing only on the scale (4 6 8 12 16 20 24 32 40 48 64 80 96 128 160); a group's inner gaps about 2.5x smaller
   than the gap around it; one left edge per container. Motion: transform and opacity only. */

@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces-VF.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  color-scheme: dark;
  /* ---- the app's tokens (theme.css) */
  --font-ui: Inter, system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --font-serif: 'Fraunces', Georgia, serif;
  --display-axes: 'SOFT' 100, 'WONK' 0;
  --c-ground: #151515;
  --c-bg: #1f1f1f;
  --c-row: #262626;
  --c-control: #2c2c2c;
  --c-control-hover: #363636;
  --c-control-press: #404040;
  --c-line: rgba(255, 255, 255, 0.07);
  --c-line-strong: #333333;
  --c-text: #f2f2f2;
  --c-text-2: #a8a8a8;
  --c-text-3: #9c9c9c;
  --c-brand: #2f5bff;
  --c-brand-text: #8fa8ff;
  --c-petr-text: #c9d4ff;
  --c-brand-hover: #4a72ff;
  --c-brand-soft: rgba(107, 140, 255, 0.16);
  --c-brand-faint: rgba(107, 140, 255, 0.12);
  --c-talk-on: #272e48;
  --c-look: #ffd500;
  --c-look-hover: #ffe14d;
  --c-look-press: #ffea80;
  --c-look-ink: #141414;
  --c-look-kbd: rgba(0, 0, 0, 0.12);
  --c-look-glow: rgba(255, 213, 0, 0.45);
  --c-clay: #d97757;
  --c-clay-light: #ea9a78;
  --c-clay-soft: rgba(217, 119, 87, 0.14);
  --c-pass: #5fe0a8;
  --c-kbd: rgba(255, 255, 255, 0.08);
  --c-focus: rgba(255, 255, 255, 0.55);
  --c-float: rgba(31, 31, 31, 0.86);
  --c-scene-sat: #3c5a72;
  --c-scene-sat-bar: #5f8fb8;
  --c-scene-vintage: #7a6747;
  --c-scene-vintage-bar: #b8995f;
  --c-scene-photo: #4a5059;
  --c-scene-photo-bar: #858c98;
  --c-voice-wave: #93a8ff;
  --c-swatch-atlas: linear-gradient(160deg, #7a6746, #cdb98f 55%, #7d9fae);
  --c-swatch-haze: linear-gradient(160deg, #3a2b2b, #7a3b3b);
  --petr-gradient: linear-gradient(90deg, #2f5bff, #9b7bff, #c9a6ff, #ff8fb1, #ea9a78, #9b7bff, #2f5bff);
  --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.05),
    0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-float: inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 18px 50px rgba(0, 0, 0, 0.35);
  --shadow-video: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.55);
  --shadow-poster: 0 0 0 1px rgba(255, 255, 255, 0.08);
  --home-light: radial-gradient(closest-side, rgba(47, 91, 255, 0.2), rgba(47, 91, 255, 0));
  --ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 120ms;
  --t-calm: 0.42s;

  /* ---- radii (the app's) */
  --r-md: 5px;
  --r-lg: 8px;
  --r-card: 14px;
  --r-sheet: 16px;
  --r-video: 18px;
  --r-pill: 999px;

  /* ---- the spacing scale, web sizes */
  --s-4: 4px;
  --s-6: 6px;
  --s-8: 8px;
  --s-12: 12px;
  --s-16: 16px;
  --s-20: 20px;
  --s-24: 24px;
  --s-32: 32px;
  --s-40: 40px;
  --s-48: 48px;
  --s-64: 64px;
  --s-80: 80px;
  --s-96: 96px;
  --s-128: 128px;
  --s-160: 160px;

  /* ---- web type scale (the app's is for a 1440 window at arm's length; a page needs bigger) */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-17: 17px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-22: 22px;
  --fs-28: 28px;
  --fs-34: 34px;
  --fs-44: 44px;
  --fs-56: 56px;
  --fs-72: 72px;
  --fs-88: 88px;
  --fs-112: 112px;

  /* ---- the web's own: a button you press with a thumb */
  --h-btn: 44px;
  --h-btn-lg: 52px;
  --w-page: 1200px;
  --pad-page: 40px;
}
@media (max-width: 720px) {
  :root {
    --pad-page: 20px;
  }
}

* {
  box-sizing: border-box;
}
html {
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--font-ui);
  font-size: var(--fs-17);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
html,
body {
  overflow-x: clip;
}
body {
  margin: 0;
}
img,
video,
canvas {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}
:focus-visible {
  outline: 2px solid var(--c-focus);
  outline-offset: 3px;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
  margin: 0;
}
ul,
ol {
  padding: 0;
  list-style: none;
}
.serif {
  font-family: var(--font-serif);
  font-weight: 800;
  font-variation-settings: var(--display-axes);
  letter-spacing: -0.015em;
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.nw {
  white-space: nowrap;
}
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---- the wordmark (Brodille, from the user's Canva design: the app's top-left mark) */
.wm {
  display: block;
  height: 22px;
  width: auto;
}

/* ---- buttons: the app's, at web sizes. Neutral grey for everything but the one main action */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  height: var(--h-btn);
  padding: 0 var(--s-20);
  border: none;
  border-radius: var(--r-pill);
  background: var(--c-control);
  color: var(--c-text);
  font-size: var(--fs-15);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--t-fast) linear, transform var(--t-fast) linear;
}
.btn:hover {
  background: var(--c-control-hover);
}
.btn:active {
  background: var(--c-control-press);
}
.btn.primary {
  background: var(--c-look);
  color: var(--c-look-ink);
}
.btn.primary:hover {
  background: var(--c-look-hover);
}
.btn.primary:active {
  background: var(--c-look-press);
}
.btn.lg {
  height: var(--h-btn-lg);
  padding: 0 var(--s-24);
  font-size: var(--fs-17);
}
.btn.ghost {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--c-line-strong);
}
.btn.ghost:hover {
  background: var(--c-control);
  box-shadow: none;
}
.btn .arr {
  transition: transform var(--t-calm) var(--ease-calm);
}
.btn:hover .arr {
  transform: translateX(3px);
}
/* the price inside the main button, after a hairline */
.btn .price {
  font-weight: 500;
  padding-left: var(--s-12);
  border-left: 1px solid rgba(20, 20, 20, 0.22);
  color: rgba(20, 20, 20, 0.78);
}
.btn .lbl + .price {
  margin-left: var(--s-4);
}
/* a key cap on a soft chip (the app's .kbd) */
.kbd {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 var(--s-6);
  border-radius: var(--r-md);
  background: var(--c-kbd);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: 1;
  color: var(--c-text-2);
  white-space: nowrap;
}
.btn.primary .kbd {
  background: var(--c-look-kbd);
  color: var(--c-look-ink);
}
/* text links: Petr's blue, underline on hover */
.link {
  color: var(--c-brand-text);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color var(--t-fast) linear;
}
.link:hover {
  text-decoration-color: currentColor;
}
.navlink {
  display: inline-flex;
  align-items: center;
  height: var(--h-btn);
  padding: 0 var(--s-12);
  border-radius: var(--r-pill);
  font-size: var(--fs-15);
  font-weight: 500;
  color: var(--c-text-2);
  transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.navlink:hover {
  color: var(--c-text);
  background: rgba(255, 255, 255, 0.05);
}

/* ---- Petr's orb: the app's .porb box; the canvas spills past it (droplets, halo). Live: orb.js. Still: a png of the
   app's own renderer at that state */
.porb {
  --s: 96px;
  position: relative;
  display: inline-block;
  width: var(--s);
  height: var(--s);
  flex: 0 0 var(--s);
}
.porb > canvas,
.porb > img {
  position: absolute;
  left: -50%;
  top: -50%;
  width: 200%;
  height: 200%;
  max-width: none;
  pointer-events: none;
}
.porb > img.small {
  left: -30%;
  top: -30%;
  width: 160%;
  height: 160%;
}

/* ---- a finished short: 9:16, the app's video radius and shadow */
.short {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-video);
  overflow: hidden;
  background: #0d0d0e;
  box-shadow: var(--shadow-video);
  isolation: isolate;
}
.short > video,
.short > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- entrances: rise in once, when first seen (transform and opacity only) */
.rise {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.9s var(--ease-calm), transform 0.9s var(--ease-calm);
  transition-delay: var(--d, 0s);
}
.rise.in {
  opacity: 1;
  transform: none;
}
html[data-shot] .rise,
html.still .rise {
  opacity: 1;
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .rise {
    opacity: 1;
    transform: none;
    transition: none;
  }
  html {
    scroll-behavior: auto;
  }
}


/* ---- the foot: the legal lines every direction ends with */
.foot {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: var(--s-40) var(--pad-page) var(--s-48);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-32);
  font-size: var(--fs-13);
  line-height: 1.6;
  color: var(--c-text-3);
  border-top: 1px solid var(--c-line);
}
.foot p {
  max-width: 560px;
}
.foot nav {
  display: flex;
  gap: var(--s-20);
  flex-wrap: wrap;
}
.foot nav a {
  color: var(--c-text-2);
}
.foot nav a:hover {
  color: var(--c-text);
}
@media (max-width: 720px) {
  .foot {
    flex-direction: column;
    gap: var(--s-16);
    padding-bottom: calc(var(--s-48) + 72px);
  }
}

/* ---- the styles that aren't ready yet, drawn (never footage): Haze and Countdown as abstract 9:16 previews */
.pv {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-video);
  overflow: hidden;
  isolation: isolate;
  box-shadow: var(--shadow-poster);
  background: #0d0d0e;
}
/* Haze: a hazy blurred backdrop, a torn-paper window that glows, an italic caption with one coloured word */
.pv-haze {
  background:
    radial-gradient(60% 40% at 22% 18%, rgba(255, 128, 92, 0.55), transparent 70%),
    radial-gradient(55% 45% at 85% 70%, rgba(150, 60, 120, 0.6), transparent 70%),
    radial-gradient(70% 50% at 50% 100%, rgba(255, 170, 120, 0.35), transparent 70%),
    linear-gradient(170deg, #3a2430, #22161d 60%, #2d1a18);
}
.pv-haze .win {
  position: absolute;
  left: 9%;
  right: 9%;
  top: 19%;
  bottom: 31%;
  filter: drop-shadow(0 0 1.5px rgba(255, 245, 235, 0.95)) drop-shadow(0 0 14px rgba(255, 196, 160, 0.55));
}
.pv-haze .win i {
  position: absolute;
  inset: 0;
  clip-path: polygon(0% 3%, 7% 0%, 15% 2%, 24% 0%, 33% 3%, 41% 1%, 52% 2%, 60% 0%, 71% 2%, 80% 0%, 90% 3%, 100% 1%,
    98% 12%, 100% 23%, 97% 35%, 100% 47%, 98% 59%, 100% 70%, 97% 82%, 100% 93%, 99% 100%, 88% 98%, 77% 100%, 66% 97%,
    55% 100%, 45% 98%, 34% 100%, 22% 97%, 12% 100%, 2% 98%, 0% 87%, 3% 75%, 0% 63%, 2% 51%, 0% 39%, 3% 27%, 0% 15%);
  background:
    radial-gradient(30% 22% at 70% 30%, rgba(255, 214, 170, 0.9), rgba(255, 214, 170, 0) 70%),
    linear-gradient(180deg, #e9a37a 0%, #b45f62 38%, #4a2b3d 62%, #1d1620 100%);
}
.pv-haze .win i::after {
  content: '';
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 0;
  height: 42%;
  background: radial-gradient(80% 100% at 30% 100%, #120d14 0 60%, transparent 61%),
    radial-gradient(70% 90% at 85% 100%, #1a1219 0 55%, transparent 56%);
}
.pv-haze .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 17%;
  text-align: center;
  font-size: clamp(14px, 1.6em, 30px);
  font-style: italic;
  font-weight: 850;
  letter-spacing: -0.01em;
  color: #fff;
  text-shadow: 0 0 10px rgba(255, 240, 230, 0.7), 0 0 26px rgba(255, 170, 140, 0.55);
}
.pv-haze .cap b {
  color: #ff7aa8;
  text-shadow: 0 0 10px rgba(255, 122, 168, 0.8), 0 0 26px rgba(255, 122, 168, 0.55);
}
/* Countdown: a flat cartoon face on a person, the countdown badge top-left, a comic pop caption */
.pv-count {
  background:
    radial-gradient(90% 55% at 50% 30%, #f3d9a8, #d9a86a 60%, #a8713d),
    #d9a86a;
}
.pv-count::before {
  /* the floor */
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: linear-gradient(#7b5634, #5b3e25);
}
.pv-count svg {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 78%;
  translate: -50% 0;
}
.pv-count .badge {
  position: absolute;
  left: 8%;
  top: 6%;
  font-size: clamp(18px, 2.2em, 44px);
  font-weight: 900;
  line-height: 1;
  color: #fff;
  -webkit-text-stroke: 0.14em #111;
  paint-order: stroke fill;
}
.pv-count .cap {
  position: absolute;
  left: 0;
  right: 0;
  top: 40%;
  text-align: center;
  font-size: clamp(16px, 1.9em, 38px);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #111;
  -webkit-text-stroke: 0.16em #fff;
  paint-order: stroke fill;
  transform: rotate(-4deg);
}

/* screenshots (?shot): no transitions, so a still never catches a colour half-way */
html[data-shot] *,
html[data-shot] *::before,
html[data-shot] *::after {
  transition: none !important;
}