/* ==========================================================================
   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. 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(196 181 253 / 0.14);
  --c-line-strong: rgb(196 181 253 / 0.28);
  --c-text: #f3f0fa;
  --c-text-muted: #b9b1cf;
  --c-text-faint: #9a91b3;
  --c-lavender-200: #e9e3ff;
  --c-lavender-300: #c4b5fd;
  --c-lavender-400: #a594f9;
  --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;
}

/* 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);
}

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;
}

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(196 181 253 / 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(165 148 249 / 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(165 148 249 / 0.24), transparent 65%),
    radial-gradient(38rem 30rem at 100% 15%, rgb(116 92 205 / 0.13), transparent 70%),
    radial-gradient(40rem 32rem at 0% 55%, rgb(88 72 160 / 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(165 148 249 / 0.16), transparent);
}

.sky::after {
  top: 10vh;
  right: -25vmax;
  width: 60vmax;
  height: 50vmax;
  background: radial-gradient(closest-side, rgb(116 92 205 / 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(233 227 255 / 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(233 227 255 / 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(233 227 255 / 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(233 227 255 / 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(165 148 249 / 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(165 148 249 / 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(165 148 249 / 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-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(196 181 253 / 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(196 181 253 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(196 181 253 / 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(165 148 249 / 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(165 148 249 / 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(196 181 253 / 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(196 181 253 / 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(196 181 253 / 0.3), rgb(165 148 249 / 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(233 227 255 / 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);
}

.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(165 148 249 / 0.4),
    0 0 140px 30px rgb(120 100 220 / 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(196 181 253 / 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(165 148 249 / 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(196 181 253 / 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 {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(196 181 253 / 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.4s;
}

.card:hover {
  translate: 0 -6px;
  border-color: rgb(196 181 253 / 0.38);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08), 0 24px 60px -30px rgb(165 148 249 / 0.6);
}

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

.icon-tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid rgb(196 181 253 / 0.25);
  border-radius: 14px;
  background: linear-gradient(135deg, rgb(196 181 253 / 0.2), rgb(165 148 249 / 0.05));
  box-shadow: 0 0 26px -8px rgb(165 148 249 / 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(196 181 253 / 0.45);
  box-shadow: 0 0 34px -6px rgb(165 148 249 / 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);
}

/* --- 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(196 181 253 / 0.35);
  box-shadow: 0 24px 60px -30px rgb(165 148 249 / 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(165 148 249 / 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(196 181 253 / 0.28);
}

.faq__item[open] {
  border-color: rgb(196 181 253 / 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(196 181 253 / 0.5);
  background-color: rgb(196 181 253 / 0.08);
}

.faq__item[open] summary::after {
  rotate: 135deg;
  background-color: rgb(196 181 253 / 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(165 148 249 / 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(233 227 255 / 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(196 181 253 / 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(196 181 253 / 0.45) 72%, rgb(255 255 255 / 0.95) 76%, rgb(196 181 253 / 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(196 181 253 / 0.4);
  background: rgb(27 23 41 / 0.8);
  box-shadow: 0 24px 60px -32px rgb(165 148 249 / 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(196 181 253 / 0.5);
  background: rgb(196 181 253 / 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 {
  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);
}

@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(196 181 253 / 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(196 181 253 / 0.3);
  border-radius: var(--radius-m);
  background: rgb(196 181 253 / 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(165 148 249 / 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(165 148 249 / 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(233 227 255 / 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. 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(165 148 249 / 0)); scale: 0.96; }
  to { filter: blur(0) drop-shadow(0 0 32px rgb(165 148 249 / 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; }
}

/* --- 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;
  }

  /* 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;
}

/* --- 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 {
    display: none;
  }
}

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

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