/* killbill.co.in: the look every page shares, then each page's own part.
   Colours are the brand's tokens (kill-bill/design/brand/export/tokens.json): Lilac when the phone is light, Midnight when it's dark. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/assets/fonts/bricolage-grotesque-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --bg: #F3EFFA;
  --surface: #FEFDFF;
  --line: #E7E0F1;
  --ink: #2B2340;
  --muted: #776E8F;
  --accent: #7C5CD6;
  --accent-text: #6A4FC2;          /* the accent, a step darker, for small text */
  --lilac: #8B6CE0;                /* the icon's tile */
  --glow: rgb(124 92 214 / .32);   /* the icon's shadow */
  --paper: #FEFDFF;                /* the bill's paper, the same in both themes, as in the icon */
  --paper-ink: #7C5CD6;
  --font: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101D;
    --surface: #1D182D;
    --line: #2F2848;
    --ink: #F3EFFF;
    --muted: #A39BC4;
    --accent: #C9B6FF;
    --accent-text: #C9B6FF;
    --glow: rgb(0 0 0 / .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  min-height: 100vh;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font: 500 1rem/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--accent-text); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 6px; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* The logo, drawn as shapes so the words are always in the brand's font. Never stretch it: width only, height follows. */
.icon { display: block; width: var(--icon-size, 96px); height: auto; aspect-ratio: 1; }
.wordmark svg { display: block; width: 100%; height: auto; }
/* browsers round the box to whole pixels; letting the drawing spill keeps the tile's corners from being shaved */
.icon, .wordmark svg { overflow: visible; }
.wordmark .kill { fill: var(--ink); }
.wordmark .bill { fill: var(--accent); }


/* ── Coming soon (/) and not found (404) ───────────────────────────── */

.poster {
  display: grid;
  place-items: center;
  padding: max(32px, env(safe-area-inset-top)) 24px max(32px, env(safe-area-inset-bottom));
  overflow-x: hidden;
}
.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* sits a touch above the middle, where the eye expects it */
  margin-bottom: 4vh;
}
.lockup .icon {
  --icon-size: clamp(84px, min(31vw, 19svh), 168px);   /* svh keeps it on one screen when the phone is sideways */
  filter: drop-shadow(0 18px 30px var(--glow)) drop-shadow(0 2px 3px rgb(43 35 64 / .10));
}
.lockup .wordmark { width: clamp(160px, min(54vw, 46svh), 420px); margin-top: clamp(20px, min(6.5vw, 4.5svh), 40px); }
.tagline {
  margin-top: clamp(10px, min(3.4vw, 2.2svh), 20px);
  font-size: clamp(1.125rem, min(5.4vw, 3.6svh), 2rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.tagline b { font-weight: inherit; color: var(--accent); }

/* "coming soon", printed on a little stub of the bill, torn top and bottom and tilted like the icon's halves */
.stub { margin-top: clamp(26px, min(9.5vw, 6svh), 56px); rotate: -3deg; filter: drop-shadow(0 6px 14px var(--glow)); }
.stub span {
  --tooth: 5px;
  display: inline-block;
  padding: calc(11px + var(--tooth)) 22px;
  background: var(--paper);
  color: var(--paper-ink);
  font-size: clamp(.875rem, min(4vw, 2.2svh), 1.125rem);
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1;
  /* trims the top and bottom edges into teeth; browsers without masks show a plain strip */
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x;
  mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--tooth)) 51% repeat-x,
    conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--tooth)) 51% repeat-x;
}

.lost {
  margin-top: clamp(26px, 7vw, 40px);
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.lost + p { margin-top: 12px; font-size: 1.0625rem; }
.lost + p a { font-weight: 600; }

/* On arrival the bill tears in two and the words follow. The halves end exactly where the icon draws them. */
@media (prefers-reduced-motion: no-preference) {
  .lockup > * { animation: rise .8s cubic-bezier(.16, 1, .3, 1) backwards; }
  .lockup > :nth-child(2) { animation-delay: .5s; }
  .lockup > :nth-child(3) { animation-delay: .62s; }
  .lockup > :nth-child(4) { animation-delay: .78s; }
  .tear .top, .tear .bottom { transform-origin: 0 0; animation: 1.1s cubic-bezier(.16, 1, .3, 1) .38s backwards; }
  .tear .top { animation-name: tear-top; }
  .tear .bottom { animation-name: tear-bottom; }
}
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@keyframes tear-top {
  from { transform: translate(0, 0) translate(50px, 32px) rotate(0deg) translate(-50px, -32px); }
  to { transform: translate(-1px, -3px) translate(50px, 32px) rotate(-7deg) translate(-50px, -32px); }
}
@keyframes tear-bottom {
  from { transform: translate(0, 0) translate(50px, 68px) rotate(0deg) translate(-50px, -68px); }
  to { transform: translate(1px, 3px) translate(50px, 68px) rotate(4deg) translate(-50px, -68px); }
}