/* 테마별 배경 사진 + 가벼운 글자 구름 (합성만, 블러 없음) */

.word-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #c9e4f7;
  contain: paint;
  transform: translateZ(0);
}

.word-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, transparent 35%, rgba(255, 252, 246, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(210, 230, 245, 0.28) 100%);
}

.castle-still {
  position: absolute;
  inset: -4%;
  width: 108%;
  height: 108%;
  object-fit: cover;
  object-position: 50% 46%;
  will-change: transform;
  backface-visibility: hidden;
  animation: castleDrift 90s linear infinite alternate;
}

.letter-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cloud {
  fill: #2a3a50;
  color: #2a3a50;
  will-change: transform;
  backface-visibility: hidden;
}

.cloud text {
  stroke: currentColor;
  stroke-width: 4;
  paint-order: stroke fill;
  stroke-linejoin: round;
}

@media (prefers-color-scheme: dark) {
  .word-scene { background: #16101a; }
  .word-scene::after {
    background:
      radial-gradient(ellipse 70% 55% at 50% 28%, transparent 35%, rgba(12, 8, 16, 0.42) 100%),
      linear-gradient(180deg, rgba(20, 12, 18, 0.18), transparent 28%, rgba(8, 6, 12, 0.38) 100%);
  }
  .cloud {
    fill: #fff7e8;
    color: #fff7e8;
  }
}

html[data-theme="light"] .word-scene { background: #c9e4f7; }
html[data-theme="light"] .word-scene::after {
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, transparent 35%, rgba(255, 252, 246, 0.28) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), transparent 32%, rgba(210, 230, 245, 0.28) 100%);
}
html[data-theme="light"] .cloud {
  fill: #2a3a50;
  color: #2a3a50;
}

html[data-theme="dark"] .word-scene { background: #16101a; }
html[data-theme="dark"] .word-scene::after {
  background:
    radial-gradient(ellipse 70% 55% at 50% 28%, transparent 35%, rgba(12, 8, 16, 0.42) 100%),
    linear-gradient(180deg, rgba(20, 12, 18, 0.18), transparent 28%, rgba(8, 6, 12, 0.38) 100%);
}
html[data-theme="dark"] .cloud {
  fill: #fff7e8;
  color: #fff7e8;
}

.cloud-1 { animation: cloudDrift 70s linear infinite; }
.cloud-2 { animation: cloudDrift 88s linear infinite reverse; animation-delay: -20s; }
.cloud-3 { animation: cloudDrift 96s linear infinite; animation-delay: -40s; }

@keyframes castleDrift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(2.2%, -1.6%, 0); }
}

@keyframes cloudDrift {
  from { transform: translate3d(-3%, 0, 0); }
  to { transform: translate3d(4%, -1.5%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .castle-still,
  .cloud {
    animation: none !important;
    will-change: auto;
  }
}