/*
  부서지는 블러 등장 효과 (메인 Made & Remade, 수업 페이지 공용)
  - data-shatter="text"  : 제목 글자가 흐리게 흩어져 있다가 모인다.
  - data-shatter="words" : 문단 낱말이 흐리게 흩어져 있다가 앞에서부터 차례로 모인다.
  - data-shatter="block" : 문단·목록이 흐림에서 선명해진다.
  - data-shatter="wipe"  : 카드·이미지가 닦아내듯 한쪽에서 열린다.
  숨김 상태는 html.shatter_on일 때만 쓴다. 이 클래스는 머리의 인라인 스크립트가
  모션 줄이기를 쓰지 않는 환경에서만 붙이므로, 스크립트가 없어도 내용은 그대로 보인다.
  대상끼리는 서로 겹쳐 넣지 않는다(부모의 filter·clip-path가 자식 효과를 가둔다).
*/

:root {
  --shatter_ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* 스크립트가 끝내 실행되지 않으면 6초 뒤 모두 보이게 되돌린다. */
@keyframes shatter_failsafe {
  to {
    opacity: 1;
    filter: none;
    transform: none;
    clip-path: none;
  }
}

.shatter_on:not(.shatter_ready) [data-shatter],
.shatter_on:not(.shatter_ready) [data-shatter="wipe"] > *,
.shatter_on:not(.shatter_ready) [data-shatter="wipe"] img {
  animation: shatter_failsafe 1ms linear 6s forwards;
}

/* 문단·목록: 흐림에서 선명하게 */
.shatter_on [data-shatter="block"] {
  opacity: 0;
  filter: blur(14px);
  transform: translate3d(0, 22px, 0) scale(0.985);
}

.shatter_on [data-shatter="block"].is_revealed {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 640ms ease-out var(--shatter_delay, 0ms),
    filter 1000ms var(--shatter_ease) var(--shatter_delay, 0ms),
    transform 1100ms var(--shatter_ease) var(--shatter_delay, 0ms);
}

/* 제목·문단: 흩어진 흐린 글자(text)·낱말(words) 조각이 제자리로 모인다 */
.shatter_on [data-shatter="text"]:not(.is_split),
.shatter_on [data-shatter="words"]:not(.is_split) {
  opacity: 0;
}

.shatter_word {
  display: inline-block;
  white-space: nowrap;
}

.shatter_piece {
  display: inline-block;
}

.shatter_on [data-shatter="text"] .shatter_piece,
.shatter_on [data-shatter="words"] .shatter_piece {
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(var(--piece_x, 0), var(--piece_y, 0), 0) rotate(var(--piece_r, 0deg)) scale(var(--piece_s, 1));
}

.shatter_on [data-shatter="text"].is_revealed .shatter_piece,
.shatter_on [data-shatter="words"].is_revealed .shatter_piece {
  opacity: 1;
  filter: blur(0);
  transform: none;
  transition:
    opacity 560ms ease-out calc(var(--shatter_delay, 0ms) + var(--piece_delay, 0ms)),
    filter 900ms var(--shatter_ease) calc(var(--shatter_delay, 0ms) + var(--piece_delay, 0ms)),
    transform 1100ms var(--shatter_ease) calc(var(--shatter_delay, 0ms) + var(--piece_delay, 0ms));
}

/* 닦아내듯 열기: 한쪽에서 가림이 걷히고, 안쪽 내용은 조금 늦게 제자리로 들어온다 */
.shatter_on [data-shatter="wipe"] {
  clip-path: inset(0 100% 0 0 round var(--radius, 0px));
}

.shatter_on [data-shatter="wipe"][data-wipe-from="bottom"] {
  clip-path: inset(100% 0 0 0 round var(--radius, 0px));
}

.shatter_on [data-shatter="wipe"] > * {
  transform: translate3d(var(--wipe_x, -32px), var(--wipe_y, 0px), 0);
}

.shatter_on [data-shatter="wipe"][data-wipe-from="bottom"] > * {
  --wipe_x: 0px;
  --wipe_y: 40px;
}

.shatter_on [data-shatter="wipe"] img {
  transform: translate3d(var(--wipe_x, -32px), var(--wipe_y, 0px), 0) scale(1.14);
}

.shatter_on [data-shatter="wipe"].is_revealed {
  clip-path: inset(0 0 0 0 round var(--radius, 0px));
  transition: clip-path 1200ms cubic-bezier(0.87, 0, 0.13, 1) var(--shatter_delay, 0ms);
}

.shatter_on [data-shatter="wipe"].is_revealed > *,
.shatter_on [data-shatter="wipe"].is_revealed img {
  transform: none;
  transition: transform 1400ms var(--shatter_ease) calc(var(--shatter_delay, 0ms) + 140ms);
}

@media print {
  .shatter_on [data-shatter],
  .shatter_on [data-shatter] .shatter_piece,
  .shatter_on [data-shatter="wipe"] > *,
  .shatter_on [data-shatter] img {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .shatter_on [data-shatter="wipe"] {
    clip-path: none !important;
  }
}