/* subhero.css
   - Sub Hero(이미지 + dim + 오버레이 텍스트)
   - 헤더가 fixed(100px)로 위에서 덮는 구조: hero는 화면 0부터 시작(음수 마진)
   - page load motion: body.page-sub.is-sub-ready에서 페이드+슬라이드 인
*/

/* =========================
   Tokens (Sub Hero)
========================= */
:root{
  /* header.css 값이 있으면 그걸 쓰고, 없으면 fallback */
  --dk-header-h: var(--header-h, 100px);
  --dk-header-div: var(--header-divider, 1px);

  /* Sub Hero */
  --sub-hero-h: 440px;
  --sub-hero-pad-x: 40px;
  --sub-hero-pad-top-visible: 120px; /* 보이는(340) 기준 top */
  --sub-hero-pad-bot-visible: 100px; /* 보이는(340) 기준 bottom */
  --sub-hero-text-gap: 24px;

  /* Motion */
  --sub-enter-x: -40px;
  --sub-enter-dur: 800ms;
  --sub-enter-delay-2: 200ms;
  --sub-enter-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* =========================
   Sub page tweaks
========================= */
.page-sub .site-header{ border-bottom: 0; }

/* =========================
   Sub Hero
========================= */
.page-sub .sub-hero{
  position: relative;
  height: var(--sub-hero-h);
  overflow: hidden;

  /* 화면 0부터 시작하게: body padding-top(헤더높이) 만큼 끌어올림 */
  margin-top: calc(-1 * (var(--dk-header-h) + var(--dk-header-div)));
}

/* 이미지 */
.page-sub .sub-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* dim */
.page-sub .sub-hero__dim{
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.10) 100%
  );
}

/* 1280 기준 텍스트 영역 */
.page-sub .sub-hero__content{
  position: relative;
  height: 100%;
  max-width: 1280px;
  margin: 0 auto;

  /* 보이는 340 기준 패딩을 실제 섹션 top(0)로 환산: header 높이만큼 더함 */
  padding:
    calc(var(--dk-header-h) + var(--sub-hero-pad-top-visible))
    var(--sub-hero-pad-x)
    var(--sub-hero-pad-bot-visible)
    var(--sub-hero-pad-x);
}

/* 텍스트 그리드(1x2), gap 24 */
.page-sub .sub-hero__text{
  display: grid;
  grid-template-rows: auto auto;
  row-gap: var(--sub-hero-text-gap);
  max-width: 720px;
}

.page-sub .sub-hero__title,
.page-sub .sub-hero__desc{ margin: 0; }

/* =========================
   Sub Hero motion (page load)
   - 1행: 지연 없음
   - 2행: 200ms 지연
========================= */
.page-sub .sub-hero__title,
.page-sub .sub-hero__desc{
  opacity: 0;
  transform: translate3d(var(--sub-enter-x), 0, 0);
  will-change: transform, opacity;
}

.page-sub.is-sub-ready .sub-hero__title,
.page-sub.is-sub-ready .sub-hero__desc{
  opacity: 1;
  transform: translate3d(0,0,0);
  transition:
    transform var(--sub-enter-dur) var(--sub-enter-ease),
    opacity   var(--sub-enter-dur) var(--sub-enter-ease);
}

.page-sub.is-sub-ready .sub-hero__title{ transition-delay: 0ms; }
.page-sub.is-sub-ready .sub-hero__desc{ transition-delay: var(--sub-enter-delay-2); }

@media (prefers-reduced-motion: reduce){
  .page-sub .sub-hero__title,
  .page-sub .sub-hero__desc{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
/* ===== On-view Enter (Hero friendly: NO hide) ===== */
:root{
  --enter-dur: 1000ms;
  --enter-delay: 0ms;
  --enter-ease: ease-in-out;
  --enter-scale: 1.08;
}

/* ✅ 기본: 보이게(opacity 1) + scale 1 */
[data-enter="zoom"]{
  opacity: 1;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform;
  transition: transform var(--enter-dur) var(--enter-ease) var(--enter-delay);
}

/* ✅ 보기에서 들어오면 scale 1.08로 */
[data-enter="zoom"].is-in{
  transform: scale(var(--enter-scale));
}

/* 접근성 */
@media (prefers-reduced-motion: reduce){
  [data-enter="zoom"]{
    transform: none !important;
    transition: none !important;
  }
}