/* 청첩장 이미지 — 로딩 스피너·재시도 (`template-image-load.js`) — index.html에서 마지막 CSS로 로드 */

html.withmarry-page-loading,
body.withmarry-page-loading {
  --wedding-load-bg: #fff9fb;
  --wedding-load-fg: #c49aa8;
  --wedding-load-spinner-track: rgb(245 210 220 / 0.45);
  --wedding-load-spinner-accent: rgb(232 155 175 / 0.95);
  background-color: #fff9fb !important;
  color: #c49aa8;
}

body.withmarry-page-loading #wedding-scene {
  visibility: hidden;
}

.wedding-load-screen {
  min-height: 100dvh;
  margin: 0;
  padding: 32px 20px;
  display: grid;
  place-items: center;
  text-align: center;
  background-color: #fff9fb;
  color: #c49aa8;
  font-family: var(--serif, "Noto Serif KR", "Apple SD Gothic Neo", serif);
}

body.withmarry-page-loading #withmarry-page-loader.wedding-load-screen,
body.withmarry-page-loading .wedding-load-screen--blocking {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff9fb !important;
  color: #c49aa8;
}

.wedding-load-screen--blocking {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff9fb;
  color: #c49aa8;
}

body:not(.withmarry-page-loading) .wedding-load-screen--blocking {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity 0.24s ease,
    visibility 0s linear 0.24s;
}

body.withmarry-page-loading .wedding-load-screen__spinner,
.wedding-load-screen__spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2.5px solid rgb(245 210 220 / 0.45);
  border-top-color: rgb(232 155 175 / 0.95);
  animation: wedding-load-spin 0.75s linear infinite;
}

@keyframes wedding-load-spin {
  to {
    transform: rotate(360deg);
  }
}

.withmarry-img-load-host {
  position: relative;
}

.wedding-hero-sticky > .withmarry-img-load-host,
.wedding-hero-sticky.withmarry-img-load-host {
  position: absolute;
  inset: 0;
  display: block;
}

.wedding-hero-sticky > .withmarry-img-load-host > img,
.wedding-hero-sticky.withmarry-img-load-host > img {
  width: 100%;
  height: 100%;
}

.withmarry-img-load-host--wrap {
  display: block;
}

.withmarry-img-load-host.withmarry-img-load--loading > img,
.withmarry-img-load-host.withmarry-img-load--loading > video {
  opacity: 0;
}

.withmarry-img-load-host.withmarry-img-load--ready > img,
.withmarry-img-load-host.withmarry-img-load--ready > video {
  opacity: 1;
  transition: opacity 0.28s ease;
}

/* 원형 갤러리 — 회전 각도별 `--face-op`(측면에서 하얗게 페이드) 유지 */
.circular-gallery__card-face--front.withmarry-img-load-host.withmarry-img-load--ready > img {
  opacity: var(--face-op, 1);
  transition: none;
}

.circular-gallery__card-face--back > img {
  opacity: calc(0.38 * var(--face-op, 1));
  filter: brightness(0.72);
  transition: none;
}

.withmarry-img-load__spinner {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  border: 2.5px solid rgb(255 255 255 / 0.14);
  border-top-color: rgb(212 188 145 / 0.92);
  pointer-events: none;
  animation: withmarry-img-load-spin 0.75s linear infinite;
}

.withmarry-img-load-host:not(.withmarry-img-load--loading) .withmarry-img-load__spinner {
  display: none;
}

.withmarry-img-load-host.withmarry-img-load--failed > img,
.withmarry-img-load-host.withmarry-img-load--failed > video {
  opacity: 0.35;
}

@keyframes withmarry-img-load-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wedding-load-screen__spinner {
    animation: wedding-load-pulse 1.2s ease-in-out infinite;
  }

  .withmarry-img-load__spinner {
    animation: withmarry-img-load-pulse 1.2s ease-in-out infinite;
  }

  .withmarry-img-load-host.withmarry-img-load--ready > img {
    transition: none;
  }
}

@keyframes wedding-load-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes withmarry-img-load-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}