/* ============================================================================
 * dhp-interactions.css
 * Hand-written (NON-Tailwind) interaction / motion layer for daehanpns-site.
 * Loaded after site.css / reveal.css / mobile.css in app/layout.tsx.
 *
 * WHY a separate plain-CSS file: the project ships a precompiled Tailwind
 * bundle (no build step), so arbitrary utility classes that aren't already in
 * site.css do NOT exist. All new motion lives here as real CSS, the same way
 * reveal.css works.
 *
 * Motion tokens (decided 2026-06-25): subtle — 200ms, translateY 8px, no scale
 * except the hero background zoom. Every animation is guarded by
 * prefers-reduced-motion: reduce at the bottom of this file.
 * ========================================================================== */

:root {
  --dhp-ease-out: cubic-bezier(.16, 1, .3, 1);
  --dhp-dur-fast: 180ms;
  --dhp-dur-base: 240ms;
  /* Fixed nav total height: 40px utility bar + 64px (h-16) main row. */
  --dhp-nav-h: 104px;
}

/* ---------------------------------------------------------------------------
 * Nav / hero separation. The nav is position:fixed and was translucent, so the
 * full-bleed hero showed THROUGH it. Make the nav solid and push the first
 * hero of each page down by the nav height so the two read as distinct bands:
 * a solid nav strip on top, the hero beginning cleanly beneath it.
 * Pages without a hero already clear the nav via their own pt-32, so only the
 * home slider (.dhpx-hero) and sub-page PageHero (.dhp-hero) get offset.
 * ------------------------------------------------------------------------- */
.dhp-nav {
  background-color: #ffffff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Elevate smoothly once scrolled; box-shadow only, so nav height is unchanged. */
  box-shadow: none;
  transition: box-shadow var(--dhp-dur-base) var(--dhp-ease-out);
}
.dhp-nav--scrolled {
  background-color: #ffffff;
  box-shadow: var(--shadow-1);
}
.dhp-hero {
  margin-top: var(--dhp-nav-h);
}

/* ---------------------------------------------------------------------------
 * Collapsible (grid-rows 0fr -> 1fr). Used by the mobile side menu accordion.
 * The compiled bundle lacks grid-rows-[0fr]/[1fr], so we define it by hand.
 * ------------------------------------------------------------------------- */
.dhp-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dhp-dur-base) var(--dhp-ease-out);
}
.dhp-collapse.is-open {
  grid-template-rows: 1fr;
}
.dhp-collapse > .dhp-collapse__inner {
  overflow: hidden;
  min-height: 0;
}

/* ---------------------------------------------------------------------------
 * Stagger helper for scroll-reveal groups.
 * Add `dhp-stagger` to a container and `data-dhp-reveal` to its children; each
 * child reveals slightly after the previous one without needing per-element
 * inline delays. Works alongside reveal.css's --dhp-reveal-delay variable.
 * ------------------------------------------------------------------------- */
