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

html {
  -webkit-text-size-adjust: 100%;
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

body {
  transition: background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * Motion serves interaction & theme surfaces — not universal * (no per-pixel backdrop-filter transitions).
 * See DEVELOPMENT.md §9.
 */
a,
button,
input,
textarea,
select,
summary {
  transition:
    color 0.2s ease,
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    opacity 0.2s ease;
}

.lc-header,
.lc-mobile-header,
.lc-sidebar__glass,
.lc-island,
.lc-post,
.lc-pagehead,
.lc-main__surface {
  transition:
    color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {

  html,
  body {
    transition: none;
  }

  a,
  button,
  input,
  textarea,
  select,
  summary,
  .lc-header,
  .lc-mobile-header,
  .lc-sidebar__glass,
  .lc-island,
  .lc-post,
  .lc-pagehead,
  .lc-main__surface,
  .lc-glass {
    transition: none;
  }
}

body.lc-body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--lc-font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--lc-on-surface);
  background: var(--lc-surface);
}

::selection {
  background: var(--lc-highlight-bg);
  color: var(--lc-highlight-color);
}

.lc-mesh {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.lc-mesh__blob {
  position: absolute;
  width: clamp(220px, 32vw, 420px);
  height: clamp(220px, 32vw, 420px);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
      var(--lc-mesh),
      transparent 65%);
  filter: blur(60px);
  opacity: var(--lc-mesh-blob-opacity);
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

@keyframes blob-drift-a {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }

  25% {
    transform: translate3d(6vw, 4vh, 0) scale(1.08);
    border-radius: 65% 35% 55% 45% / 55% 45% 65% 35%;
  }

  50% {
    transform: translate3d(4vw, -5vh, 0) scale(0.96);
    border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%;
  }

  75% {
    transform: translate3d(-5vw, 3vh, 0) scale(1.05);
    border-radius: 55% 45% 65% 35% / 35% 65% 45% 55%;
  }
}

@keyframes blob-drift-b {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }

  33% {
    transform: translate3d(-5vw, 5vh, 0) scale(1.1);
    border-radius: 35% 65% 50% 50% / 50% 50% 65% 35%;
  }

  66% {
    transform: translate3d(4vw, -3vh, 0) scale(0.94);
    border-radius: 60% 40% 65% 35% / 35% 65% 40% 60%;
  }
}

@keyframes blob-drift-c {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }

  20% {
    transform: translate3d(5vw, -3vh, 0) scale(1.09);
    border-radius: 65% 35% 45% 55% / 45% 55% 35% 65%;
  }

  50% {
    transform: translate3d(-4vw, 5vh, 0) scale(1.07);
    border-radius: 40% 60% 55% 45% / 55% 45% 60% 40%;
  }

  80% {
    transform: translate3d(3vw, -2vh, 0) scale(0.95);
    border-radius: 55% 45% 65% 35% / 35% 65% 45% 55%;
  }
}

.lc-mesh__blob--a {
  top: -8%;
  left: -6%;
  animation: blob-drift-a 18s ease-in-out infinite;
}

.lc-mesh__blob--b {
  bottom: 10%;
  right: -4%;
  background: radial-gradient(circle at 70% 40%, #526ae2, transparent 60%);
  animation: blob-drift-b 20s ease-in-out infinite;
}

.lc-mesh__blob--c {
  top: 38%;
  left: 35%;
  width: clamp(180px, 26vw, 360px);
  height: clamp(180px, 26vw, 360px);
  opacity: calc(var(--lc-mesh-blob-opacity) * 0.65);
  animation: blob-drift-c 22s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lc-mesh__blob {
    animation: none;
    will-change: auto;
  }
}