/* ==========================================================================
   Motion & Interaction Layer — 3-6 단계
   전역 Motion Token(css/tokens.css)을 기반으로 한 Scroll Reveal, Card Stagger,
   Header Sticky 전환, 공통 Interaction(Button/Case Hover/Mobile Nav)을 정의한다.
   본문 문구/이미지/Route/Form 구조는 이 파일에서 변경하지 않는다.
   transform + opacity 중심으로만 구현하여 Layout Shift를 발생시키지 않는다.
   ========================================================================== */

/* ---------- Scroll Reveal (기본) ----------
   초기 상태: opacity 0 + translateY(약한 값)
   진입 시: opacity 1 + transform none
   IntersectionObserver(js/motion.js)가 .is-visible 을 1회만 추가한다. */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--motion-normal) var(--ease-out),
              transform var(--motion-normal) var(--ease-out);
  transition-delay: calc(var(--stagger-step) * var(--i, 0));
  will-change: opacity, transform;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 이미지류(Hero 태양광 이미지, Case 이미지 등)에 허용되는 아주 약한 fade+scale.
   큰 zoom animation은 사용하지 않는다(0.98 → 1). */
[data-reveal="fade-scale"] {
  transform: scale(0.98);
}
[data-reveal="fade-scale"].is-visible {
  transform: none;
}

/* 단순 fade만 허용되는 항목(§10 LS ELECTRIC 로고, §14 EST 로고 등) —
   회전/확대축소 반복/광택/pulse 없이 opacity만 전환하여 로고를 안정적으로 표현한다. */
[data-reveal="fade-only"] {
  opacity: 0;
  transform: none;
  transition: opacity var(--motion-normal) var(--ease-out);
  transition-delay: calc(var(--stagger-step) * var(--i, 0));
}
[data-reveal="fade-only"].is-visible {
  opacity: 1;
}

/* ---------- Header Sticky 전환 (§15) ----------
   높이/배경색은 유지하고 box-shadow만 부드럽게 전환한다 → Layout Shift 없음. */
.site-header {
  transition: box-shadow var(--motion-fast) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: 0 2px 14px rgba(11, 37, 69, 0.10);
}

/* ---------- Desktop Dropdown (기존 전환을 Motion Token으로 통일) ---------- */
.desktop-nav__dropdown {
  transition: opacity var(--motion-fast) var(--ease-out), transform var(--motion-fast) var(--ease-out);
}

/* ---------- Case 이미지 Hover (§9) ----------
   scale은 1.02~1.04 이하로만 허용, overflow hidden은 기존 .case-slot--has-image에 있음. */
@media (hover: hover) {
  .case-slot__img {
    transition: transform var(--motion-normal) var(--ease-out);
  }
  .case-slot--has-image:hover .case-slot__img {
    transform: scale(1.03);
  }
}

/* ---------- Card Hover 공통 (Solution Step / Value / Insight / Briefing) (§5,6,7,8) ----------
   translateY -2~-4px 수준 + box-shadow 약간 증가로 제한한다.
   .service-card는 home.css에 이미 동일 범위(-2px)의 자체 hover가 있어 중복 정의하지 않는다.
   주의: 이 요소들은 [data-reveal]도 함께 갖는 경우가 많다. transition 속성을 여기서
   다시 선언하면 [data-reveal]의 opacity 전환을 덮어써 reveal이 끊겨 보이므로,
   opacity + transform + box-shadow를 함께 명시해 reveal과 hover가 공존하게 한다. */
@media (hover: hover) {
  .solution-step,
  .value-card,
  .insight-card,
  .briefing-card {
    transition: opacity var(--motion-normal) var(--ease-out),
                transform var(--motion-fast) var(--ease-out),
                box-shadow var(--motion-fast) var(--ease-out);
    /* [data-reveal]의 stagger transition-delay가 이 규칙에 덮어써지지 않도록 동일하게 계산해 유지한다. */
    transition-delay: calc(var(--stagger-step) * var(--i, 0)), 0s, 0s;
  }
  .solution-step:hover,
  .value-card:hover,
  .insight-card:hover,
  .briefing-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.08);
  }
}

/* ---------- Service Card (§6) ----------
   home.css의 .service-card 자체 hover(translateY -2px)와 공존하도록,
   [data-reveal]의 opacity 전환이 지워지지 않게 opacity를 함께 명시한다. */
.service-card {
  transition: opacity var(--motion-normal) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
  transition-delay: calc(var(--stagger-step) * var(--i, 0)), 0s, 0s;
}

/* ---------- CTA 링크 미세 interaction (§6) ---------- */
.service-card__link {
  transition: color var(--motion-fast) var(--ease-out), gap var(--motion-fast) var(--ease-out);
}
.service-card__link:hover,
.service-card__link:focus-visible {
  gap: 10px;
}

/* ---------- Button Interaction (§17) ----------
   Hover는 기존 background 전환(components.css)을 Motion Token으로 통일하고,
   Active에는 약한 press feedback만 추가한다. Focus-visible ring은 layout.css에 이미 있다. */
.btn {
  transition: background-color var(--motion-fast) var(--ease-out),
              border-color var(--motion-fast) var(--ease-out),
              transform var(--motion-fast) var(--ease-out);
}
.btn:active {
  transform: translateY(1px);
}

.icon-btn {
  transition: border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

/* ---------- Mobile Navigation Drawer (§16) ----------
   display:none/flex 토글 대신 opacity+transform로 전환해 부드럽게 열리도록 한다. */
.mobile-nav {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(16px);
  transition: opacity var(--motion-normal) var(--ease-out),
              transform var(--motion-normal) var(--ease-out),
              visibility var(--motion-normal) linear;
}
.mobile-nav.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

/* Submenu accordion — max-height 기반 전환(§16) */
.mobile-nav__submenu {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  display: block;
  transition: max-height var(--motion-normal) var(--ease-out), opacity var(--motion-normal) var(--ease-out);
}
.mobile-nav__submenu.is-open {
  max-height: 480px;
  opacity: 1;
}

.mobile-nav__toggle span[aria-hidden] {
  display: inline-block;
  transition: transform var(--motion-fast) var(--ease-out);
}
.mobile-nav__toggle[aria-expanded="true"] span[aria-hidden] {
  transform: rotate(180deg);
}

/* ---------- Mobile 성능(§19): 모바일에서는 transform 레이어를 늘리지 않는다 ---------- */
@media (max-width: 768px) {
  [data-reveal] {
    transition-duration: var(--motion-fast);
  }
}

/* ---------- prefers-reduced-motion (§18) ----------
   콘텐츠가 애니메이션 때문에 안 보이는 일이 없도록, reveal 대상은 즉시 최종 상태로 표시한다. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }

  /* Hero 순차 등장(§4, js/home.js)도 동일 원칙 적용 — 애니메이션 때문에 콘텐츠가 안 보이는 일이 없어야 한다. */
  .hero-step {
    opacity: 1;
    transform: none;
  }

  .mobile-nav {
    transform: none;
  }
}