.dhp-stagger > [data-dhp-reveal]:nth-child(1) { --dhp-reveal-delay: 0ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(2) { --dhp-reveal-delay: 70ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(3) { --dhp-reveal-delay: 140ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(4) { --dhp-reveal-delay: 210ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(5) { --dhp-reveal-delay: 280ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(6) { --dhp-reveal-delay: 350ms; }
.dhp-stagger > [data-dhp-reveal]:nth-child(n + 7) { --dhp-reveal-delay: 420ms; }

/* ---------------------------------------------------------------------------
 * Page enter transition (app/template.tsx). Remounts on every route change.
 * OPACITY ONLY — the site nav is position:fixed, and a transform on any
 * ancestor would turn it into a containing block and make the bar jump during
 * the animation. The vertical slide-in is handled per-section by data-dhp-reveal
 * (which targets content blocks, never the nav).
 * ------------------------------------------------------------------------- */
@keyframes dhpPageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dhp-page-enter {
  animation: dhpPageEnter var(--dhp-dur-base) var(--dhp-ease-out) both;
}

/* ---------------------------------------------------------------------------
 * Top-nav link: animated underline that grows left->right on hover, and stays
 * drawn for the active route. Active link also takes the brand blue.
 * ------------------------------------------------------------------------- */
.dhp-navlink {
  position: relative;
}
.dhp-navlink::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background-color: #2563eb; /* blue-600 */
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dhp-dur-fast) var(--dhp-ease-out);
}
.dhp-navlink:hover::after,
.dhp-navlink:focus-visible::after,
.dhp-navlink.is-active::after {
  transform: scaleX(1);
}
.dhp-navlink.is-active {
  color: #2563eb;
}

/* ---------------------------------------------------------------------------
 * PageHero entrance. Background layer does a slow subtle zoom-out (ken-burns
 * settle); title + subtitle rise and fade in, staggered. The bg lives on a
 * dedicated absolutely-positioned layer so only the image scales — text and
 * overlay stay put.
 * ------------------------------------------------------------------------- */
/* 서브페이지 배너: 느린 켄번즈 줌아웃(사진이 점점 멀어지는 느낌). */
@keyframes dhpHeroKenburns {
  from { transform: scale(1.14); }
  to   { transform: scale(1.01); }
}
.dhp-hero-bg {
  transform: scale(1.14);
  transform-origin: center;
  animation: dhpHeroKenburns 14000ms var(--dhp-ease-out) both;
}
/* 줌인 변형(가까워짐) — PageHero가 섹션마다 번갈아 부여. */
@keyframes dhpHeroKenburnsIn {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.dhp-hero-bg--in {
  transform: scale(1);
  animation-name: dhpHeroKenburnsIn;
}
/* 서브배너 제목/부제 진입: 홈 히어로처럼 아래에서 천천히 떠오르며 나타난다.
   기존 12px/240ms는 너무 미미해 체감이 없었음 → 26px/720ms + 블러 해제로 강화,
   부제는 한 박자 늦게(stagger). */
@keyframes dhpHeroRise {
  from { opacity: 0; transform: translateY(26px); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.dhp-hero-rise {
  animation: dhpHeroRise 720ms var(--dhp-ease-out) both;
  animation-delay: 120ms;
}
.dhp-hero-rise--delay {
  animation-delay: 280ms;
}

/* ---------------------------------------------------------------------------
 * Side menu item (SideMenuLayout). Active item grows a left accent bar; any
 * item nudges right slightly on hover. The accent bar sits inside the menu's
 * overflow-hidden container so it never spills.
 * ------------------------------------------------------------------------- */
.dhp-sidelink {
  position: relative;
  transition: background-color var(--dhp-dur-base), color var(--dhp-dur-base),
    transform var(--dhp-dur-fast) var(--dhp-ease-out);
}
.dhp-sidelink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--dhp-primary);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform var(--dhp-dur-base) var(--dhp-ease-out);
}
.dhp-sidelink.is-active::before {
  transform: scaleY(1);
}
.dhp-sidelink:hover {
  transform: translateX(2px);
}

/* ---------------------------------------------------------------------------
 * Card hover lift. Pairs with the existing hover:shadow-lg utility.
 * ------------------------------------------------------------------------- */
.dhp-card-lift {
  transition: transform var(--dhp-dur-base) var(--dhp-ease-out),
    box-shadow var(--dhp-dur-base) var(--dhp-ease-out);
}
.dhp-card-lift:hover {
  transform: translateY(-4px);
}

/* ---------------------------------------------------------------------------
 * Press feedback (opt-in). NOT applied globally: several buttons are absolutely
 * positioned via `transform: -translate-y-1/2`, and a blanket :active transform
 * would override that and make them jump. Add `dhp-press` to static buttons.
 * ------------------------------------------------------------------------- */
.dhp-press {
  transition: transform var(--dhp-dur-fast) var(--dhp-ease-out);
}
.dhp-press:active {
  transform: scale(0.97);
}

/* ---------------------------------------------------------------------------
 * Keyboard focus ring for interactive elements that don't already manage their
 * own focus styles (inputs/selects/textarea keep their focus:ring). Restores a
 * visible focus indicator the design was missing.
 * ------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[role="menuitem"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------------------------------------------------------------------------
 * Mobile nav drawer. Always mounted so it can animate on both open and close.
 * Backdrop fades; panel slides in from the right. Open/closed positions are set
 * via inline transform/opacity in S00Nav; this only owns the transitions.
 * ------------------------------------------------------------------------- */
.dhp-drawer {
  transition: opacity var(--dhp-dur-base) var(--dhp-ease-out);
}
.dhp-drawer-panel {
  transition: transform var(--dhp-dur-base) var(--dhp-ease-out);
}

/* ===========================================================================
 * prefers-reduced-motion — disable/curtail all added motion.
 * ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  .dhp-collapse {
    transition: none;
  }
  .dhp-drawer,
  .dhp-drawer-panel {
    transition: none;
  }
  .dhp-card-lift {
    transition: none;
  }
  .dhp-card-lift:hover {
    transform: none;
  }
  .dhp-press {
    transition: none;
  }
  .dhp-press:active {
    transform: none;
  }
  .dhp-sidelink,
  .dhp-sidelink::before {
    transition: none;
  }
  .dhp-sidelink:hover {
    transform: none;
  }
  .dhp-page-enter {
    animation: none;
  }
  .dhp-navlink::after {
    transition: none;
  }
  .dhp-hero-bg {
    animation: none;
    transform: none;
  }
  .dhp-hero-rise {
    animation: none;
  }
  /* Show scroll-reveal content immediately instead of animating it in. */
  [data-dhp-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  /* Stop the utility-bar ticker from scrolling. */
  .ticker-animation {
    animation: none !important;
  }
  /* Stop the hero slider ken-burns background zoom. */
  .dhpx-bg {
    animation: none !important;
    transform: none !important;
  }
}

/* ---------------------------------------------------------------------------
 * 터치 기기 눌림 피드백. hover가 없는 기기(모바일)에서 카드/타일/버튼을 탭할 때
 * 살짝 눌리는 반응을 줘 "눌렸다"는 촉감을 보강한다(데스크톱 hover 동작에는 영향 없음).
 * ------------------------------------------------------------------------- */
@media (hover: none) and (pointer: coarse) {
  .dhp-tile, .dhp-str-card, .dhp-s02-card, .dhp-hiw-step,
  .dhp-notice-item, .dhp-mkt-item, .dhp-kakao,
  .dhp-locsec-btn, .dhp-qm-item {
    transition: transform .12s var(--dhp-ease-out, ease);
  }
  .dhp-tile:active, .dhp-str-card:active, .dhp-s02-card:active,
  .dhp-hiw-step:active, .dhp-notice-item:active, .dhp-mkt-item:active,
  .dhp-kakao:active, .dhp-locsec-btn:active, .dhp-qm-item:active {
    transform: scale(.98);
  }
}
@media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .dhp-tile:active, .dhp-str-card:active, .dhp-s02-card:active,
  .dhp-hiw-step:active, .dhp-notice-item:active, .dhp-mkt-item:active,
  .dhp-kakao:active, .dhp-locsec-btn:active, .dhp-qm-item:active {
    transform: none;
  }
}