/* ============================================================
   DOTRAK static site — shared styles
   Design tokens mirror app/globals.css. Tailwind color names are
   configured in the inline tailwind.config in each page's <head>.
   This file holds only things Tailwind utilities can't express:
   custom fonts, header scroll behavior, scroll-reveal, carousel,
   before/after slider, and the floating-button pulse.
   ============================================================ */

:root {
  --cream: #F9F7F1;
  --cream-light: #F9F7F1;
  --beige: #EFE7D9;
  --beige-deep: #C8BBA6;
  --walnut: #2F2A24;
  --walnut-soft: #6E6354;
  --text: #2F2A24;
  --text-soft: #6E6354;
  --text-mute: #6E6354;
  --teal: #5E7259;
  --teal-light: #46553F;
  --accent-soft: #E5EADD;
  --gold: #B7975C;
  --gold-soft: #C9A984;
}

body {
  background: var(--cream-light);
  color: var(--text);
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

/* 영문 제목 — 브랜드 규칙: Pretendard 단일 서체 */
.font-serif-display {
  font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}

/* ── 카드 호버 (globals.css 대응) ── */
.hover-card {
  transition: border-color 0.3s ease, opacity 0.3s ease;
}
.hover-card:hover {
  border-color: var(--teal);
}

/* ============================================================
   Header — transparent over hero, cream once scrolled.
   JS toggles .is-scrolled on .site-header (see app.js).
   ============================================================ */
.site-header {
  background: transparent;
  transition: background-color 0.5s ease, box-shadow 0.5s ease, backdrop-filter 0.5s ease;
}
.site-header.is-scrolled {
  background: rgba(249, 247, 241, 0.9);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
/* default (over dark hero) = light text */
.site-header .h-logo { color: #fff; }
.site-header .h-link { color: rgba(255, 255, 255, 0.8); }
.site-header .h-link:hover { color: #fff; }
.site-header .h-burger { color: #fff; }
/* scrolled = dark text */
.site-header.is-scrolled .h-logo { color: var(--walnut); }
.site-header.is-scrolled .h-link { color: var(--walnut-soft); }
.site-header.is-scrolled .h-link:hover { color: var(--teal); }
.site-header.is-scrolled .h-burger { color: var(--walnut); }

/* Some pages have a LIGHT hero at top and want dark header text even
   before scroll. Add class .header-solid to <body> for those. */
body.header-solid .site-header .h-logo { color: var(--walnut); }
body.header-solid .site-header .h-link { color: var(--walnut-soft); }
body.header-solid .site-header .h-link:hover { color: var(--teal); }
body.header-solid .site-header .h-burger { color: var(--walnut); }

/* Desktop dropdown (Portfolio) */
.nav-dropdown {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.nav-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-caret { transition: transform 0.2s ease; }
.nav-caret.is-open { transform: rotate(180deg); }

/* ============================================================
   Mobile menu
   ============================================================ */
.mobile-menu { visibility: hidden; transition: visibility 0.5s; }
.mobile-menu.is-open { visibility: visible; }
.mobile-menu .mm-overlay { opacity: 0; transition: opacity 0.5s ease; }
.mobile-menu.is-open .mm-overlay { opacity: 1; }
.mobile-menu .mm-panel { transform: translateX(100%); transition: transform 0.5s ease; }
.mobile-menu.is-open .mm-panel { transform: translateX(0); }
.mm-sub { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.3s ease, opacity 0.3s ease; }
.mm-sub.is-open { max-height: 320px; opacity: 1; }
.mm-caret { transition: transform 0.2s ease; }
.mm-caret.is-open { transform: rotate(180deg); }

/* ============================================================
   Scroll reveal (replaces framer-motion whileInView / initial-animate)
   Add class="reveal" to any element; optional data-delay="120" (ms).
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Carousel (replaces embla-carousel)
   Markup:
   <div class="carousel" data-autoplay="4000" data-loop="true">
     <div class="carousel-viewport">
       <div class="carousel-track">
         <div class="carousel-slide">…</div>
       </div>
     </div>
     <button class="carousel-prev" aria-label="이전">…</button>
     <button class="carousel-next" aria-label="다음">…</button>
     <div class="carousel-dots"></div>
   </div>
   Per-slide width is controlled by the slide's own classes
   (e.g. basis-full / md:basis-1/2). Default is full width.
   ============================================================ */
.carousel { position: relative; }
.carousel-viewport { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease; }
.carousel-slide { position: relative; flex: 0 0 100%; min-width: 0; }
.carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.carousel-dots button {
  width: 8px; height: 8px; border-radius: 9999px;
  background: var(--beige-deep); border: 0; cursor: pointer; padding: 0;
  transition: background-color 0.3s ease, width 0.3s ease;
}
.carousel-dots button.is-active { background: var(--teal); width: 22px; }

/* ============================================================
   Before / After slider
   <div class="ba-slider">
     <img class="ba-after" …>            (bottom / full)
     <div class="ba-before"><img …></div>(clipped top layer)
     <input class="ba-range" type="range" min="0" max="100" value="50">
     <div class="ba-handle"></div>
   </div>
   ============================================================ */
.ba-slider { position: relative; overflow: hidden; user-select: none; }
.ba-slider img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-slider .ba-after { position: absolute; inset: 0; }
.ba-slider .ba-before { position: absolute; inset: 0; width: 50%; overflow: hidden; }
.ba-slider .ba-before img { width: auto; }
.ba-range {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: ew-resize;
}
.ba-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 2px; background: #fff; transform: translateX(-1px); pointer-events: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}
.ba-handle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 36px; height: 36px; transform: translate(-50%, -50%);
  border-radius: 9999px; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   Floating contact button pulse
   ============================================================ */
@keyframes fab-pulse {
  0% { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}
.fab-pulse-ring { animation: fab-pulse 2s ease-out infinite; }

/* Smooth in-page anchor scrolling */
html { scroll-behavior: smooth; }