/* ============================================================
   DONGJIN MOTION SYSTEM
   - Honors prefers-reduced-motion
   - Scroll-triggered reveals, hero entrance, subtle hovers
   ============================================================ */

/* ----- Base reveal states (controlled via .is-in by IntersectionObserver) ----- */
[data-anim] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(.22, .61, .36, 1),
    transform 0.9s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}
[data-anim="fade"]       { transform: none; }
[data-anim="up"]         { transform: translateY(32px); }
[data-anim="up-sm"]      { transform: translateY(14px); }
[data-anim="left"]       { transform: translateX(-32px); }
[data-anim="right"]      { transform: translateX(32px); }
[data-anim="scale"]      { transform: scale(0.94); }
[data-anim="clip"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 1.1s cubic-bezier(.7, 0, .2, 1);
}

[data-anim].is-in {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 0 0);
}

/* Stagger children: assign --i index */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(.22, .61, .36, 1),
    transform 0.7s cubic-bezier(.22, .61, .36, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
[data-stagger].is-in > * {
  opacity: 1;
  transform: none;
}

/* ----- Hero on-load entrance ----- */
.hero [data-hero] {
  opacity: 0;
  transform: translateY(28px);
  animation: heroIn 1s cubic-bezier(.22, .61, .36, 1) forwards;
  animation-delay: var(--d, 0ms);
}
@keyframes heroIn {
  to { opacity: 1; transform: none; }
}

/* Accent line that sweeps under the eyebrow */
.hero-eyebrow::before {
  transform-origin: left center;
  animation: lineSweep 1.1s cubic-bezier(.7, 0, .2, 1) 80ms both;
}
@keyframes lineSweep {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* Visual frame border corner draw-in */
.hero-visual .frame::before,
.hero-visual .frame::after {
  opacity: 0;
  animation: cornerIn 0.7s cubic-bezier(.22, .61, .36, 1) 1.1s forwards;
}
.hero-visual .frame::after { animation-delay: 1.25s; }
@keyframes cornerIn {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* Conveyor-like moving line under the hero center text */
.hero-visual .badge {
  animation: badgeSlide 0.9s cubic-bezier(.22, .61, .36, 1) 1.4s both;
}
@keyframes badgeSlide {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: none; }
}

/* Conveyor moving stripes in hero-bg::after */
.hero-bg::after {
  animation: conveyorPan 18s linear infinite;
  background-size: 240px 100%, 240px 100%, 100% 60px;
}
@keyframes conveyorPan {
  from { background-position: 0 0, 0 0, 0 0; }
  to   { background-position: -240px 0, 240px 0, 0 0; }
}

/* Page hero subtle entry */
.page-hero .crumb,
.page-hero h1,
.page-hero .h1-en {
  opacity: 0;
  transform: translateY(22px);
  animation: heroIn .9s cubic-bezier(.22,.61,.36,1) forwards;
}
.page-hero .crumb   { animation-delay: 60ms; }
.page-hero h1       { animation-delay: 180ms; }
.page-hero .h1-en   { animation-delay: 320ms; }

/* page-hero accent bottom line */
.page-hero::after {
  transform-origin: right center;
  animation: pageHeroLine 1s cubic-bezier(.7,0,.2,1) 420ms both;
}
@keyframes pageHeroLine {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ----- Hover micro interactions ----- */
.strength,
.industry-card,
.eq-card,
.work-card,
.method-card,
.plant-card {
  position: relative;
  overflow: hidden;
}
.strength::after,
.industry-card::after,
.eq-card::after,
.method-card::after,
.plant-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width .35s cubic-bezier(.7, 0, .2, 1);
  z-index: 5;
}
.strength:hover::after,
.industry-card:hover::after,
.eq-card:hover::after,
.method-card:hover::after,
.plant-card:hover::after {
  width: 100%;
}

/* Slight image-slot zoom on parent card hover */
.industry-card:hover .img-slot,
.work-card:hover .img-slot,
.plant-card:hover .img-slot {
  background-position: 4px 4px;
}
.img-slot {
  transition: background-position .6s ease;
}

/* Stat number subtle scale-in once visible */
.hero-stat.is-counted .n {
  animation: counted .6s cubic-bezier(.22,.61,.36,1);
}
@keyframes counted {
  0%   { transform: scale(0.94); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* Process step dots: pulse when visible */
.process-step.is-in .dot {
  animation: dotPop .55s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes dotPop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}
.process-step:nth-child(2).is-in .dot { animation-delay: .08s; }
.process-step:nth-child(3).is-in .dot { animation-delay: .16s; }
.process-step:nth-child(4).is-in .dot { animation-delay: .24s; }
.process-step:nth-child(5).is-in .dot { animation-delay: .32s; }

/* Header link underline — NO overflow:hidden so Korean glyphs don't get clipped */
.nav a::before {
  content: "";
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s cubic-bezier(.7, 0, .2, 1);
  pointer-events: none;
}
.nav a:hover::before {
  transform: scaleX(1);
}
.nav a.active::before { display: none; }

/* Logo subtle lift on header hover */
.logo img { transition: transform .3s var(--ease); }
.logo:hover img { transform: translateY(-1px); }

/* Btn: rely on styles.css base hover (background swap + arrow move).
   We add ONLY a smooth transition timing — no overlay, no overflow hidden.
   This keeps Korean glyphs and child text fully visible at all times. */
.btn {
  transition: background-color .35s cubic-bezier(.7,0,.2,1),
              color .25s var(--ease),
              border-color .25s var(--ease),
              transform .25s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn .arrow { transition: transform .25s var(--ease); }

/* Filter / cat-nav buttons subtle feedback */
.cat-nav button,
.filter-row button {
  transition: all .25s var(--ease);
}
.cat-nav button:hover,
.filter-row button:hover {
  transform: translateY(-1px);
}

/* Map pin already has its own pulse; ensure smoothness */
.map-pin .pin-marker {
  transition: transform .3s var(--ease);
}
.map-pin:hover .pin-marker {
  transform: rotate(-45deg) scale(1.06);
}

/* ----- Reduced motion: kill everything ----- */
@media (prefers-reduced-motion: reduce) {
  [data-anim],
  [data-stagger] > *,
  .hero [data-hero],
  .page-hero .crumb,
  .page-hero h1,
  .page-hero .h1-en,
  .hero-bg::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}