/* rast's website. tokens follow ../brand.md: paper and ink, outfit speaks,
   the system font reads, flat and matte, and color only where something gets
   decided. the product is the picture. */
@font-face {
  font-family: "Outfit";
  src: url("fonts/Outfit.ttf") format("truetype");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  --page: #FAFAF7; --text: #121214; --muted: #6B6A66; --line: #DEDDD7;
  --ember: #BD4D00; --cobalt: #1F5ED9; --emerald: #0C7D48; --violet: #773CD6;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --display: "Outfit", system-ui, sans-serif;
  --body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --page: #0B0B0D; --text: #F4F4F1; --muted: #9C9C96; --line: #2A2A2E; }
}

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  font: 18px/28px var(--body);
  background: var(--page);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; }
h1, h2 { text-wrap: balance; }
:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; border-radius: 8px; }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
.skip { position: absolute; left: 16px; top: -64px; padding: 8px 12px; background: var(--text); color: var(--page); border-radius: 8px; z-index: 1; }
.skip:focus { top: 16px; }

/* the bar and the foot */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 24px; }
.mark { font: 800 30px/1 var(--display); letter-spacing: -.03em; text-decoration: none; }
.bar nav, .foot nav { display: flex; flex-wrap: wrap; gap: 4px; }
.bar nav a { font: 600 16px/1 var(--display); text-decoration: none; color: var(--muted); padding: 12px; border-radius: 999px; transition: color .2s var(--ease), background-color .2s var(--ease); }
/* the language menu: a native disclosure, no script needed to open it */
.bar nav { align-items: center; }
.lang { position: relative; }
.lang summary { list-style: none; cursor: pointer; font: 600 16px/1 var(--display); color: var(--muted); padding: 12px; border-radius: 999px; transition: color .2s var(--ease), background-color .2s var(--ease); }
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }
.lang > div { position: absolute; right: 0; top: calc(100% + 4px); z-index: 2; display: grid; min-width: 136px; padding: 4px; border-radius: 16px; background: var(--page); border: 1px solid var(--line); }
.lang > div a { border-radius: 12px; }
.lang > div a[aria-current] { color: var(--text); }
.bar nav a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 8%, transparent); }

.foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; padding-block: 40px 64px; margin-top: 96px; border-top: 1px solid var(--line); color: var(--muted); font-size: 16px; line-height: 24px; }
.foot .mark { font-size: 24px; color: var(--text); }
.foot nav { gap: 8px 24px; }
.foot nav a { text-decoration: none; }
.foot nav a:hover, .foot nav a[aria-current] { color: var(--text); text-decoration: underline; }

