/* ==========================================================================
   LibPaste — main.css
   One stylesheet, mobile-first. Read top to bottom = low to high specificity.

     1. Fonts        self-hosted @font-face (no Google Fonts requests = GDPR-friendly)
     2. Tokens       colors, type, spacing, motion — every text color is WCAG AA checked
     3. Base         reset + element defaults + page transitions
     4. Layout       container, sections, grids
     5. Components   sky, scroll progress, header, buttons, hero, marquee, cards,
                     steps, FAQ, CTA, contact, footer, cookie banner
     6. Pages        legal pages, 404
     7. Utilities    visually-hidden, skip link
     8. Extras       welcome screen, sound button, secret terminal, achievement toasts, meteors
     9. Motion       keyframes, scroll reveals, pause/reduced-motion rules, print

   Motion rules of thumb used here:
     - Only transform-type properties, opacity and (briefly) blur are animated, so it stays smooth.
     - Looping "ambient" animations use  animation-play-state: var(--ambient-state, running)
       so they pause when off-screen or when the visitor hits "Pause animations".
     - Everything is switched off for people with "reduce motion" turned on in their OS.

   Breakpoints (min-width): 36rem (576px) · 48rem (768px) · 64rem (1024px)
   ========================================================================== */


/* 1. FONTS ---------------------------------------------------------------- */

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url("../fonts/inter-display-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
/* Metric-matched local fallbacks: text keeps its size while the web fonts load (less layout shift). */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 107.48%;
  ascent-override: 90.14%;
  descent-override: 22.44%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Inter Display Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("Helvetica Bold");
  font-weight: 800;
  size-adjust: 98.77%;
  ascent-override: 98.08%;
  descent-override: 24.42%;
  line-gap-override: 0%;
}


/* 2. TOKENS --------------------------------------------------------------- */

:root {
  color-scheme: dark;

  /* Palette sampled from the LibPaste moon icon.
     Contrast on --c-night-950 → text 17.9:1 · muted 9.9:1 · faint 6.8:1 · lavender-300 10.9:1 (AA needs 4.5:1) */
  --c-night-950: #07060c;
  --c-night-900: #0d0b16;
  --c-night-800: #15121f;
  --c-night-700: #1b1729;
  --c-line: rgb(var(--a300) / 0.14);
  --c-line-strong: rgb(var(--a300) / 0.28);
  --c-text: #f3f0fa;
  --c-text-muted: #b9b1cf;
  --c-text-faint: #9a91b3;
  /* Accent channels (R G B). The secret terminal's "theme" command swaps these, see THEMES below. */
  --a200: 233 227 255;
  --a300: 196 181 253;
  --a400: 165 148 249;
  --a600: 116 92 205;
  --a700: 88 72 160;
  --c-lavender-200: rgb(var(--a200));
  --c-lavender-300: rgb(var(--a300));
  --c-lavender-400: rgb(var(--a400));
  --c-petal: #f2d7ef;
  --c-on-accent: #120e22; /* text on lavender buttons: 7.4:1 or better */
  --c-success: #a7f3d0;

  /* Type */
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Inter Display", "Inter Display Fallback", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Fluid type scale: min @ 360px → max @ 1440px */
  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.3vw, 1.3rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.6vw, 3.75rem);
  --step-hero: clamp(3.4rem, 1.9rem + 8.5vw, 8.75rem);

  /* Space */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-s: 0.75rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: clamp(4rem, 3rem + 5vw, 7.5rem);

  --radius-s: 10px;
  --radius-m: 16px;
  --radius-l: 22px;
  --radius-pill: 999px;

  --container: 72rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);
  --header-h: 4rem;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* upgraded to a real spring below where supported */
  --dur-fast: 0.2s;
  --dur-med: 0.45s;
}

/* Themes from the secret terminal ("theme sakura" etc.). Only the accent color changes;
   the moon images get a matching tint. Default (no data-theme) is the lavender moon. */
[data-theme="sakura"] {
  --a200: 252 231 243;
  --a300: 249 168 212;
  --a400: 244 114 182;
  --a600: 190 70 140;
  --a700: 150 50 110;
  --img-filter: hue-rotate(72deg) saturate(1.15);
}

[data-theme="mint"] {
  --a200: 209 250 229;
  --a300: 110 231 183;
  --a400: 52 211 153;
  --a600: 16 150 110;
  --a700: 6 110 85;
  --img-filter: hue-rotate(-105deg) saturate(0.9);
}

[data-theme="ember"] {
  --a200: 254 243 199;
  --a300: 252 211 77;
  --a400: 251 191 36;
  --a600: 200 120 20;
  --a700: 150 85 15;
  --img-filter: hue-rotate(140deg) saturate(1.6);
}

[data-theme="ice"] {
  --a200: 207 250 254;
  --a300: 103 232 249;
  --a400: 34 211 238;
  --a600: 14 140 170;
  --a700: 10 100 125;
  --img-filter: hue-rotate(-50deg);
}

[data-theme="noir"] {
  --a200: 244 244 245;
  --a300: 212 212 216;
  --a400: 161 161 170;
  --a600: 113 113 122;
  --a700: 82 82 91;
  --img-filter: grayscale(1) contrast(1.05);
}

/* A real damped spring (≈7% overshoot), for small pops and slides */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --ease-spring: linear(0, 0.028, 0.101, 0.201, 0.317, 0.437, 0.554, 0.662, 0.758, 0.84, 0.908, 0.962, 1.003, 1.032, 1.052, 1.063, 1.068, 1.067, 1.064, 1.058, 1.05, 1.042, 1.034, 1.026, 1.019, 1.013, 1.008, 1.004, 1.001, 0.999, 0.997, 0.996, 0.995, 0.995, 0.996, 0.996, 0.996, 0.997, 0.997, 0.998, 1);
  }
}


/* 3. BASE ----------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--c-night-950);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

/* while the welcome screen or the terminal is open, the page behind doesn't scroll
   (the scrollbar's space is kept, so nothing jumps sideways) */
.intro-lock,
.term-lock {
  overflow: hidden;
  scrollbar-gutter: stable;
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--c-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  flex: 1;
}

/* main gets focus after the welcome screen closes; a ring around the whole page would just be noise */
main:focus {
  outline: none;
}

img,
picture,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p,
ul,
ol,
figure {
  margin: 0;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--c-lavender-300);
  text-decoration-color: rgb(var(--a300) / 0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--dur-fast), text-decoration-color var(--dur-fast), text-underline-offset var(--dur-med) var(--ease-out);
}

a:hover {
  color: var(--c-lavender-200);
  text-decoration-color: currentColor;
  text-underline-offset: 0.32em;
}

button {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 2px solid var(--c-lavender-300);
  outline-offset: 3px;
}

::selection {
  background: rgb(var(--a400) / 0.4);
  color: #fff;
}

/* Smooth cross-fade between pages (Chrome, Edge, Safari 18.2+; others just load normally) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: vt-fade-out 0.25s var(--ease-in-out) both;
}

::view-transition-new(root) {
  animation: vt-fade-in 0.45s var(--ease-out) both;
}


/* 4. LAYOUT --------------------------------------------------------------- */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--space-3xl) 0;
}

.section__head {
  max-width: 42rem;
  margin-bottom: var(--space-2xl);
}

.section__head--center {
  margin-inline: auto;
  text-align: center;
}

.section__title {
  font-size: var(--step-4);
}

.section__lead {
  margin-top: var(--space-m);
  font-size: var(--step-1);
  color: var(--c-text-muted);
}


/* 5. COMPONENTS ----------------------------------------------------------- */

/* --- Night sky (decorative, fixed behind everything) --- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(70rem 42rem at 50% -14rem, rgb(var(--a400) / 0.24), transparent 65%),
    radial-gradient(38rem 30rem at 100% 15%, rgb(var(--a600) / 0.13), transparent 70%),
    radial-gradient(40rem 32rem at 0% 55%, rgb(var(--a700) / 0.11), transparent 70%),
    var(--c-night-950);
}

/* two soft aurora clouds drifting very slowly */
.sky::before,
.sky::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: aurora 26s var(--ease-in-out) infinite alternate;
  animation-play-state: var(--ambient-state, running);
}

.sky::before {
  top: -30vmax;
  left: -20vmax;
  width: 70vmax;
  height: 55vmax;
  background: radial-gradient(closest-side, rgb(var(--a400) / 0.16), transparent);
}

.sky::after {
  top: 10vh;
  right: -25vmax;
  width: 60vmax;
  height: 50vmax;
  background: radial-gradient(closest-side, rgb(var(--a600) / 0.12), transparent);
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.sky__stars,
.sky__stars::after {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 95%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 95%);
}

