/* SPA src/InterludePhotoFilm.css */
/**
 * 백 사진(`back_img__wrap`) + 플래시(같은 랩 안 `InterludeFlash`, 이미지와 동일 박스)
 * 가로: `--interlude-content-w` 꽉 참(`object-fit: cover`) — 세로: `--ipf-back-max-h` 직사각형
 * 그레인: `.flash .grain` · 비네트: 상·하 가장자리(하단 더 짙게) + 중앙 살짝 밝힘 `::after`
 */

.back_img.back_img--dual {
  display: flex;
  flex-direction: row;
  width: 100%;
  align-items: stretch;
  gap: 0;
}

.back_img.back_img--dual > .back_img_inner {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  max-width: 50%;
}

.back_img .back_img_inner {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  overflow: visible;
  isolation: isolate;
  margin: 0;
}

/* 실제 <img> — 콘텐츠 가로 100%·세로 박스 `--ipf-back-max-h`에 cover로 맞춤(그레인·플래시와 동일 크기) */
.back_img__wrap.back_img__wrap--placeholder,
.back_img__wrap .back_img__placeholder {
  height: var(--ipf-back-max-h, min(48dvh, 520px));
  max-height: var(--ipf-back-max-h, min(48dvh, 520px));
}

/* 이미지·플래시를 한 격자 셀에 겹쳐 비네트 박스 = 사진 표시 박스와 동일 */
.back_img__wrap {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: var(--ipf-back-max-h, min(48dvh, 520px));
  max-height: var(--ipf-back-max-h, min(48dvh, 520px));
  margin: 0;
  overflow: hidden;
  line-height: 0;
}

.back_img__wrap > * {
  grid-area: 1 / 1;
  align-self: stretch;
  justify-self: stretch;
  min-width: 0;
  min-height: 0;
}

.back_img__wrap .back_img__img {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center center;
  margin: 0;
}

.back_img__img {
  display: block;
}

/* `flash` 루트 위치·크기는 App.css — 그레인은 `.grain` */

/* 상·하 가장자리만(좌·우 띠 없음). 하단은 아래 100%→위 0% 균등 25% 스텝 — 배경 크기 100% */
.flash .back_img__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  pointer-events: none;
  box-shadow: none;
  background-color: transparent;
  background-image:
    linear-gradient(
      to bottom,
      rgb(0 0 0 / 0.42) 0%,
      rgb(0 0 0 / 0.2) min(12vmin, 52px),
      rgb(0 0 0 / 0) min(28vmin, 36%),
      rgb(0 0 0 / 0) 100%
    ),
    linear-gradient(
      to top,
      rgb(0 0 0 / 1) 0%,
      rgb(0 0 0 / 0.75) 25%,
      rgb(0 0 0 / 0.5) 50%,
      rgb(0 0 0 / 0.25) 75%,
      rgb(0 0 0 / 0) 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* 중앙만 살짝 밝힘(비네트 톤과 어긋나 보이지 않게 약하게) */
.flash .back_img__vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 68% 72% at 50% 50%,
    rgb(255 255 255 / 0.1) 0%,
    rgb(255 255 255 / 0.04) 36%,
    rgb(255 255 255 / 0) 64%,
    rgb(255 255 255 / 0) 100%
  );
}

.flash .back_img__film,
.flash .flash__sparkle {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  pointer-events: none;
  width: 100%;
  height: 100%;
  filter: blur(0.45px) drop-shadow(0 0 0 rgb(255 255 255 / 0.07));
}

.flash .flash__sparkle {
  z-index: 3;
}

.flash .back_img__film_scratch,
.flash .flash__scratch {
  position: absolute;
  display: block;
  width: 120%;
  height: 100%;
  top: 0;
  left: 0;
  padding-left: min(100px, 18%);
  opacity: 0.5;
  animation: interlude-photo-film-scratch 0.45s steps(1) infinite;
  background: repeating-linear-gradient(
    90deg,
    rgb(0 0 0 / 0.13) 0 2px,
    transparent 4px min(37vmin, 42%)
  );
  pointer-events: none;
}

.flash .flash__scratch {
  left: 30%;
  animation: interlude-photo-film-effect-scratch 2s infinite;
}

.flash .grain {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.flash .grain::after {
  content: "";
  position: absolute;
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  opacity: 0.25;
  background-image:
    repeating-conic-gradient(var(--ipf-black) 0%, transparent 0.00003%, transparent 0.0005%, transparent 0.00095%),
    repeating-conic-gradient(var(--ipf-black) 0%, transparent 0.00005%, transparent 0.00015%, transparent 0.0009%);
  animation: interlude-photo-film-grain 0.5s steps(1) infinite;
}

@keyframes interlude-photo-film-grain {
  0%,
  100% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(-1%, -1%);
  }
  20% {
    transform: translate(1%, 1%);
  }
  30% {
    transform: translate(-2%, -2%);
  }
  40% {
    transform: translate(3%, 3%);
  }
  50% {
    transform: translate(-3%, -3%);
  }
  60% {
    transform: translate(4%, 4%);
  }
  70% {
    transform: translate(-4%, -4%);
  }
  80% {
    transform: translate(2%, 2%);
  }
  90% {
    transform: translate(-3%, -3%);
  }
}

@keyframes interlude-photo-film-scratch {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.5;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
    opacity: 0.75;
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.5;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.25;
  }
  90% {
    transform: translateX(-2%);
  }
}

@keyframes interlude-photo-film-effect-scratch {
  0% {
    transform: translateX(0);
    opacity: 0.75;
  }
  10% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  30% {
    transform: translateX(-2%);
  }
  40% {
    transform: translateX(3%);
  }
  50% {
    transform: translateX(-3%);
    opacity: 0.5;
  }
  60% {
    transform: translateX(8%);
  }
  70% {
    transform: translateX(-3%);
  }
  80% {
    transform: translateX(10%);
    opacity: 0.25;
  }
  90% {
    transform: translateX(20%);
  }
  100% {
    transform: translateX(30%);
  }
}



/* SPA src/InterludeFireflyBackground.css */
/* 스토리 인터루드 — `.hourglass-interlude-firefly-slot`(패널 콘텐츠 폭) 안 전체, 클릭·스와이프 통과 */
.hourglass-interlude-firefly-host {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

.hourglass-interlude-firefly-host canvas {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* 패널 형제: 반딧불이 슬롯(60) > 뷰포트(45) — 뷰포트 안 좌우 네비는 커튼 페이드(40)보다 위(z:42, App.css) */
.hourglass-flash-overlay--interlude-page .our-story-chapter-viewport {
  z-index: 45;
}