/* ============================================================
   HEROS — 드라마틱 애니메이션 레이어
   (.js 클래스 + prefers-reduced-motion: no-preference 에서만 작동.
    JS 미동작/모션축소 사용자는 모든 콘텐츠가 정상 노출됨)
   ============================================================ */

/* ----- 항상 적용되는 베이스(레이아웃/호버) ----- */
.hero-actions > span{display:flex;flex-wrap:wrap;gap:12px}
.btn.arr svg{transition:transform .25s var(--ease)}
.btn.arr:hover svg{transform:translateX(5px)}

.hero-scroll{position:absolute;z-index:3;left:50%;translate:-50% 0;bottom:24px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
  color:rgba(255,255,255,.85);font-size:10px;font-weight:700;letter-spacing:.32em}
.hero-scroll svg{width:22px;height:22px}
@media (max-width:768px){.hero-scroll{display:none}}

/* nav 링크 호버 시 살짝 상승 */
.nav-cta{transition:transform .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)}

@media (prefers-reduced-motion:no-preference){

  /* ----- HERO: Ken Burns 슬로우 줌 ----- */
  .hero-slide.active{animation:kenburns 6.8s var(--ease) both}
  @keyframes kenburns{from{transform:scale(1.001)}to{transform:scale(1.10)}}

  /* ----- HERO: 라인 마스크 등장 ----- */
  .js .anim-hero .line{overflow:hidden;padding-bottom:.08em}
  .js .anim-hero .line > span{display:inline-block;transform:translateY(120%);opacity:0;
    transition:transform 1s var(--ease),opacity .8s var(--ease);will-change:transform}
  .js .anim-hero .hero-actions > span{display:flex;flex-wrap:wrap;gap:12px}
  .js .anim-hero.in .line > span{transform:none;opacity:1}
  .js .anim-hero.in .kicker > span{transition-delay:.10s}
  .js .anim-hero.in h1 .line:nth-child(1) > span{transition-delay:.22s}
  .js .anim-hero.in h1 .line:nth-child(2) > span{transition-delay:.35s}
  .js .anim-hero.in .lead > span{transition-delay:.52s}
  .js .anim-hero.in .hero-actions > span{transition-delay:.66s}

  /* ----- HERO: 보조 모션 ----- */
  .hero-scroll svg{animation:bob 1.8s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}
  .hero-badge{animation:floaty 3.6s ease-in-out infinite}
  @keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

  /* ----- 스크롤 리빌: 방향 변형 ----- */
  .js .reveal[data-anim="left"]{transform:translateX(-48px)}
  .js .reveal[data-anim="right"]{transform:translateX(48px)}
  .js .reveal[data-anim="scale"]{transform:scale(.9)}
  .js .reveal[data-anim="left"].in,
  .js .reveal[data-anim="right"].in,
  .js .reveal[data-anim="scale"].in{transform:none}

  /* ----- WHY 아이콘 팝 ----- */
  .feature.in .ico{animation:pop .62s var(--ease) both}
  @keyframes pop{0%{transform:scale(.5) rotate(-8deg);opacity:0}
    60%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}

  /* ----- 섹션 타이틀 kicker 밑줄 그로우 ----- */
  .sec-head .kicker{position:relative}
  .sec-head.center .kicker::after{content:"";position:absolute;left:50%;bottom:-8px;height:2px;width:0;
    background:var(--brand);transform:translateX(-50%);transition:width .7s var(--ease) .2s}
  .sec-head.center.in .kicker::after,
  .reveal.in .sec-head.center .kicker::after{width:34px}

  /* ----- 도매 CTA 펄스 강조 ----- */
  .wholesale-cta .btn--primary{animation:cta-pulse 2.6s ease-in-out infinite}
  @keyframes cta-pulse{0%,100%{box-shadow:0 8px 24px rgba(0,0,0,.18)}
    50%{box-shadow:0 8px 32px rgba(0,0,0,.28),0 0 0 6px rgba(255,255,255,.12)}}

  /* ----- 이미지 클립 리빌 (위→아래 와이프 + 줌아웃) ----- */
  .js .clip-reveal{clip-path:inset(0 0 100% 0)}
  .js .clip-reveal.in{clip-path:inset(0 0 0 0);transition:clip-path 1.05s var(--ease)}
  .js .clip-reveal img{transform:scale(1.18);transition:transform 1.5s var(--ease)}
  .js .clip-reveal.in img{transform:scale(1)}

  /* ----- 갤러리 스태거 등장 ----- */
  .js .gallery.in .g-item{animation:rise .7s var(--ease) both}
  .js .gallery .g-item:nth-child(2){animation-delay:.07s}
  .js .gallery .g-item:nth-child(3){animation-delay:.14s}
  .js .gallery .g-item:nth-child(4){animation-delay:.07s}
  .js .gallery .g-item:nth-child(5){animation-delay:.14s}
  .js .gallery .g-item:nth-child(6){animation-delay:.21s}
  .js .gallery .g-item:nth-child(7){animation-delay:.14s}
  .js .gallery .g-item:nth-child(8){animation-delay:.21s}
  @keyframes rise{from{opacity:0;transform:translateY(34px) scale(.97)}to{opacity:1;transform:none}}

  /* ----- USP 카드 등장 ----- */
  .usp-band.in .usp{animation:rise .7s var(--ease) both}
  .usp-band.in .usp:nth-child(2){animation-delay:.1s}
  .usp-band.in .usp:nth-child(3){animation-delay:.2s}

  /* ----- 풀블리드 줌인 ----- */
  .fullbleed.in .fullbleed-bg{animation:fbzoom 12s var(--ease) both}
  @keyframes fbzoom{from{transform:scale(1.12)}to{transform:scale(1.0)}}
}

/* 모바일: 좌우 이동 리빌은 가로 넘침(오른쪽 여백)을 유발하므로 세로 이동으로 대체 */
@media (prefers-reduced-motion:no-preference) and (max-width:768px){
  .js .reveal[data-anim="left"],
  .js .reveal[data-anim="right"]{transform:translateY(30px)}
  .js .reveal[data-anim="left"].in,
  .js .reveal[data-anim="right"].in{transform:none}
}