.sky__stars {
  opacity: 0.6;
  background-image:
    radial-gradient(1.3px 1.3px at 25px 35px, rgb(255 255 255 / 0.9), transparent 70%),
    radial-gradient(1px 1px at 92px 124px, rgb(255 255 255 / 0.7), transparent 70%),
    radial-gradient(1.6px 1.6px at 163px 61px, rgb(var(--a200) / 0.9), transparent 70%),
    radial-gradient(1px 1px at 214px 188px, rgb(255 255 255 / 0.6), transparent 70%),
    radial-gradient(1px 1px at 58px 207px, rgb(255 255 255 / 0.5), transparent 70%),
    radial-gradient(1.2px 1.2px at 133px 14px, rgb(255 255 255 / 0.8), transparent 70%);
  background-size: 240px 240px;
}

.sky__stars::after {
  content: "";
  background-image:
    radial-gradient(1.5px 1.5px at 40px 300px, rgb(255 255 255 / 0.95), transparent 70%),
    radial-gradient(1.2px 1.2px at 280px 90px, rgb(var(--a200) / 0.9), transparent 70%),
    radial-gradient(1px 1px at 190px 250px, rgb(255 255 255 / 0.8), transparent 70%),
    radial-gradient(1.8px 1.8px at 330px 330px, rgb(242 215 239 / 0.9), transparent 70%);
  background-size: 377px 377px;
}

/* a few stars glint now and then (tiny elements = cheap to animate) */
.sky__sparkles i {
  position: absolute;
  width: 12px;
  height: 12px;
  background:
    radial-gradient(circle, #fff 0 1px, rgb(var(--a200) / 0.7) 1.6px, transparent 3.5px),
    linear-gradient(90deg, transparent 0 30%, rgb(255 255 255 / 0.85) 50%, transparent 70% 100%) center / 100% 1px no-repeat,
    linear-gradient(0deg, transparent 0 30%, rgb(255 255 255 / 0.85) 50%, transparent 70% 100%) center / 1px 100% no-repeat;
  opacity: 0;
  animation: glint 6s ease-in-out infinite;
  animation-play-state: var(--ambient-state, running);
}

.sky__sparkles i:nth-child(1) { top: 8%;  left: 12%; animation-duration: 6s;   animation-delay: -1s; }
.sky__sparkles i:nth-child(2) { top: 18%; left: 33%; animation-duration: 7s;   animation-delay: -3.5s; }
.sky__sparkles i:nth-child(3) { top: 6%;  left: 58%; animation-duration: 5.5s; animation-delay: -5s; }
.sky__sparkles i:nth-child(4) { top: 26%; left: 82%; animation-duration: 6.5s; animation-delay: -2s; }
.sky__sparkles i:nth-child(5) { top: 38%; left: 22%; animation-duration: 8s;   animation-delay: -4s; }
.sky__sparkles i:nth-child(6) { top: 14%; left: 90%; animation-duration: 7.5s; animation-delay: -6s; }
.sky__sparkles i:nth-child(7) { top: 34%; left: 64%; animation-duration: 6s;   animation-delay: -0.5s; }

/* Cherry-blossom petals, positions come from nth-child (no inline styles → strict CSP stays happy) */
.sky__petals i {
  position: absolute;
  top: 0;
  width: 10px;
  height: 12px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #fff6fd 0%, var(--c-petal) 45%, #cdb9f3 100%);
  box-shadow: 0 0 8px rgb(242 215 239 / 0.35);
  opacity: 0.75;
  will-change: transform;
  animation: petal-fall-a 20s linear infinite;
  animation-play-state: var(--ambient-state, running);
}

.sky__petals i:nth-child(even) { animation-name: petal-fall-b; }
.sky__petals i:nth-child(1)  { left: 4%;  animation-duration: 17s; animation-delay: -2s; }
.sky__petals i:nth-child(2)  { left: 12%; animation-duration: 22s; animation-delay: -9s;  width: 8px;  height: 10px; }
.sky__petals i:nth-child(3)  { left: 21%; animation-duration: 19s; animation-delay: -14s; }
.sky__petals i:nth-child(4)  { left: 29%; animation-duration: 25s; animation-delay: -5s;  width: 13px; height: 15px; opacity: 0.55; }
.sky__petals i:nth-child(5)  { left: 37%; animation-duration: 18s; animation-delay: -11s; width: 7px;  height: 9px; }
.sky__petals i:nth-child(6)  { left: 46%; animation-duration: 23s; animation-delay: -17s; }
.sky__petals i:nth-child(7)  { left: 54%; animation-duration: 20s; animation-delay: -3s;  width: 12px; height: 14px; opacity: 0.6; }
.sky__petals i:nth-child(8)  { left: 62%; animation-duration: 26s; animation-delay: -20s; width: 8px;  height: 10px; }
.sky__petals i:nth-child(9)  { left: 70%; animation-duration: 18s; animation-delay: -7s; }
.sky__petals i:nth-child(10) { left: 78%; animation-duration: 24s; animation-delay: -13s; width: 11px; height: 13px; }
.sky__petals i:nth-child(11) { left: 86%; animation-duration: 21s; animation-delay: -1s;  width: 7px;  height: 9px;  opacity: 0.5; }
.sky__petals i:nth-child(12) { left: 93%; animation-duration: 27s; animation-delay: -16s; }
.sky__petals i:nth-child(13) { left: 16%; animation-duration: 30s; animation-delay: -24s; width: 15px; height: 17px; opacity: 0.35; filter: blur(1px); }
.sky__petals i:nth-child(14) { left: 66%; animation-duration: 29s; animation-delay: -10s; width: 16px; height: 18px; opacity: 0.3;  filter: blur(1.5px); }

/* Shooting stars: a quick streak every so often */
.sky__shooting {
  position: absolute;
  top: 12%;
  left: 78%;
  width: 140px;
  height: 1.5px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fff, rgb(var(--a200) / 0.55) 25%, transparent);
  rotate: -21deg;
  opacity: 0;
  animation: shooting-star 13s linear 4s infinite;
  animation-play-state: var(--ambient-state, running);
}

.sky__shooting + .sky__shooting {
  top: 30%;
  left: 52%;
  width: 100px;
  animation-duration: 19s;
  animation-delay: 11s;
}

/* Calm variant for reading pages (legal): no petals or shooting stars */
.sky--calm .sky__petals,
.sky--calm .sky__shooting {
  display: none;
}

/* --- Scroll progress bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 70;
  height: 2px;
  background: linear-gradient(90deg, var(--c-lavender-400), var(--c-lavender-200));
  box-shadow: 0 0 12px rgb(var(--a400) / 0.7);
  transform-origin: 0 50%;
  scale: 0 1;
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: grow-x linear both;
    animation-timeline: scroll(root);
  }
}

/* --- Header --- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--c-line);
  background-color: rgb(7 6 12 / 0.72);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  transition: background-color 0.4s var(--ease-out), border-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}

/* With JS: see-through at the very top, glass once you scroll */
@media (scripting: enabled) {
  .site-header:not(.is-scrolled) {
    background-color: rgb(7 6 12 / 0);
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.site-header.is-scrolled {
  box-shadow: 0 12px 32px -24px rgb(0 0 0 / 0.9);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--c-text);
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
}

.brand:hover {
  color: #fff;
}

.brand img,
.brand__logo {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15), 0 0 18px rgb(var(--a400) / 0.45);
  transition: rotate 0.8s var(--ease-spring), box-shadow 0.3s;
}

.brand:hover img,
.brand:hover .brand__logo {
  rotate: -20deg;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.25), 0 0 26px rgb(var(--a400) / 0.8);
}

/* Same logo drawn by CSS. Used on the 404 page: paths inside CSS are relative to this
   stylesheet, so they work at any URL depth and when the file is opened from your PC. */
.brand__logo {
  flex: none;
  background: url("../img/libpaste-logo-96.png") center / cover no-repeat;
  background-image: image-set(url("../img/libpaste-logo-96.avif") type("image/avif"), url("../img/libpaste-logo-96.webp") type("image/webp"), url("../img/libpaste-logo-96.png") type("image/png"));
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* round icon button (sound on/off). Sound needs JavaScript, so no JS = no button. */
@media (scripting: none) {
  [data-sound-toggle] {
    display: none !important;
  }
}
/* round icon button (sound on/off) */
.icon-btn {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background: rgb(255 255 255 / 0.03);
  color: var(--c-text-muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.2s, background-color 0.2s, border-color 0.25s, scale 0.2s var(--ease-out);
}

.icon-btn:hover {
  color: var(--c-text);
  border-color: rgb(var(--a300) / 0.5);
  background: rgb(var(--a300) / 0.1);
}

.icon-btn:active {
  scale: 0.92;
}

.icon-btn svg {
  grid-area: 1 / 1;
  width: 20px;
  height: 20px;
  transition: opacity 0.25s, scale 0.5s var(--ease-spring), rotate 0.5s var(--ease-spring);
}

.icon-btn__on {
  opacity: 0;
  scale: 0.5;
}

.icon-btn[aria-pressed="true"] {
  color: var(--c-lavender-200);
  border-color: rgb(var(--a300) / 0.45);
  background: rgb(var(--a300) / 0.1);
}

.icon-btn[aria-pressed="true"] .icon-btn__on {
  opacity: 1;
  scale: 1;
}

.icon-btn[aria-pressed="true"] .icon-btn__off {
  opacity: 0;
  scale: 0.5;
  rotate: -30deg;
}

/* the sound waves pulse gently while sound is on */
.icon-btn[aria-pressed="true"] .icon-btn__wave {
  animation: sound-wave 1.8s ease-in-out infinite;
  animation-play-state: var(--ambient-state, running);
}

.icon-btn[aria-pressed="true"] .icon-btn__wave--2 {
  animation-delay: 0.3s;
}

.site-nav {
  display: none;
  position: relative;
  isolation: isolate;
}

.site-nav ul {
  display: flex;
  gap: 0.25rem;
  padding: 0;
  list-style: none;
}

.site-nav a {
  display: inline-block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--radius-pill);
  color: var(--c-text-muted);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  transition: color var(--dur-fast), background-color var(--dur-fast);
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--c-text);
}

