/* submotion.css
   - Sub pages 공용 enter 애니메이션 모음
   - sub.js가 .is-in 토글해주는 전제
*/

:root{
  /* page-point back */
  --pp-dur: 600ms;
  --pp-ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --pp-out-y: 30px;
  --pp-out-scale: 0.5;

  /* subtitle slide */
  --st-dur: 800ms;
  --st-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --st-out-x: -40px;
  --st-out-y: 0px;

  /* fadeup variants */
  --fadeup-dur: 1000ms; /* 피그마 200ms 기준이면 여기만 바꾸면 됨 */
  --fadeup-y: 30px;
  --fadeup-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ===== page-point: back ===== */
.page-point[data-enter="back"]{
  opacity: 0;
  transform: translateY(var(--pp-out-y)) scale(var(--pp-out-scale));
  will-change: transform, opacity;
  transition:
    transform var(--pp-dur) var(--pp-ease-back),
    opacity   var(--pp-dur) ease;
  transition-delay: 400ms;
}
.page-point[data-enter="back"].is-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ===== subtitle slide: title + sub ===== */
/* ✅ sub-title-sub도 slide 대상에 포함 */
.sub-title-text[data-enter="slide"],
.sub-title-sub[data-enter="slide"]{
  opacity: 0;
  transform: translate3d(var(--st-out-x), var(--st-out-y), 0);
  will-change: transform, opacity;
  transition:
    transform var(--st-dur) var(--st-ease),
    opacity   var(--st-dur) var(--st-ease);
  transition-delay: 600ms;
}

.sub-title-text[data-enter="slide"].is-in,
.sub-title-sub[data-enter="slide"].is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

/* ===== fadeup: 0ms / 200ms / 300ms / 400ms / 500ms ===== */
[data-enter="fadeup"],
[data-enter="fadeup-0"],
[data-enter="fadeup-100"],
[data-enter="fadeup-200"],
[data-enter="fadeup-300"],
[data-enter="fadeup-400"],
[data-enter="fadeup-500"],
[data-enter="fadeup-600"]{
  opacity: 0;
  transform: translate3d(0, var(--fadeup-y), 0);
  will-change: transform, opacity;
  transition:
    transform var(--fadeup-dur) var(--fadeup-ease),
    opacity   var(--fadeup-dur) var(--fadeup-ease);
}

[data-enter="fadeup"].is-in,
[data-enter="fadeup-0"].is-in,
[data-enter="fadeup-100"].is-in,
[data-enter="fadeup-200"].is-in,
[data-enter="fadeup-300"].is-in,
[data-enter="fadeup-400"].is-in,
[data-enter="fadeup-500"].is-in,
[data-enter="fadeup-600"].is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

[data-enter="fadeup-0"]{ transition-delay: 0ms; }
[data-enter="fadeup-100"]{ transition-delay: 100ms; }
[data-enter="fadeup-200"]{ transition-delay: 200ms; }
[data-enter="fadeup-300"]{ transition-delay: 300ms; }
[data-enter="fadeup-400"]{ transition-delay: 400ms; }
[data-enter="fadeup-500"]{ transition-delay: 500ms; }
[data-enter="fadeup-600"]{ transition-delay: 600ms; } 
/* ===== fadeup_40: Y offset 40px ===== */
[data-enter="fadeup_40"],
[data-enter="fadeup_40-0"],
[data-enter="fadeup_40-100"],
[data-enter="fadeup_40-200"],
[data-enter="fadeup_40-300"],
[data-enter="fadeup_40-400"],
[data-enter="fadeup_40-600"]{
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  will-change: transform, opacity;
  transition:
    transform var(--fadeup-dur) var(--fadeup-ease),
    opacity   var(--fadeup-dur) var(--fadeup-ease);
}

[data-enter="fadeup_40"].is-in,
[data-enter="fadeup_40-0"].is-in,
[data-enter="fadeup_40-100"].is-in,
[data-enter="fadeup_40-200"].is-in,
[data-enter="fadeup_40-300"].is-in,
[data-enter="fadeup_40-400"].is-in,
[data-enter="fadeup_40-600"].is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}

[data-enter="fadeup_40-0"]{ transition-delay: 0ms; }
[data-enter="fadeup_40-100"]{ transition-delay: 100ms; }
[data-enter="fadeup_40-200"]{ transition-delay: 200ms; }
[data-enter="fadeup_40-300"]{ transition-delay: 300ms; }
[data-enter="fadeup_40-400"]{ transition-delay: 400ms; }
[data-enter="fadeup_40-600"]{ transition-delay: 600ms; }

/* ===== fadeup-full: 90% 이상 보일 때 트리거 ===== */
[data-enter="fadeup-full"],
[data-enter="fadeup-full-200"],
[data-enter="fadeup-full-400"]{
  opacity: 0;
  transform: translate3d(0, var(--fadeup-y), 0);
  will-change: transform, opacity;
  transition:
    transform var(--fadeup-dur) var(--fadeup-ease),
    opacity   var(--fadeup-dur) var(--fadeup-ease);
}
[data-enter="fadeup-full"].is-in,
[data-enter="fadeup-full-200"].is-in,
[data-enter="fadeup-full-400"].is-in{
  opacity: 1;
  transform: translate3d(0,0,0);
}
[data-enter="fadeup-full-200"]{ transition-delay: 200ms; }
[data-enter="fadeup-full-400"]{ transition-delay: 400ms; }

/* ===== delay attribute support (data-delay="...") ===== */
[data-enter][data-delay="0"]   { transition-delay: 0ms !important; }
[data-enter][data-delay="200"] { transition-delay: 200ms !important; }
[data-enter][data-delay="400"] { transition-delay: 400ms !important; }
[data-enter][data-delay="600"] { transition-delay: 600ms !important; }

/* 접근성 */
@media (prefers-reduced-motion: reduce){
  .page-point[data-enter="back"],
  .sub-title-text[data-enter="slide"],
  .sub-title-sub[data-enter="slide"],
  [data-enter="fadeup"],
  [data-enter="fadeup-0"],
  [data-enter="fadeup-100"],
  [data-enter="fadeup-200"],
  [data-enter="fadeup-300"],
  [data-enter="fadeup-400"],
  [data-enter="fadeup-500"],
  [data-enter="fadeup-600"],
  [data-enter="fadeup_40"],
  [data-enter="fadeup_40-0"],
  [data-enter="fadeup_40-100"],
  [data-enter="fadeup_40-200"],
  [data-enter="fadeup_40-300"],
  [data-enter="fadeup_40-400"],
  [data-enter="fadeup_40-600"],
  [data-enter="fadeup-full"],
  [data-enter="fadeup-full-200"],
  [data-enter="fadeup-full-400"]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}