*,
*::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%, var(--lc-primary-soft), 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;
  }
}

@media (max-width: 768px) {
  .lc-mesh__blob--b,
  .lc-mesh__blob--c {
    display: none;
  }

  .lc-mesh__blob--a {
    animation: none;
    width: clamp(180px, 50vw, 300px);
    height: clamp(180px, 50vw, 300px);
    top: -5%;
    left: -10%;
  }
}

/* ============================================================================
   Lazy Loading Styles
   ============================================================================ */

/* Placeholder state for lazy loading images */
img.lc-lazy-loading {
  opacity: 0;
  transition: opacity 0.3s ease;
}

img.lc-lazy-loaded {
  opacity: 1;
}

/* Smooth fade-in for lazy loaded images */
img[data-src] {
  background-color: var(--lc-surface-2);
  min-height: 100px;
}

/* Hide broken image icons while loading */
img[data-src]:not([src]) {
  visibility: hidden;
}

/* ============================================================================
   Tech Background System - 科技感背景系统 (Hero Style)
   ============================================================================
   为各页面提供统一的动态背景效果（类似 Hero Section）
   使用方式：
   <div class="lc-tech-bg" aria-hidden="true">
       <div class="lc-tech-bg__grid"></div>
       <div class="lc-tech-bg__blobs">
           <div class="lc-tech-bg__blob lc-tech-bg__blob--1"></div>
           <div class="lc-tech-bg__blob lc-tech-bg__blob--2"></div>
           <div class="lc-tech-bg__blob lc-tech-bg__blob--3"></div>
           <div class="lc-tech-bg__blob lc-tech-bg__blob--4"></div>
       </div>
   </div>
   ============================================================================ */

.lc-tech-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: -1;
}

/* Section variant for contained backgrounds */
.lc-tech-bg--section {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.6;
}

/* 动态网格背景 */
.lc-tech-bg__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(74, 108, 244, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 108, 244, 0.03) 1px, transparent 1px);
  background-size: 50px 50px;
  animation: lc-tech-grid-move 20s linear infinite;
}

@keyframes lc-tech-grid-move {
  0% { transform: translateY(0); }
  100% { transform: translateY(50px); }
}

/* 背景光斑 */
.lc-tech-bg__blobs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.lc-tech-bg__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  will-change: transform;
}

.lc-tech-bg__blob--1 {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -80px;
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.4), rgba(99, 102, 241, 0.3));
  animation: lc-tech-blob-float-1 20s ease-in-out infinite;
}

.lc-tech-bg__blob--2 {
  width: 250px;
  height: 250px;
  top: -80px;
  right: -60px;
  background: linear-gradient(225deg, rgba(168, 85, 247, 0.35), rgba(236, 72, 153, 0.25));
  animation: lc-tech-blob-float-2 18s ease-in-out infinite;
}

.lc-tech-bg__blob--3 {
  width: 280px;
  height: 280px;
  bottom: -80px;
  left: -40px;
  background: linear-gradient(45deg, rgba(244, 114, 182, 0.35), rgba(251, 146, 60, 0.25));
  animation: lc-tech-blob-float-3 22s ease-in-out infinite;
}

.lc-tech-bg__blob--4 {
  width: 220px;
  height: 220px;
  bottom: -60px;
  right: -40px;
  background: linear-gradient(315deg, rgba(250, 204, 21, 0.3), rgba(251, 146, 60, 0.2));
  animation: lc-tech-blob-float-4 16s ease-in-out infinite;
}

@keyframes lc-tech-blob-float-1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, 40px) scale(1.05); }
  50% { transform: translate(-20px, 60px) scale(0.95); }
  75% { transform: translate(40px, 20px) scale(1.02); }
}

@keyframes lc-tech-blob-float-2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 50px) scale(1.08); }
  66% { transform: translate(20px, 30px) scale(0.92); }
}

@keyframes lc-tech-blob-float-3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  20% { transform: translate(50px, -30px) scale(1.03); }
  40% { transform: translate(20px, -60px) scale(0.97); }
  60% { transform: translate(-30px, -40px) scale(1.05); }
  80% { transform: translate(40px, -20px) scale(0.98); }
}

@keyframes lc-tech-blob-float-4 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-50px, -40px) scale(1.06); }
}

/* 页面主容器需要相对定位以显示在背景之上 */
.lc-page-container,
.lc-single-post,
.lc-projects-archive,
.lc-about-page,
.lc-guestbook-page,
.lc-articles-page,
.lc-404-page,
.lc-project-single-tech {
  position: relative;
  z-index: 1;
}

/* 深色模式 */
html[data-lc-color-scheme="dark"] .lc-tech-bg__grid {
  background-image:
    linear-gradient(rgba(74, 108, 244, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(74, 108, 244, 0.05) 1px, transparent 1px);
}

html[data-lc-color-scheme="dark"] .lc-tech-bg__blob--1 {
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.25), rgba(79, 70, 229, 0.2));
}

html[data-lc-color-scheme="dark"] .lc-tech-bg__blob--2 {
  background: linear-gradient(225deg, rgba(147, 51, 234, 0.22), rgba(219, 39, 119, 0.15));
}

html[data-lc-color-scheme="dark"] .lc-tech-bg__blob--3 {
  background: linear-gradient(45deg, rgba(219, 39, 119, 0.2), rgba(234, 88, 12, 0.15));
}

html[data-lc-color-scheme="dark"] .lc-tech-bg__blob--4 {
  background: linear-gradient(315deg, rgba(202, 138, 4, 0.18), rgba(234, 88, 12, 0.12));
}

html[data-lc-color-scheme="dark"] .lc-tech-bg__blob {
  opacity: 0.4;
}

/* 响应式优化 */
@media (max-width: 768px) {
  .lc-tech-bg__blob {
    filter: blur(40px);
  }
  
  .lc-tech-bg__blob--1 {
    width: 200px;
    height: 200px;
  }
  
  .lc-tech-bg__blob--2 {
    width: 180px;
    height: 180px;
  }
  
  .lc-tech-bg__blob--3 {
    width: 190px;
    height: 190px;
  }
  
  .lc-tech-bg__blob--4 {
    width: 160px;
    height: 160px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lc-tech-bg__grid,
  .lc-tech-bg__blob {
    animation: none;
  }
}