/* No JS: simple hover background. With JS: a pill glides between links (see main.js). */
@media (scripting: none) {
  .site-nav a:hover {
    background: rgb(var(--a300) / 0.08);
  }
}

.site-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
  width: var(--w, 0px);
  height: 2.2rem;
  border-radius: var(--radius-pill);
  background: rgb(var(--a300) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--a300) / 0.2);
  translate: var(--x, 0px) -50%;
  opacity: 0;
  pointer-events: none;
  transition: translate 0.55s var(--ease-spring), width 0.55s var(--ease-spring), opacity 0.3s var(--ease-out);
}

.site-nav__pill.is-visible {
  opacity: 1;
}

.site-nav__pill.is-snapping {
  transition: opacity 0.3s var(--ease-out);
}

@media (min-width: 52rem) {
  .site-nav {
    display: block;
  }
}

/* --- Buttons --- */
.btn {
  --btn-py: 0.8rem;
  --btn-px: 1.3rem;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 44px;
  padding: var(--btn-py) var(--btn-px);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition:
    translate 0.35s var(--ease-out),
    scale 0.2s var(--ease-out),
    transform 0.5s var(--ease-spring),
    box-shadow 0.35s,
    background-color 0.2s,
    border-color 0.25s,
    color 0.2s;
}

.btn:active {
  scale: 0.97;
}

.btn svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.btn__arrow {
  transition: translate 0.45s var(--ease-spring);
}

.btn:hover .btn__arrow {
  translate: 4px 0;
}

.btn--primary {
  color: var(--c-on-accent);
  background: linear-gradient(135deg, var(--c-lavender-200) 0%, var(--c-lavender-300) 45%, var(--c-lavender-400) 100%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.3) inset, 0 12px 40px -12px rgb(var(--a400) / 0.75);
}

/* light sweep on hover */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / 0.6) 50%, transparent 70%);
  translate: -120% 0;
  transition: translate 0.8s var(--ease-out);
}

.btn--primary:hover {
  color: var(--c-on-accent);
  translate: 0 -2px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.4) inset, 0 18px 50px -12px rgb(var(--a400) / 0.95);
}

.btn--primary:hover::after {
  translate: 120% 0;
}

.btn--ghost {
  color: var(--c-text);
  background: rgb(255 255 255 / 0.03);
  border-color: var(--c-line-strong);
}

/* soft fill that sweeps in from the left */
.btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(var(--a300) / 0.12);
  transform-origin: 0 50%;
  scale: 0 1;
  transition: scale 0.55s var(--ease-out-expo);
}

.btn--ghost:hover {
  color: var(--c-text);
  border-color: rgb(var(--a300) / 0.5);
}

.btn--ghost:hover::before {
  scale: 1 1;
}

.btn--sm {
  --btn-py: 0.55rem;
  --btn-px: 1rem;
  min-height: 40px;
  font-size: var(--step--1);
}

.btn--lg {
  --btn-py: 1rem;
  --btn-px: 1.6rem;
  min-height: 52px;
  font-size: var(--step-1);
}

.btn:focus-visible {
  outline: 2px solid var(--c-lavender-200);
  outline-offset: 3px;
}

/* --- Hero --- */
.hero {
  position: relative;
  padding-block: clamp(2rem, 1rem + 3vw, 3.75rem) clamp(3rem, 2rem + 4vw, 5rem);
  text-align: center;
}

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

.hero__moon {
  position: relative;
  width: clamp(9.5rem, 7rem + 11vw, 14.5rem);
  width: min(clamp(9.5rem, 7rem + 11vw, 14.5rem), 22svh); /* shrink on short screens */
  aspect-ratio: 1;
  margin-bottom: var(--space-l);
  animation: moon-in 1.6s var(--ease-out-expo) both;
}

/* soft halo that slowly breathes */
.hero__moon::before {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(var(--a300) / 0.3), rgb(var(--a400) / 0.08) 55%, transparent 75%);
  animation: fade-in 2s var(--ease-out) 0.2s both, breathe 6s ease-in-out 2.2s infinite alternate;
  animation-play-state: running, var(--ambient-state, running);
}

/* rotating light ring */
.hero__ring {
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgb(var(--a200) / 0.95) 30%, transparent 45% 62%, rgb(242 215 239 / 0.75) 80%, transparent 95%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: ring-in 1.8s var(--ease-out-expo) 0.3s both, spin 14s linear infinite;
  animation-play-state: running, var(--ambient-state, running);
}

.hero__moon picture {
  width: 100%;
  height: 100%;
  animation: float 7s ease-in-out 1.6s infinite;
  animation-play-state: var(--ambient-state, running);
}

/* moon pictures follow the terminal theme (no filter on the default theme) */
.hero__img,
.brand img,
.brand__logo,
.notfound__moon,
.cta__card::before,
.server__icon,
.intro__logo {
  filter: var(--img-filter, none);
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.14),
    0 0 50px 6px rgb(var(--a400) / 0.4),
    0 0 140px 30px rgb(var(--a600) / 0.22);
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: var(--space-l);
  padding: 0.4rem 0.95rem 0.4rem 0.75rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: rgb(var(--a300) / 0.07);
  color: var(--c-lavender-200);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  animation: rise 0.9s var(--ease-out-expo) 0.35s both;
}

.eyebrow svg {
  width: 1.15rem;
  height: 1.15rem;
  color: var(--c-lavender-300);
}

/* the headset icon draws itself */
.eyebrow svg [pathLength] {
  stroke-dasharray: 1 2;
  animation: draw 1.6s var(--ease-in-out) 0.6s both;
}

.hero__title {
  padding-bottom: 0.06em;
  font-size: var(--step-hero);
  font-size: min(var(--step-hero), 15svh);
  line-height: 0.95;
  letter-spacing: -0.045em;
  color: var(--c-text);
  filter: drop-shadow(0 0 32px rgb(var(--a400) / 0.35));
  animation: unblur 1.3s var(--ease-out-expo) 0.15s both;
}

/* gradient text + a single light sheen gliding across it after it lands */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__title {
    background:
      linear-gradient(110deg, transparent 38%, rgb(255 255 255 / 0.9) 50%, transparent 62%) 200% 0 / 250% 100% no-repeat,
      linear-gradient(180deg, #fff 25%, var(--c-lavender-300) 72%, var(--c-lavender-400) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: unblur 1.3s var(--ease-out-expo) 0.15s both, sheen 1.8s var(--ease-in-out) 1.3s both;
  }
}

.hero__lead {
  max-width: 35rem;
  margin-top: var(--space-l);
  font-size: var(--step-1);
  color: var(--c-text-muted);
  animation: rise 0.9s var(--ease-out-expo) 0.5s both;
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  width: 100%;
  max-width: 22rem;
  margin-top: var(--space-xl);
  animation: rise 0.9s var(--ease-out-expo) 0.62s both;
}

.hero__note {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--c-text-faint);
  animation: rise 0.9s var(--ease-out-expo) 0.74s both;
}

.hero__note code {
  font-family: var(--font-mono);
  color: var(--c-text-muted);
}

@media (min-width: 36rem) {
  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: none;
  }
}

/* --- Marquee (decorative keyword strip) --- */
.marquee {
  overflow: hidden;
  padding-block: 1.1rem;
  border-block: 1px solid var(--c-line);
  background: rgb(13 11 22 / 0.55);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  animation: fade-in 1.2s var(--ease-out) 0.85s both;
}

.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite;
  animation-play-state: var(--ambient-state, running);
}

.marquee:hover .marquee__track {
  animation-play-state: paused;
}

.marquee__track span {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-text-muted);
}

.marquee__track span:nth-child(even) {
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--a300) / 0.6);
}

.marquee__track span::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  margin-inline: 1.6rem;
  background: var(--c-lavender-300);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}

