/* aniseed.com: the dashboard's sign-in screen (app.aniseed.com) to the pixel where they share parts: the Anise at 32 px
   and the white wordmark at 16 px, 24 px in from the top left; the plain Anise on the sidebar's tone in the right half;
   the same dark colours. The left half is the brand's editorial voice: an Inter Tight headline and a Newsreader lead.
   The Anise draws in as the brand's motion section gives it: petals from 12 o'clock, 500 ms each, 320 ms apart. */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/InterTight-Regular.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/InterTight-Medium.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Newsreader-Regular.woff2") format("woff2"); }

:root {
  color-scheme: dark;
  /* The dashboard's dark tokens (aniseed-portal src/app.css and Arc's foundation). */
  --background: #0c0b0f;
  --sidebar: #09080c;
  --border: #2b2733;
  --foreground: #f2f2f2;
  --text-secondary: #b4b4b4;
  --text-muted: #8c8c8c;
  --accent: #a78bff;
  --font-ui: "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-read: Newsreader, Georgia, serif;
  --ease: cubic-bezier(.2, 0, 0, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, p { margin: 0; }

/* The two halves, as the sign-in screen has them. */
.landing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 100dvh; }
.side { position: relative; display: grid; place-items: center; overflow: hidden; padding: 80px 24px; }
.brand { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 12px; }
.brand img { display: block; }
.brand .wordmark { width: auto; height: 16px; }
.art { display: grid; place-items: center; overflow: hidden; border-left: 1px solid var(--border); background: var(--sidebar); }
.art .anise { width: min(62%, 560px); height: auto; }
.foot { position: absolute; right: 16px; bottom: 24px; left: 16px; color: var(--text-muted); font-size: 12px; text-align: center; }

/* The words: a small label, the headline, a serif lead and the way in. */
.intro { display: grid; width: min(520px, 100%); justify-items: start; }
.intro-anise { display: none; }
.label { margin-bottom: 20px; color: var(--text-muted); font: 500 12px/16px var(--font-ui); letter-spacing: .12em; text-transform: uppercase; }
h1 { font: 400 clamp(2.5rem, 4.4vw, 4rem)/1.06 var(--font-ui); letter-spacing: -.02em; text-wrap: balance; }
.lead { margin-top: 24px; color: var(--text-secondary); font: 400 clamp(1.25rem, 1.6vw, 1.5rem)/1.5 var(--font-read); text-wrap: pretty; }
.rule { width: 48px; height: 1px; margin-top: 32px; background: var(--border); }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  margin-top: 32px;
  padding: 0 22px;
  border: 1px solid var(--foreground);
  border-radius: 8px;
  background: var(--foreground);
  color: var(--background);
  font: 500 15px/20px var(--font-ui);
  text-decoration: none;
  transition: opacity 120ms ease-out;
}
.button svg { width: 16px; height: 16px; flex: none; }
@media (hover: hover) and (pointer: fine) { .button:hover { opacity: .91; } }
.button:active { opacity: .84; }
.button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Entering: the words fade and rise 8 px, a little apart; the Anise draws along its lines. */
@keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.intro > :not(.intro-anise) { animation: enter 400ms var(--ease) both; }
.intro > .h { animation-delay: 60ms; }
.intro > .lead { animation-delay: 120ms; }
.intro > .rule { animation-delay: 180ms; }
.intro > .button { animation-delay: 240ms; }
.anise .petal, .anise .core { stroke-dasharray: 1; }
.anise .petal { animation: draw 500ms linear both; }
.anise .petal:nth-child(1) { animation-delay: 600ms; }
.anise .petal:nth-child(2) { animation-delay: 920ms; }
.anise .petal:nth-child(3) { animation-delay: 1240ms; }
.anise .petal:nth-child(4) { animation-delay: 1560ms; }
.anise .petal:nth-child(5) { animation-delay: 1880ms; }
.anise .petal:nth-child(6) { animation-delay: 2200ms; }
.anise .petal:nth-child(7) { animation-delay: 2520ms; }
.anise .petal:nth-child(8) { animation-delay: 2840ms; }
.anise .vein { animation: fade-in 400ms var(--ease) both; }
.anise .vein:nth-child(1) { animation-delay: 1100ms; }
.anise .vein:nth-child(2) { animation-delay: 1420ms; }
.anise .vein:nth-child(3) { animation-delay: 1740ms; }
.anise .vein:nth-child(4) { animation-delay: 2060ms; }
.anise .vein:nth-child(5) { animation-delay: 2380ms; }
.anise .vein:nth-child(6) { animation-delay: 2700ms; }
.anise .vein:nth-child(7) { animation-delay: 3020ms; }
.anise .vein:nth-child(8) { animation-delay: 3340ms; }
.anise .core { animation: draw 500ms linear 3340ms both; }
/* The not-found page shows the Anise finished. */
.still .anise * { animation: none; }

/* One column on narrow screens, as the sign-in has; the Anise moves above the words. */
@media (max-width: 960px) {
  .landing { grid-template-columns: minmax(0, 1fr); }
  .art { display: none; }
  .side { padding: 96px 20px 88px; }
  .intro-anise { display: block; width: min(44vw, 180px); margin-bottom: 32px; }
  .intro-anise .anise { width: 100%; height: auto; }
}

/* With reduced motion, everything is simply there: the finished Anise, still. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }