/* /inocomm/js/hero_fx/tile/effect.css — 타일 전환
   [2026-07-20] 원본 <img> 는 DOM 에 그대로 두고(visibility:hidden) 타일이 같은 src 를 그린다.
   → 이미지 URL 복사·재호스팅 없음. R2 그대로, 브라우저 캐시 공유(추가 트래픽 0). */

.ssb-hero-fx.ssb-fx-tile { position: absolute; inset: 0; overflow: hidden; }
.ssb-fx-tile > .ssb-fx-track { position: absolute; inset: 0; }

.ssb-fx-tile .ssb-fx-item { position: absolute; inset: 0; }

/* 원본 img — 접근성/SEO 위해 남기되 화면엔 타일이 그린다 */
.ssb-fx-tile .ssb-fx-item > img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  visibility: hidden;
}

/* Keep only the first image visible until tile backgrounds are decoded. */
.ssb-fx-tile:not(.is-ready) .ssb-fx-item:first-child > img { visibility: visible; }

/* Swap the source image for the tile layer after the first image is ready. */
.ssb-fx-tile.is-ready .ssb-fx-item > img { visibility: hidden; }

.ssb-fx-tile .ssb-fx-tiles {
  position: absolute; inset: 0;
  visibility: hidden;
}
.ssb-fx-tile.is-ready .ssb-fx-tiles { visibility: visible; }

.ssb-fx-tile .ssb-fx-tile-cell {
  position: absolute;
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--ssb-fx-tdur, 520ms) ease;
  will-change: opacity;
  /* [2026-07-20 SEAMFIX] 셀은 1px 겹치되, 안쪽의 전체 배경은
     루트 크기로 고정해 겹침이 이미지 배율을 바꾸지 않는다. */
  backface-visibility: hidden;
}
.ssb-fx-tile .ssb-fx-tile-cell::before {
  content: '';
  position: absolute;
  left: var(--ssb-fx-tile-left, 0);
  top: var(--ssb-fx-tile-top, 0);
  width: var(--ssb-fx-root-w, 100%);
  height: var(--ssb-fx-root-h, 100%);
  background-image: var(--ssb-fx-bg);
  background-size: cover;
  background-position: var(--ssb-fx-bg-pos, 50% 50%);
  background-repeat: no-repeat;
  pointer-events: none;
}

/* [2026-07-21 TILE_INITIAL_PRIME_V1]
   첫 타일 레이어는 숨겨진 준비 단계에서 즉시 완성한다.
   기본 20x8/200ms는 마지막 셀이 5.2초 뒤 시작하므로, 준비 중 stagger를 그대로 두면
   is-ready 순간 원본 img가 먼저 숨고 아직 비어 있는 셀 사이로 회색 배경이 드러난다.
   준비 단계에서만 transition을 끄면 이후 2→3→1 전환의 지연 순서는 그대로 유지된다. */
.ssb-fx-tile:not(.is-ready) .ssb-fx-item:first-child .ssb-fx-tile-cell {
  opacity: 1;
  transition: none;
}

.ssb-fx-tile .ssb-fx-item.is-on .ssb-fx-tile-cell { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ssb-fx-tile .ssb-fx-tile-cell { transition: none; }
}