/* --- Feature cards --- */
.features {
  display: grid;
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

@media (min-width: 40rem) {
  .features {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .features {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }
}

.card {
  position: relative;
  padding: var(--space-xl) var(--space-l);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, rgb(27 23 41 / 0.88), rgb(13 11 22 / 0.88));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05);
  transition: translate 0.5s var(--ease-out-expo), border-color 0.35s, box-shadow 0.5s var(--ease-out-expo);
}

/* cursor spotlight (position set by main.js via CSS variables) */
.card::before,
.contact-card::before,
.server::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--a300) / 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
}

.card:hover {
  translate: 0 -6px;
  border-color: rgb(var(--a300) / 0.38);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 60px -30px rgb(var(--a400) / 0.6);
}

.card:hover::before,
.contact-card:hover::before,
.server:hover::before {
  opacity: 1;
}

.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(var(--a300) / 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(var(--a300) / 0.2), rgb(var(--a400) / 0.05));
  box-shadow: 0 0 26px -8px rgb(var(--a400) / 0.6);
  color: var(--c-lavender-200);
  transition: scale 0.7s var(--ease-spring), rotate 0.7s var(--ease-spring), box-shadow 0.35s, border-color 0.35s;
}

.icon-tile svg {
  width: 1.5rem;
  height: 1.5rem;
}

.icon-tile svg [pathLength] {
  stroke-dasharray: 1 2;
}

:is(.card, .contact-card):hover .icon-tile {
  scale: 1.1;
  rotate: -6deg;
  border-color: rgb(var(--a300) / 0.45);
  box-shadow: 0 0 34px -6px rgb(var(--a400) / 0.85);
}

.card .icon-tile {
  margin-bottom: var(--space-l);
}

.card__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.card p {
  color: var(--c-text-muted);
}

/* --- Server panel (what's in the server): looks like a Discord channel list --- */
.server {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: linear-gradient(180deg, rgb(27 23 41 / 0.9), rgb(13 11 22 / 0.9));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.05), 0 40px 80px -50px rgb(0 0 0 / 0.9);
}

.server__head {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  padding: var(--space-l);
  border-bottom: 1px solid var(--c-line);
  background: rgb(var(--a300) / 0.04);
}

/* round like a Discord server icon, and it squares off a little on hover, like in Discord */
.server__icon {
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: url("../img/libpaste-logo-96.png") center / cover no-repeat;
  background-image: image-set(url("../img/libpaste-logo-96.avif") type("image/avif"), url("../img/libpaste-logo-96.webp") type("image/webp"), url("../img/libpaste-logo-96.png") type("image/png"));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15), 0 0 24px rgb(var(--a400) / 0.45);
  transition: border-radius 0.45s var(--ease-spring);
}

.server:hover .server__icon {
  border-radius: 32%;
}

.server__meta {
  flex: 1;
  min-width: 0;
}

.server__name {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.server__sub {
  margin-top: 0.15rem;
  font-size: var(--step--1);
  color: var(--c-text-muted);
}

/* live numbers replace the fallback text once /api/discord answers */
.server__live {
  display: none;
  flex-wrap: wrap;
  gap: 0.15rem 1rem;
}

.is-live .server__live {
  display: inline-flex;
}

.is-live .server__fallback {
  display: none;
}

.server__stat {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.server__stat::before {
  content: "";
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--c-text-faint);
}

.server__stat--online::before {
  background: #4ade80;
  animation: online-pulse 2.4s ease-out infinite;
  animation-play-state: var(--ambient-state, running);
}

.server__join {
  flex: none;
}

@media (max-width: 35.99rem) {
  .server__head {
    gap: var(--space-s);
    padding: var(--space-m);
  }

  .server__icon {
    width: 2.75rem;
    height: 2.75rem;
  }

  .server__live {
    gap: 0.1rem 0.75rem;
  }
}

.channels {
  display: grid;
  padding: 0;
  list-style: none;
}

.channel {
  padding: var(--space-l);
  border-top: 1px solid var(--c-line);
}

.channel:first-child {
  border-top: 0;
}

.channel__name {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.channel__name svg {
  flex: none;
  width: 1.1em;
  height: 1.1em;
  color: var(--c-text-faint);
}

.channel__topic {
  margin-top: 0.3rem;
  color: var(--c-text-muted);
}

@media (min-width: 40rem) {
  .channels {
    grid-template-columns: repeat(2, 1fr);
  }

  .channel:nth-child(2) {
    border-top: 0;
  }

  .channel:nth-child(even) {
    border-left: 1px solid var(--c-line);
  }
}

@media (min-width: 64rem) {
  .channels {
    grid-template-columns: repeat(3, 1fr);
  }

  .channel:nth-child(3) {
    border-top: 0;
  }

  .channel:nth-child(even) {
    border-left: 0;
  }

  .channel:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--c-line);
  }
}

/* --- Steps (how to join) --- */
.steps {
  display: grid;
  gap: var(--space-m);
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: var(--space-xl) var(--space-l);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: rgb(13 11 22 / 0.72);
  transition: translate 0.5s var(--ease-out-expo), border-color 0.35s, box-shadow 0.5s var(--ease-out-expo);
}

.step:hover {
  translate: 0 -6px;
  border-color: rgb(var(--a300) / 0.35);
  box-shadow: 0 24px 60px -30px rgb(var(--a400) / 0.5);
}

.step__num {
  display: block;
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-lavender-300);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .step__num {
    background: linear-gradient(180deg, #fff 0%, var(--c-lavender-200) 25%, var(--c-lavender-300) 50%, rgb(var(--a400) / 0.35) 100%) 0 100% / 100% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: background-position 0.7s var(--ease-out-expo);
  }

  .step:hover .step__num {
    background-position: 0 0;
  }
}

.step__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.step p {
  color: var(--c-text-muted);
}

@media (min-width: 48rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-l);
  }

  /* connector line between steps, draws itself after the steps appear */
  .step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.4rem;
    left: 100%;
    width: var(--space-l);
    height: 1px;
    background: linear-gradient(90deg, var(--c-line-strong), transparent);
    transform-origin: 0 50%;
    transition: scale 0.7s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + 0.45s);
  }
}

/* --- FAQ --- */
.faq {
  display: grid;
  gap: var(--space-s);
  max-width: 48rem;
  margin-inline: auto;
}

.faq__item {
  border: 1px solid var(--c-line);
  border-radius: var(--radius-m);
  background: rgb(13 11 22 / 0.72);
  transition: border-color 0.3s, background-color 0.3s;
}

.faq__item:hover {
  border-color: rgb(var(--a300) / 0.28);
}

.faq__item[open] {
  border-color: rgb(var(--a300) / 0.35);
  background: rgb(27 23 41 / 0.75);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-l);
  border-radius: inherit;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
  transition: color var(--dur-fast);
}

.faq__item summary:hover {
  color: var(--c-lavender-200);
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

/* plus icon that springs into an × */
.faq__item summary::after {
  content: "";
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  border: 1px solid var(--c-line-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--c-lavender-300), var(--c-lavender-300)) center / 11px 1.5px no-repeat,
    linear-gradient(var(--c-lavender-300), var(--c-lavender-300)) center / 1.5px 11px no-repeat;
  background-color: transparent;
  transition: rotate 0.6s var(--ease-spring), background-color 0.3s, border-color 0.3s;
}

.faq__item summary:hover::after {
  border-color: rgb(var(--a300) / 0.5);
  background-color: rgb(var(--a300) / 0.08);
}

.faq__item[open] summary::after {
  rotate: 135deg;
  background-color: rgb(var(--a300) / 0.12);
}

.faq__answer {
  padding: 0 var(--space-l) var(--space-l);
  color: var(--c-text-muted);
}

/* --- Call to action band --- */
.cta {
  padding-block: var(--space-3xl) 0;
}

.cta__card {
  position: relative;
  padding: clamp(2.75rem, 2rem + 4vw, 4.75rem) var(--space-l);
  overflow: hidden;
  isolation: isolate;
  border-radius: calc(var(--radius-l) + 8px);
  background:
    radial-gradient(70% 90% at 50% -10%, rgb(var(--a400) / 0.3), transparent 70%),
    linear-gradient(180deg, #1a1530, var(--c-night-900));
  text-align: center;
}

/* the LibPaste moon again, huge and faded, slowly turning in the corner */
.cta__card::before {
  content: "";
  position: absolute;
  top: -9rem;
  right: -8rem;
  z-index: -1;
  width: 22rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url("../img/libpaste-moon-265.png") center / cover no-repeat;
  background-image: image-set(url("../img/libpaste-moon-265.avif") type("image/avif"), url("../img/libpaste-moon-265.webp") type("image/webp"), url("../img/libpaste-moon-265.png") type("image/png"));
  -webkit-mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  mask-image: radial-gradient(circle, #000 35%, transparent 70%);
  opacity: 0.3;
  animation: spin 120s linear infinite;
  animation-play-state: var(--ambient-state, running);
}

/* stars inside the card */
.cta__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 30%, rgb(255 255 255 / 0.8), transparent 70%),
    radial-gradient(1px 1px at 22% 75%, rgb(255 255 255 / 0.6), transparent 70%),
    radial-gradient(1.6px 1.6px at 80% 82%, rgb(var(--a200) / 0.8), transparent 70%),
    radial-gradient(1px 1px at 92% 55%, rgb(255 255 255 / 0.6), transparent 70%),
    radial-gradient(1.2px 1.2px at 40% 15%, rgb(255 255 255 / 0.7), transparent 70%);
}