/* a phone: the real screen in a thin flat bezel */
.phone { display: block; flex: none; width: var(--phone); border: 6px solid #000; border-radius: calc(var(--phone) * .15); overflow: hidden; background: #000; }
.phone canvas { display: block; width: 100%; aspect-ratio: 720 / 1564; }

/* the hero */
.hero { display: grid; gap: 64px; justify-items: start; padding-block: 48px 96px; }
.hero h1 { font: 800 60px/1 var(--display); letter-spacing: -.04em; max-width: 680px; }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 40px; }
.store img { width: 64px; height: 64px; border-radius: 14px; outline: 1px solid var(--line); }
.soon { display: inline-block; font: 600 16px/1 var(--display); padding: 16px 24px; border-radius: 999px; border: 2px solid var(--line); color: var(--muted); }
.stage { position: relative; width: 100%; }
.pause { position: absolute; right: 0; bottom: 0; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--page); color: var(--text); cursor: pointer; }
.pause[hidden] { display: none; }
.pause svg { width: 16px; height: 16px; fill: currentColor; }
.pause .play, .pause[aria-pressed="true"] .bars { display: none; }
.pause[aria-pressed="true"] .play { display: inline; }
.iso { display: block; width: 100%; aspect-ratio: 11 / 9; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
@media (min-width: 600px) { .hero h1 { font-size: 72px; } }
@media (min-width: 960px) {
  .hero { grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-block: 48px 96px; }
}
@media (min-width: 1180px) {
  .hero h1 { font-size: 96px; }
}

/* the tools */
h2 { font: 800 48px/1 var(--display); letter-spacing: -.035em; }
#tools h2 { margin-bottom: 32px; }
.tools { display: grid; gap: 12px; }
.tile {
  appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
  padding: 24px 24px 0; border-radius: 24px; overflow: hidden; background: var(--tile);
  transition: transform .3s var(--ease);
}
.tile { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tile:hover { transform: translateY(-2px); }
.tile:active { transform: scale(.98); }
.coin { --tile: var(--ember); }
.dice { --tile: var(--cobalt); }
.wheel { --tile: var(--emerald); }
.picker { --tile: var(--violet); padding-bottom: 24px; }
.tile .words { display: block; }
.tile .name { display: block; font: 600 16px/24px var(--display); }
.tile .result { display: block; margin-top: 16px; font: 800 60px/1 var(--display); letter-spacing: -.04em; overflow-wrap: anywhere; }
.js .tile .result { white-space: nowrap; overflow-wrap: normal; }
html:not(.js) .iso, html:not(.js) .peek, html:not(.js) #tools-title { display: none; }
.tile .line { display: block; font-size: 16px; line-height: 24px; margin-top: 12px; max-width: 32ch; }
/* every phone the same size, running off the bottom of its card, top two thirds showing */
.tile { --phone: 240px; }
.peek { display: flex; justify-content: center; align-items: flex-start; height: calc(var(--phone) * 1.5); overflow: hidden; }

/* who goes first: fingers on the glass, one gets picked */
.fingers { position: relative; display: block; flex: 1; min-height: 200px; }
.fingers i { position: absolute; width: 72px; height: 72px; margin: -36px; border-radius: 50%; border: 3px solid #fff; opacity: .5; transition: opacity .3s var(--ease), transform .3s var(--ease), background-color .3s var(--ease); }
.fingers i.won { background: #fff; opacity: 1; transform: scale(1.2); }
/* the spotlight walking the table: everyone back but the one it's on */
.walking .fingers i { opacity: .25; transition-duration: .08s; }
.walking .fingers i.lit { background: #fff; opacity: 1; transform: scale(1.1); }
.fingers i:nth-child(1) { left: 26%; top: 26%; }
.fingers i:nth-child(2) { left: 74%; top: 22%; }
.fingers i:nth-child(3) { left: 24%; top: 74%; }
.fingers i:nth-child(4) { left: 72%; top: 78%; }

@media (min-width: 900px) {
  .tools { grid-template-columns: repeat(6, 1fr); }
  .dice, .wheel { grid-column: span 2; }
  .coin, .picker { grid-column: span 4; flex-direction: row; }
  .words { min-width: 0; }
  /* the coin's phone runs off the bottom of its card, however tall the row is */
  .coin { --phone: 264px; }
  .coin .peek { position: relative; flex: none; width: var(--phone); height: auto; overflow: visible; }
  .coin .phone { position: absolute; top: 0; }
  .picker .words { flex: none; width: 60%; }
  .coin .result, .picker .result { font-size: 72px; }
}
@media (min-width: 1152px) {
  .coin { --phone: 280px; }
  .coin .result, .picker .result { font-size: 96px; }
}

/* the line that lights up */
.say { padding-block: 128px 96px; }
.say p { font: 800 36px/40px var(--display); letter-spacing: -.03em; max-width: 880px; text-wrap: balance; }
.w { opacity: .25; transition: opacity .6s var(--ease); }
.w.on { opacity: 1; }
@media (min-width: 760px) { .say { padding-block: 160px 128px; } .say p { font-size: 60px; line-height: 1.05; } }

/* the languages */
.available { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.available h2 { font-size: 36px; line-height: 40px; }
.flags { display: flex; gap: 12px; list-style: none; padding: 0; }
.flags a { display: block; border-radius: 16px; transition: transform .25s var(--ease); }
.flags a:hover { transform: translateY(-2px); }
.flags a:active { transform: scale(.96); }
.flags a[aria-current]:not(:focus-visible) { outline: 2px solid var(--text); outline-offset: 3px; }
.flags svg { display: block; width: 56px; height: 56px; border-radius: 16px; outline: 1px solid var(--line); outline-offset: -1px; }
@media (min-width: 760px) { .available h2 { font-size: 48px; line-height: 1; } .flags svg { width: 64px; height: 64px; border-radius: 18px; } }

/* the narrowest phones: five flags and long words still fit */
@media (max-width: 400px) {
  .flags { gap: 8px; }
  .flags a { border-radius: 14px; }
  .flags svg { width: 48px; height: 48px; border-radius: 14px; }
}

/* questions */
.questions { display: grid; gap: 32px; margin-top: 128px; }
@media (min-width: 960px) { .questions { grid-template-columns: 1fr 2fr; gap: 64px; } }
.questions details { border-bottom: 1px solid var(--line); }
.questions details:first-child { border-top: 1px solid var(--line); }
.questions summary { display: flex; justify-content: space-between; gap: 16px; padding-block: 16px; cursor: pointer; font: 600 20px/28px var(--display); list-style: none; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; flex: none; color: var(--muted); transition: transform .3s var(--ease); }
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { padding-bottom: 24px; max-width: 60ch; color: var(--muted); }
.questions details a { color: var(--text); }

/* the way out */
.end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding-top: 128px; }
.end img { border-radius: 22px; outline: 1px solid var(--line); }
.end h2 { font-size: 60px; }
@media (min-width: 760px) { .end h2 { font-size: 96px; } }

/* privacy, terms and the lost */
.doc { max-width: 680px; padding-top: 48px; }
.doc h1 { font: 800 60px/1 var(--display); letter-spacing: -.04em; }
.doc .updated { color: var(--muted); font-size: 16px; line-height: 24px; margin: 16px 0 40px; }
.doc p + p { margin-top: 24px; }
@media (min-width: 760px) { .doc h1 { font-size: 72px; } }

/* long words at the narrowest: "cevapsızlıktan", "condiciones" */
@media (max-width: 400px) { .end h2 { font-size: 48px; } .doc h1 { font-size: 40px; } }

/* a page change: the next page's color spreads from the tap until it covers
   everything, and on the next page draws back to open it. head.js and page.js
   set the classes, and neither happens under reduced motion. */
html.leaving::after, html.arriving::after {
  content: "rast"; position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; pointer-events: none;
  background: var(--cover); color: #fff; font: 800 clamp(64px, 14vw, 144px)/1 var(--display); letter-spacing: -.03em;
}
html.leaving::after { animation: cover .45s cubic-bezier(.65, 0, .35, 1) both; }
html.arriving::after { animation: open .6s var(--ease) .08s both; }
@keyframes cover { from { clip-path: circle(0 at var(--x) var(--y)); } to { clip-path: circle(150vmax at var(--x) var(--y)); } }
@keyframes open { from { clip-path: circle(150vmax at 50% 50%); } to { clip-path: circle(0 at 50% 50%); } }

/* arriving, only for those who want motion */
.moves .rise { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.moves .rise.in { opacity: 1; transform: none; }

@media print {
  .moves .rise { opacity: 1; transform: none; }
  .w { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile { transition: none; }
  .tile:hover, .tile:active { transform: none; }
  .fingers i, .questions summary::after, .flags a { transition: none; }
}