/* border + a light that runs around it */
.cta__border {
  position: absolute;
  inset: 0;
  padding: 1px;
  overflow: hidden;
  border-radius: inherit;
  background: rgb(var(--a300) / 0.25);
  pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.cta__border::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgb(var(--a300) / 0.45) 72%, rgb(255 255 255 / 0.95) 76%, rgb(var(--a300) / 0.45) 80%, transparent 90%);
  animation: spin 7s linear infinite;
  animation-play-state: var(--ambient-state, running);
}

.cta__title {
  font-size: var(--step-4);
}

.cta__text {
  max-width: 32rem;
  margin: var(--space-m) auto var(--space-xl);
  font-size: var(--step-1);
  color: var(--c-text);
  text-wrap: balance;
}

/* --- Contact --- */
.contact-grid {
  display: grid;
  gap: var(--space-m);
}

@media (min-width: 48rem) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-l);
  }
}

.contact-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-m);
  min-width: 0;
  padding: var(--space-l);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
  background: rgb(13 11 22 / 0.72);
  color: var(--c-text);
  text-decoration: none;
  transition: translate 0.5s var(--ease-out-expo), border-color 0.3s, background-color 0.3s, box-shadow 0.5s var(--ease-out-expo);
}

.contact-card:hover {
  color: var(--c-text);
  translate: 0 -4px;
  border-color: rgb(var(--a300) / 0.4);
  background: rgb(27 23 41 / 0.8);
  box-shadow: 0 24px 60px -32px rgb(var(--a400) / 0.55);
}

.contact-card__body {
  display: grid;
  flex: 1;
  gap: 0.1rem;
  min-width: 0;
}

.contact-card__label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-text-faint);
}

.contact-card__value {
  font-size: var(--step-1);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.contact-card__hint {
  font-size: var(--step--1);
  color: var(--c-text-muted);
}

.copy-btn {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.03);
  font-size: var(--step--1);
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, scale 0.2s var(--ease-out);
}

.copy-btn:hover {
  border-color: rgb(var(--a300) / 0.5);
  background: rgb(var(--a300) / 0.1);
}

.copy-btn:active {
  scale: 0.95;
}

/* copy icon morphs into a checkmark */
.copy-btn__icons {
  display: grid;
}

.copy-btn__icons > svg {
  grid-area: 1 / 1;
  width: 1rem;
  height: 1rem;
  transition: opacity 0.25s, scale 0.5s var(--ease-spring), rotate 0.5s var(--ease-spring);
}

.copy-btn__check {
  opacity: 0;
  scale: 0.4;
}

.copy-btn__check path {
  stroke-dasharray: 1 2;
}

.copy-btn.is-copied {
  border-color: rgb(167 243 208 / 0.5);
  color: var(--c-success);
}

.copy-btn.is-copied .copy-btn__copy {
  opacity: 0;
  scale: 0.4;
  rotate: -45deg;
}

.copy-btn.is-copied .copy-btn__check {
  opacity: 1;
  scale: 1;
}

.copy-btn.is-copied .copy-btn__check path {
  animation: draw 0.45s var(--ease-out) 0.05s both;
}

.copy-btn [data-copy-label] {
  display: inline-block;
}

.copy-btn.is-copied [data-copy-label] {
  animation: pop 0.5s var(--ease-spring);
}

/* --- Footer --- */
.site-footer {
  margin-top: var(--space-3xl);
  padding-block: var(--space-2xl) var(--space-xl);
  border-top: 1px solid var(--c-line);
  background: rgb(7 6 12 / 0.82);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-xl);
}

.site-footer__about {
  max-width: 22rem;
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--c-text-muted);
}

.footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  padding: 0;
  list-style: none;
}

/* underline that slides in from the left */
.footer-nav a,
.link-button {
  display: inline-block;
  padding: 0.35rem 0;
  border: 0;
  background: linear-gradient(currentColor, currentColor) 0 85% / 0 1px no-repeat;
  color: var(--c-text-muted);
  font-size: var(--step--1);
  text-decoration: none;
  cursor: pointer;
  transition: background-size 0.45s var(--ease-out-expo), color var(--dur-fast);
}

.footer-nav a:hover,
.link-button:hover {
  color: var(--c-text);
  background-size: 100% 1px;
}

.site-footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  grid-column: 1 / -1;
  padding-top: var(--space-l);
  border-top: 1px solid var(--c-line);
  font-size: var(--step--1);
  color: var(--c-text-faint);
}

/* the faint ">_" that opens the secret terminal */
.term-hint {
  flex: none;
  min-width: 2.5rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--c-text-faint);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.term-hint:hover {
  color: var(--c-lavender-200);
  border-color: var(--c-line-strong);
  background: rgb(var(--a300) / 0.08);
}

@media (min-width: 48rem) {
  .site-footer__inner {
    grid-template-columns: 1fr 1.4fr;
    align-items: start;
  }

  .footer-nav ul {
    justify-content: flex-end;
  }
}

/* --- Cookie consent banner --- */
.cookie {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  left: var(--gutter);
  z-index: 100;
  max-width: 24rem;
  padding: 1.1rem 1.25rem 1.25rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-l);
  background: rgb(17 14 28 / 0.94);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.85), 0 0 0 1px rgb(255 255 255 / 0.04) inset;
}

.cookie.is-visible {
  animation: cookie-in 0.8s var(--ease-spring) both;
}

.cookie.is-leaving {
  animation: cookie-out 0.35s var(--ease-in-out) both;
}

.cookie__title {
  margin-bottom: 0.35rem;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
}

.cookie__text {
  font-size: var(--step--1);
  color: var(--c-text-muted);
}

.cookie__actions {
  display: flex;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.cookie__actions .btn {
  flex: 1 1 0;
  padding-inline: 0.75rem;
}


/* 6. PAGES ---------------------------------------------------------------- */

/* --- Legal pages (privacy, terms) --- */
.legal {
  padding-block: var(--space-2xl) 0;
}

.prose {
  max-width: 46rem;
  margin-inline: auto;
}

.prose h1 {
  font-size: var(--step-4);
}

.prose .updated {
  margin-top: var(--space-s);
  font-size: var(--step--1);
  color: var(--c-text-faint);
}

.prose h2 {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-s);
  font-size: var(--step-2);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.prose p,
.prose ul {
  margin-top: var(--space-s);
  color: var(--c-text-muted);
}

.prose ul {
  padding-left: 1.25rem;
}

.prose li + li {
  margin-top: 0.4rem;
}

.prose li::marker {
  color: var(--c-lavender-300);
}

.prose strong {
  color: var(--c-text);
}

.prose code {
  padding: 0.1em 0.4em;
  border-radius: 6px;
  background: rgb(var(--a300) / 0.12);
  font-family: var(--font-mono);
  font-size: 0.88em;
  color: var(--c-lavender-200);
}

.callout {
  margin-top: var(--space-xl);
  padding: var(--space-l);
  border: 1px solid rgb(var(--a300) / 0.3);
  border-radius: var(--radius-m);
  background: rgb(var(--a300) / 0.07);
}

.prose .callout p {
  margin-top: 0;
  color: var(--c-text);
}

/* the top of a legal page settles in on load (pure CSS, so nothing waits for JS) */
.legal .back-link {
  animation: rise 0.8s var(--ease-out-expo) 0.05s both;
}

.prose h1 {
  animation: rise 0.9s var(--ease-out-expo) 0.12s both;
}

.prose .updated {
  animation: rise 0.9s var(--ease-out-expo) 0.2s both;
}

.callout {
  animation: rise 0.9s var(--ease-out-expo) 0.28s both;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: var(--space-l);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}

.back-link svg {
  width: 1rem;
  height: 1rem;
  transition: translate 0.45s var(--ease-spring);
}

.back-link:hover svg {
  translate: -4px 0;
}

/* --- 404 --- */
.notfound {
  display: grid;
  place-items: center;
  padding-block: var(--space-3xl) 0;
  text-align: center;
}

.notfound__code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.04em;
  font-family: var(--font-display);
  font-size: clamp(6rem, 3.5rem + 16vw, 13rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: var(--c-lavender-200);
}

.notfound__digit {
  filter: drop-shadow(0 0 30px rgb(var(--a400) / 0.35));
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .notfound__digit {
    background: linear-gradient(180deg, #fff 20%, var(--c-lavender-300) 70%, var(--c-lavender-400));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

/* the "0" is the LibPaste moon (CSS background, same reason as .brand__logo) */
.notfound__moon {
  position: relative;
  flex: none;
  width: 0.78em;
  height: 0.78em;
  margin-inline: 0.06em;
  border-radius: 50%;
  background: url("../img/libpaste-moon-265.png") center / cover no-repeat;
  background-image: image-set(url("../img/libpaste-moon-265.avif") type("image/avif"), url("../img/libpaste-moon-265.webp") type("image/webp"), url("../img/libpaste-moon-265.png") type("image/png"));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 50px 6px rgb(var(--a400) / 0.4);
}

/* light ring around the moon, like the homepage */
.notfound__moon::after {
  content: "";
  position: absolute;
  inset: -0.07em;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 15%, rgb(var(--a200) / 0.9) 30%, transparent 45% 62%, rgb(242 215 239 / 0.7) 80%, transparent 95%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  animation: spin 14s linear infinite;
  animation-play-state: var(--ambient-state, running);
}

/* the 4, the moon and the other 4 drop in one after another */
.notfound__code > :nth-child(1) {
  animation: drop-in 1s var(--ease-spring) 0.1s both;
}

.notfound__code > :nth-child(2) {
  animation: moon-pop 1.1s var(--ease-spring) 0.25s both, float 7s ease-in-out 1.4s infinite;
  animation-play-state: running, var(--ambient-state, running);
}

.notfound__code > :nth-child(3) {
  animation: drop-in 1s var(--ease-spring) 0.4s both;
}

.notfound__title {
  margin-top: var(--space-l);
  font-size: var(--step-3);
  animation: rise 0.9s var(--ease-out-expo) 0.55s both;
}

.notfound__text {
  max-width: 30rem;
  margin: var(--space-m) auto var(--space-xl);
  font-size: var(--step-1);
  color: var(--c-text-muted);
  animation: rise 0.9s var(--ease-out-expo) 0.65s both;
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-s);
  animation: rise 0.9s var(--ease-out-expo) 0.75s both;
}


/* 7. UTILITIES ------------------------------------------------------------ */

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 200;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--c-lavender-200);
  color: var(--c-on-accent);
  font-weight: 600;
  text-decoration: none;
  transition: top 0.35s var(--ease-spring);
}

.skip-link:focus {
  top: 0.75rem;
  color: var(--c-on-accent);
}


/* 8. EXTRAS -------------------------------------------------------------- */

/* --- Welcome screen (homepage, once per visit; see head.js + main.js) --- */
.intro {
  display: none;
}

.intro-active .intro,
.intro-leaving .intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: var(--gutter);
  overflow-y: auto;
  background:
    radial-gradient(56rem 34rem at 50% -8rem, rgb(var(--a400) / 0.2), transparent 70%),
    var(--c-night-950);
}

.intro__inner {
  position: relative;
  width: min(100%, 32rem);
}

/* the boot log: each line "types" in, like a mod loader starting up */
.intro__log {
  font-family: var(--font-mono);
  font-size: clamp(0.78rem, 0.72rem + 0.25vw, 0.9rem);
  line-height: 1.75;
  color: var(--c-text-muted);
}

.intro__line {
  display: block;
  white-space: pre;
  clip-path: inset(0 100% 0 0);
  animation: type-line 0.22s steps(14, end) forwards;
}

.intro__line--head {
  margin-bottom: 0.35rem;
  color: var(--c-text);
}

.intro__line:nth-child(1) { animation-delay: 0.1s; }
.intro__line:nth-child(2) { animation-delay: 0.34s; }
.intro__line:nth-child(3) { animation-delay: 0.46s; }
.intro__line:nth-child(4) { animation-delay: 0.58s; }
.intro__line:nth-child(5) { animation-delay: 0.7s; }
.intro__line:nth-child(6) { animation-delay: 0.82s; }
.intro__line:nth-child(7) { animation-delay: 0.94s; }

.intro__ok {
  color: var(--c-success);
}

/* blinking block cursor after the last line */
.intro__line:last-child::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 1.05em;
  margin-left: 0.4em;
  vertical-align: -0.18em;
  background: rgb(var(--a300));
  opacity: 0;
  animation: blink 1.05s steps(1) 1.25s infinite;
}

.intro__brand {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  margin-top: var(--space-xl);
  animation: rise 0.9s var(--ease-out-expo) 1.05s both;
}

.intro__logo {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: url("../img/libpaste-logo-96.png") center / cover no-repeat;
  background-image: image-set(url("../img/libpaste-logo-96.avif") type("image/avif"), url("../img/libpaste-logo-96.webp") type("image/webp"), url("../img/libpaste-logo-96.png") type("image/png"));
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.15), 0 0 30px rgb(var(--a400) / 0.55);
}

.intro__title {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--c-text);
}

.intro__sub {
  margin-top: 0.3rem;
  font-size: var(--step--1);
  color: var(--c-text-muted);
}

.intro__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-top: var(--space-xl);
  animation: rise 0.9s var(--ease-out-expo) 1.15s both;
}

.intro__actions .btn {
  flex: 1 1 auto;
}

.intro__hint {
  margin-top: var(--space-m);
  font-size: var(--step--1);
  color: var(--c-text-faint);
  animation: fade-in 0.8s var(--ease-out) 1.45s both;
}

/* no keyboard on phones, so no keyboard hint */
@media (pointer: coarse) {
  .intro__hint {
    display: none;
  }
}

/* leaving: the screen lifts away while the homepage builds up underneath */
.intro-leaving .intro {
  pointer-events: none;
  animation: intro-out 0.8s var(--ease-in-out) both;
}

.intro-leaving .intro__inner {
  animation: intro-out-inner 0.8s var(--ease-out-expo) both;
}

/* while the welcome screen is up, the homepage's entrance waits behind it */
.intro-active :is(.hero, .marquee),
.intro-active :is(.hero, .marquee) *,
.intro-active :is(.hero, .marquee) *::before,
.intro-active :is(.hero, .marquee) *::after {
  animation-play-state: paused !important;
}

/* used by the terminal's "reboot" command to restart the homepage entrance */
.hero-reset :is(.hero, .marquee),
.hero-reset :is(.hero, .marquee) *,
.hero-reset :is(.hero, .marquee) *::before,
.hero-reset :is(.hero, .marquee) *::after {
  animation: none !important;
}

/* --- Tapping the moon (seven taps opens the terminal) --- */
.hero__moon {
  -webkit-tap-highlight-color: transparent;
}

.hero__moon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgb(var(--a200) / 0.9), 0 0 30px rgb(var(--a300) / 0.6);
  opacity: 0;
  pointer-events: none;
}

.hero__moon.is-tapped::after {
  animation: moon-ripple 0.8s var(--ease-out) both;
}

.hero__moon.is-tapped .hero__img {
  animation: moon-tap 0.5s var(--ease-spring);
}

/* --- Secret terminal (built by terminal.js) --- */
.term {
  position: fixed;
  inset: 0;
  z-index: 900;
}

.term__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(4 3 8 / 0.5);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.35s var(--ease-out);
}

.term.is-open .term__backdrop {
  opacity: 1;
}

.term__panel {
  position: absolute;
  top: var(--term-top, 0px);
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  height: min(66vh, 36rem);
  max-height: calc(var(--term-vh, 100dvh) - 0.75rem);
  overflow: hidden;
  border-bottom: 1px solid rgb(var(--a300) / 0.4);
  background: linear-gradient(180deg, rgb(11 9 19 / 0.97), rgb(8 7 14 / 0.98));
  box-shadow:
    0 1px 0 rgb(var(--a300) / 0.25),
    0 18px 60px -10px rgb(var(--a400) / 0.25),
    0 40px 120px -20px rgb(0 0 0 / 0.95);
  font-family: var(--font-mono);
  translate: 0 -105%;
  transition: translate 0.55s var(--ease-spring);
}

.term.is-open .term__panel {
  translate: 0 0;
}

.term.is-closing .term__backdrop {
  opacity: 0;
}

.term.is-closing .term__panel {
  translate: 0 -105%;
  transition: translate 0.3s var(--ease-in-out);
}

@media (min-width: 48rem) {
  .term__panel {
    right: auto;
    left: 50%;
    width: min(100% - 2 * var(--gutter), 60rem);
    border: 1px solid rgb(var(--a300) / 0.3);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    translate: -50% -105%;
  }

  .term.is-open .term__panel {
    translate: -50% 0;
  }

  .term.is-closing .term__panel {
    translate: -50% -105%;
  }
}

/* faint CRT scanlines */
.term__panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.018) 0 1px, transparent 1px 3px);
  pointer-events: none;
}

.term__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  border-bottom: 1px solid var(--c-line);
  font-size: 0.8rem;
  color: var(--c-text-faint);
}

.term__dots {
  display: inline-flex;
  gap: 0.4rem;
}

.term__dots i {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: rgb(var(--a300) / 0.45);
}

.term__dots i + i {
  background: rgb(var(--a300) / 0.28);
}

.term__dots i + i + i {
  background: rgb(var(--a300) / 0.16);
}

.term__title {
  flex: 1;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.term__close {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: none;
  color: var(--c-text-muted);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

.term__close:hover {
  color: var(--c-text);
  border-color: var(--c-line-strong);
  background: rgb(var(--a300) / 0.08);
}

.term__screen {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.9rem 1.15rem 1.2rem;
  font-size: clamp(0.8rem, 0.76rem + 0.2vw, 0.9rem);
  line-height: 1.6;
  color: var(--c-text);
  scrollbar-width: thin;
  scrollbar-color: rgb(var(--a300) / 0.3) transparent;
}

.term__out {
  min-height: 1.6em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.term__echo {
  margin-top: 0.4rem;
}

.term__banner {
  margin-bottom: 0.6rem;
  font-size: clamp(9px, 2.55vw, 13px);
  line-height: 1.2;
  white-space: pre;
  color: rgb(var(--a300));
  text-shadow: 0 0 18px rgb(var(--a400) / 0.6);
}

.term__line {
  display: flex;
  align-items: baseline;
  margin-top: 0.4rem;
}

.term__prompt {
  flex: none;
  white-space: pre;
}

.term__input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-text);
  font: inherit;
  caret-color: rgb(var(--a300));
}

.term__input:focus,
.term__input:focus-visible {
  outline: none; /* the blinking caret shows where you are */
}

.term__link {
  color: rgb(var(--a300));
}

.term__probe {
  position: absolute;
  visibility: hidden;
  white-space: pre;
}

.term__chips {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  padding: 0.6rem 0.9rem 0.75rem;
  border-top: 1px solid var(--c-line);
  scrollbar-width: none;
}

.term__chip {
  flex: none;
  min-height: 36px;
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--c-line-strong);
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / 0.03);
  color: var(--c-text-muted);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

.term .c-accent { color: rgb(var(--a300)); }
.term .c-text { color: var(--c-text); }
.term .c-faint { color: var(--c-text-faint); }
.term .c-ok { color: #86efac; }
.term .c-err { color: #fda4af; }
.term .c-warn { color: #fcd34d; }
.term .swatch--moon { color: #a594f9; }
.term .swatch--sakura { color: #f472b6; }
.term .swatch--mint { color: #34d399; }
.term .swatch--ember { color: #fbbf24; }
.term .swatch--ice { color: #22d3ee; }
.term .swatch--noir { color: #a1a1aa; }

/* "rm -rf /" */
.is-glitching .term__panel {
  animation: glitch 0.65s steps(2, jump-none) both;
}

/* "matrix" */
.term-matrix {
  position: fixed;
  inset: 0;
  z-index: 1100;
  width: 100%;
  height: 100%;
  pointer-events: none;
  animation: fade-in 0.4s ease both;
  transition: opacity 0.5s ease;
}

.term-matrix.is-leaving {
  opacity: 0;
}

/* --- Achievement toasts --- */
.toasts {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--gutter) + var(--toast-lift, 0px) + env(safe-area-inset-bottom, 0px));
  z-index: 950;
  display: grid;
  justify-items: end;
  gap: 0.6rem;
  width: min(22rem, 100% - 2 * var(--gutter));
  pointer-events: none;
}

.toast {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  padding: 0.8rem 1rem 0.8rem 0.8rem;
  overflow: hidden;
  border: 1px solid rgb(var(--a300) / 0.35);
  border-radius: 16px;
  background: rgb(17 14 28 / 0.96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px -18px rgb(0 0 0 / 0.9), 0 0 40px -12px rgb(var(--a400) / 0.5);
  color: var(--c-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  animation: toast-in 0.75s var(--ease-spring) both;
  transition: border-color 0.2s;
}

/* a light sweeps across as it lands */
.toast::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgb(255 255 255 / 0.14) 50%, transparent 65%);
  translate: -120% 0;
  animation: toast-sheen 1.2s var(--ease-out) 0.35s both;
  pointer-events: none;
}

.toast:hover {
  border-color: rgb(var(--a300) / 0.6);
}

.toast.is-leaving {
  animation: toast-out 0.4s var(--ease-in-out) both;
}

.toast__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgb(var(--a200)), rgb(var(--a400)));
  color: var(--c-on-accent);
  box-shadow: 0 0 22px -4px rgb(var(--a400) / 0.8);
  animation: pop 0.6s var(--ease-spring) 0.15s both;
}

.toast__body {
  display: grid;
  min-width: 0;
}

.toast__kicker {
  font-size: 0.78rem;
  color: var(--c-text-faint);
}

.toast__title {
  font-weight: 600;
  line-height: 1.3;
}

.toast__text {
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--c-text-muted);
}

@media (max-width: 35.99rem) {
  .toasts {
    left: var(--gutter);
    width: auto;
    justify-items: stretch;
  }

  .toast {
    padding: 0.65rem 0.85rem 0.65rem 0.65rem;
  }

  .toast__icon {
    width: 2.25rem;
    height: 2.25rem;
  }
}

/* --- Meteor shower (the Konami code) --- */
.meteors {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.meteors i {
  position: absolute;
  top: var(--y);
  left: var(--x);
  width: var(--len);
  height: 2px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #fff, rgb(var(--a200) / 0.7) 25%, transparent);
  box-shadow: 0 0 10px rgb(var(--a200) / 0.6);
  rotate: -32deg;
  opacity: 0;
  animation: meteor var(--time) linear var(--delay) both;
}


/* 9. MOTION --------------------------------------------------------------- */

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

@keyframes rise {
  from { opacity: 0; translate: 0 18px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes unblur {
  from { filter: blur(14px) drop-shadow(0 0 32px rgb(var(--a400) / 0)); scale: 0.96; }
  to { filter: blur(0) drop-shadow(0 0 32px rgb(var(--a400) / 0.35)); scale: 1; }
}

@keyframes sheen {
  from { background-position: 200% 0, 0 0; }
  to { background-position: -100% 0, 0 0; }
}

@keyframes moon-in {
  from { opacity: 0; scale: 0.8; filter: blur(14px); }
  to { opacity: 1; scale: 1; filter: blur(0); }
}

@keyframes ring-in {
  from { opacity: 0; scale: 0.85; }
}

@keyframes breathe {
  from { opacity: 0.75; scale: 0.96; }
  to { opacity: 1; scale: 1.04; }
}

@keyframes spin {
  to { rotate: 360deg; }
}

@keyframes float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -10px; }
}

@keyframes draw {
  from { stroke-dashoffset: 1.01; }
  to { stroke-dashoffset: 0; }
}

@keyframes pop {
  0% { scale: 0.8; }
  100% { scale: 1; }
}

@keyframes glint {
  0%, 100% { opacity: 0; scale: 0.3; rotate: 0deg; }
  50% { opacity: 1; scale: 1; rotate: 45deg; }
}

@keyframes aurora {
  from { translate: 0 0; scale: 1; }
  to { translate: 12vmax 6vmax; scale: 1.15; }
}

@keyframes shooting-star {
  0% { opacity: 0; translate: 0 0; }
  1.5% { opacity: 1; }
  7% { opacity: 0; translate: -520px 200px; }
  100% { opacity: 0; translate: -520px 200px; }
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}

@keyframes petal-fall-a {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) rotateY(0deg); }
  30%  { transform: translate3d(4vw, 25vh, 0) rotate(120deg) rotateY(180deg); }
  60%  { transform: translate3d(-3vw, 60vh, 0) rotate(220deg) rotateY(360deg); }
  100% { transform: translate3d(5vw, 115vh, 0) rotate(360deg) rotateY(540deg); }
}

@keyframes petal-fall-b {
  0%   { transform: translate3d(0, -10vh, 0) rotate(0deg) rotateX(0deg); }
  35%  { transform: translate3d(-5vw, 30vh, 0) rotate(-90deg) rotateX(180deg); }
  70%  { transform: translate3d(3vw, 72vh, 0) rotate(-200deg) rotateX(360deg); }
  100% { transform: translate3d(-4vw, 115vh, 0) rotate(-300deg) rotateX(540deg); }
}

@keyframes drop-in {
  from { opacity: 0; translate: 0 -0.35em; scale: 0.9; }
}

@keyframes moon-pop {
  from { opacity: 0; scale: 0.4; rotate: -40deg; }
}

@keyframes cookie-in {
  from { opacity: 0; translate: 0 28px; scale: 0.96; }
}

@keyframes cookie-out {
  to { opacity: 0; translate: 0 16px; scale: 0.97; }
}

@keyframes answer-in {
  from { opacity: 0; translate: 0 -8px; }
}

@keyframes soft-in {
  from { opacity: 0; translate: 0 14px; }
}

@keyframes hero-scroll {
  to { opacity: 0.15; translate: 0 16vh; scale: 0.96; }
}

@keyframes grow-x {
  to { scale: 1 1; }
}

@keyframes vt-fade-out {
  to { opacity: 0; }
}

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

@keyframes failsafe-show {
  to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; stroke-dashoffset: 0; }
}

@keyframes sound-wave {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes online-pulse {
  0% { box-shadow: 0 0 0 0 rgb(74 222 128 / 0.5); }
  70%, 100% { box-shadow: 0 0 0 7px rgb(74 222 128 / 0); }
}

@keyframes type-line {
  to { clip-path: inset(0 0 0 0); }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes intro-out {
  to { opacity: 0; visibility: hidden; }
}

@keyframes intro-out-inner {
  to { opacity: 0; scale: 1.04; filter: blur(8px); }
}

@keyframes moon-ripple {
  from { opacity: 1; scale: 1; }
  to { opacity: 0; scale: 1.45; }
}

@keyframes moon-tap {
  30% { scale: 0.93; }
}

@keyframes glitch {
  0% { transform: none; filter: none; }
  15% { transform: translate(-7px, 2px) skewX(-6deg); filter: hue-rotate(90deg) contrast(1.4); }
  30% { transform: translate(6px, -3px); filter: invert(0.12); }
  45% { transform: translate(-3px, 0) skewX(4deg); filter: hue-rotate(-60deg) saturate(2); }
  60% { transform: translate(4px, 2px); filter: none; }
  80% { transform: translate(-2px, -1px) skewX(-2deg); filter: contrast(1.6); }
  100% { transform: none; filter: none; }
}

@keyframes toast-in {
  from { opacity: 0; translate: 0 18px; scale: 0.94; }
}

@keyframes toast-out {
  to { opacity: 0; translate: 0 10px; scale: 0.96; }
}

@keyframes toast-sheen {
  to { translate: 120% 0; }
}

@keyframes meteor {
  0% { opacity: 0; translate: 0 0; }
  8% { opacity: 1; }
  100% { opacity: 0; translate: -70vw 44vw; }
}

/* --- Scroll reveals ---------------------------------------------------------
   Elements with .reveal fade/slide in the first time they scroll into view (main.js adds
   .is-in). Things that enter together appear one after another (--reveal-delay).
   The hidden starting state only applies when JS is on and motion is allowed, so the
   content is always readable without JS. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    translate: 0 28px;
    scale: 0.985;
  }

  .reveal.is-in {
    opacity: 1;
    translate: 0 0;
    scale: 1;
    transition:
      opacity 0.9s var(--ease-out-expo) var(--reveal-delay, 0ms),
      translate 1.1s var(--ease-out-expo) var(--reveal-delay, 0ms),
      scale 1.1s var(--ease-out-expo) var(--reveal-delay, 0ms);
  }

  .reveal--soft {
    translate: 0 14px;
    scale: 1;
  }

  .reveal--scale {
    translate: 0 24px;
    scale: 0.94;
  }

  /* children of a card rise one after another */
  .reveal.reveal-stack > * {
    opacity: 0;
    translate: 0 12px;
  }

  .reveal.reveal-stack.is-in > * {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.8s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + var(--stack-delay, 0ms)),
      translate 1s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + var(--stack-delay, 0ms));
  }

  .reveal-stack > :nth-child(1) { --stack-delay: 120ms; }
  .reveal-stack > :nth-child(2) { --stack-delay: 200ms; }
  .reveal-stack > :nth-child(3) { --stack-delay: 280ms; }
  .reveal-stack > :nth-child(4) { --stack-delay: 360ms; }

  /* headings: each word rises out of a mask (main.js wraps the words) */
  .reveal--split {
    opacity: 1;
    translate: none;
    scale: none;
  }

  .reveal--split:not(.is-split) {
    opacity: 0;
  }

  .reveal--split .split-word > span {
    opacity: 0;
    translate: 0 110%;
    rotate: 4deg;
  }

  .reveal--split.is-in .split-word > span {
    opacity: 1;
    translate: 0 0;
    rotate: 0deg;
    transition:
      opacity 0.6s var(--ease-out) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 60ms),
      translate 1s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 60ms),
      rotate 1s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + var(--i, 0) * 60ms);
  }

  /* icons draw themselves once their card is in */
  .reveal .icon-tile svg [pathLength] {
    stroke-dashoffset: 1.01;
  }

  .reveal.is-in .icon-tile svg [pathLength] {
    animation: draw 1.1s var(--ease-in-out) calc(var(--reveal-delay, 0ms) + 0.35s) both;
  }

  /* channels in the server panel slide in one after another */
  .server.reveal .channel {
    opacity: 0;
    translate: 0 10px;
  }

  .server.reveal.is-in .channel {
    opacity: 1;
    translate: 0 0;
    transition:
      opacity 0.7s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + 150ms + var(--channel, 0) * 70ms),
      translate 0.9s var(--ease-out-expo) calc(var(--reveal-delay, 0ms) + 150ms + var(--channel, 0) * 70ms);
  }

  .channel:nth-child(2) { --channel: 1; }
  .channel:nth-child(3) { --channel: 2; }
  .channel:nth-child(4) { --channel: 3; }
  .channel:nth-child(5) { --channel: 4; }
  .channel:nth-child(6) { --channel: 5; }

  html:not(.js) .server.reveal .channel {
    animation: failsafe-show 0.6s ease-out 3.5s both;
  }

  /* step connector lines start collapsed */
  .step.reveal:not(.is-in)::after {
    scale: 0 1;
  }

  /* failsafe: if main.js never runs (blocked, offline...), show everything anyway */
  html:not(.js) :is(.reveal, .reveal-stack > *, .split-word > span, .reveal .icon-tile svg [pathLength]) {
    animation: failsafe-show 0.6s ease-out 3.5s both;
  }

  html:not(.js) .step.reveal::after {
    animation: failsafe-show 0.6s ease-out 3.5s both;
  }
}

/* split words: the mask that each word rises out of */
.split-word {
  display: inline-block;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  overflow: hidden;
  overflow: clip;
  vertical-align: top;
}

.split-word > span {
  display: inline-block;
  transform-origin: 0 100%;
}

/* --- Motion that only runs when the visitor hasn't asked for less --- */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* icons redraw when you hover their card */
  :is(.card, .contact-card):hover .icon-tile svg [pathLength] {
    animation: draw 0.9s var(--ease-in-out) both;
  }

  /* FAQ answers fade in as they open */
  .faq__item[open] .faq__answer {
    animation: answer-in 0.5s var(--ease-out-expo) both;
  }

  /* legal pages: paragraphs fade up as they scroll in (scroll-linked, no JS) */
  @supports (animation-timeline: view()) {
    .prose > :is(h2, p, ul):not(.updated) {
      animation: soft-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }

  /* hero gently scrolls away (scroll-linked, Chromium + Safari 26) */
  @supports (animation-timeline: view()) {
    .hero__inner {
      animation: hero-scroll linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }

  /* FAQ answers slide open and closed (Chromium 131+); others open instantly */
  @supports (interpolate-size: allow-keywords) {
    .faq {
      interpolate-size: allow-keywords;
    }

    .faq__item::details-content {
      block-size: 0;
      overflow: hidden;
      transition: block-size 0.45s var(--ease-out-expo), content-visibility 0.45s allow-discrete;
    }

    .faq__item[open]::details-content {
      block-size: auto;
    }
  }
}

/* --- Pausing ---------------------------------------------------------------
   .is-offscreen: set by main.js on sections you can't see (saves battery).
   .motion-paused: the "Pause animations" button in the footer. */
.is-offscreen,
.motion-paused {
  --ambient-state: paused;
}

.motion-paused .sky__petals,
.motion-paused .sky__shooting,
.motion-paused .sky__sparkles {
  display: none;
}

/* "Pause animations": the welcome screen shows up fully drawn */
.motion-paused :is(.intro__line, .intro__brand, .intro__actions, .intro__hint) {
  clip-path: none;
  animation: none;
}

/* --- Reduced motion: switch it all off --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .sky__petals,
  .sky__shooting,
  .sky__sparkles,
  .cta__border::before,
  .meteors,
  .term-matrix {
    display: none;
  }

  /* the welcome screen appears fully drawn instead of typing itself out */
  .intro *,
  .intro *::after {
    animation-delay: 0s !important;
  }
}

/* --- Print: plain and fully visible --- */
@media print {
  .sky,
  .scroll-progress,
  .cookie,
  .marquee,
  .site-header,
  .intro,
  .term,
  .toasts,
  .meteors,
  .term-hint {
    display: none !important;
  }

  .reveal,
  .reveal *,
  .split-word > span {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
  }
}