/* SL COSMETICS · HOME MOTION V16
   Corrected after V15: hero uses crossfade only, no competing transform animation.
*/

/* HERO — crossfade only. No scale reset / animation restart. */
.hero-static__visual.hero-rotator{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero-static__visual.hero-rotator::before{display:none!important}
.hero-rotator__img{
  opacity:0!important;
  transform:none!important;
  animation:none!important;
  filter:none!important;
  transition:opacity .92s cubic-bezier(.45,0,.25,1)!important;
  will-change:opacity;
  backface-visibility:hidden;
}
.hero-rotator__img.is-active{
  opacity:1!important;
  transform:none!important;
  animation:none!important;
}

/* FORMULA CARD — visible, quiet viscosity graphic */
.core-service-card--formula .core-service-card__visual{position:relative;isolation:isolate;overflow:hidden}
.sl-fluid-motion{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.78}
.sl-fluid-motion svg{width:100%;height:100%;display:block;overflow:visible}
.sl-fluid-motion .sl-fluid-path{fill:none;stroke:rgba(206,23,53,.52);stroke-width:1.15;stroke-linecap:round;stroke-dasharray:7 14;animation:slFluidDash 7.8s linear infinite}
.sl-fluid-motion .sl-fluid-path--soft{stroke:rgba(176,138,79,.34);stroke-width:.9;stroke-dasharray:2 18;animation-duration:10.5s;animation-direction:reverse}
.sl-fluid-motion .sl-fluid-bubble{fill:rgba(206,23,53,.28);filter:drop-shadow(0 3px 6px rgba(206,23,53,.09));animation:slBubbleFloat 5.4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.sl-fluid-motion .sl-fluid-bubble:nth-of-type(2){animation-delay:-1.3s;animation-duration:6.3s}
.sl-fluid-motion .sl-fluid-bubble:nth-of-type(3){animation-delay:-2.8s;animation-duration:7.1s}
@keyframes slFluidDash{to{stroke-dashoffset:-84}}
@keyframes slBubbleFloat{0%,100%{transform:translateY(7px) scale(.84);opacity:.18}50%{transform:translateY(-15px) scale(1.08);opacity:.72}}

/* GLOBAL — clearer route draw */
.global-map__stage{position:relative;isolation:isolate}
.sl-global-routes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible}
.sl-global-routes path{fill:none;stroke:rgba(206,23,53,.48);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.sl-global-routes circle{fill:#CE1735;opacity:0;transform-box:fill-box;transform-origin:center}
.global-map.is-route-visible .sl-global-routes path{animation:slRouteDraw 1.45s cubic-bezier(.2,.7,.25,1) forwards}
.global-map.is-route-visible .sl-global-routes path:nth-of-type(2){animation-delay:.14s}
.global-map.is-route-visible .sl-global-routes path:nth-of-type(3){animation-delay:.28s}
.global-map.is-route-visible .sl-global-routes path:nth-of-type(4){animation-delay:.42s}
.global-map.is-route-visible .sl-global-routes path:nth-of-type(5){animation-delay:.56s}
/* Animate the halo only. The Seoul origin itself must stay accurately visible. */
.sl-global-routes .sl-global-origin-core{fill:#CE1735;opacity:1;stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.sl-global-routes .sl-global-origin-pulse{opacity:0}
.global-map.is-route-visible .sl-global-routes .sl-global-origin-pulse{animation:slOriginPulse 2.8s .25s ease-out 3}
.global-map__stage .global-pin{z-index:3}
.global-map__stage>img{position:relative;z-index:0}
@keyframes slRouteDraw{0%{stroke-dashoffset:1;opacity:0}18%{opacity:.9}100%{stroke-dashoffset:0;opacity:.66}}
@keyframes slOriginPulse{0%{opacity:.9;transform:scale(.55)}55%{opacity:.18;transform:scale(2.4)}100%{opacity:0;transform:scale(3)}}

/* EDITORIAL ENTRANCE — visible enough to perceive, still restrained */
.home-motion-staged .eyebrow,
.home-motion-staged .section-title,
.home-motion-staged .body-lg,
.home-motion-staged .line-link,
.home-motion-staged .home-rnd-panel__list{
  opacity:0;
  transform:translate3d(0,24px,0);
  transition:opacity .72s ease,transform .84s cubic-bezier(.2,.72,.25,1);
}
.home-motion-staged.is-home-motion-visible .eyebrow{opacity:1;transform:none;transition-delay:.02s}
.home-motion-staged.is-home-motion-visible .section-title{opacity:1;transform:none;transition-delay:.10s}
.home-motion-staged.is-home-motion-visible .body-lg{opacity:1;transform:none;transition-delay:.18s}
.home-motion-staged.is-home-motion-visible .home-rnd-panel__list{opacity:1;transform:none;transition-delay:.25s}
.home-motion-staged.is-home-motion-visible .line-link{opacity:1;transform:none;transition-delay:.32s}

/* Image settle on selected home images only */
.home-motion-image{overflow:hidden}
.home-motion-image img{transform:scale(1.045);transition:transform 1.35s cubic-bezier(.2,.72,.25,1)}
.home-motion-image.is-home-motion-visible img{transform:scale(1)}

@media(max-width:760px){
  .sl-fluid-motion{opacity:.58}
  .home-motion-staged .eyebrow,.home-motion-staged .section-title,.home-motion-staged .body-lg,.home-motion-staged .line-link,.home-motion-staged .home-rnd-panel__list{transform:translate3d(0,12px,0);transition-duration:.52s}
  .home-motion-image img{transform:scale(1.025);transition-duration:.82s}
  .sl-global-routes path{stroke-width:1}
}

@media(prefers-reduced-motion:reduce){
  .hero-rotator__img{transition:none!important}
  .sl-fluid-motion *,.global-map.is-route-visible .sl-global-routes *{animation:none!important}
  .sl-global-routes path{stroke-dashoffset:0;opacity:.42}
  .sl-global-routes .sl-global-origin-core{opacity:1}
  .sl-global-routes .sl-global-origin-pulse{opacity:0}
  .home-motion-staged .eyebrow,.home-motion-staged .section-title,.home-motion-staged .body-lg,.home-motion-staged .line-link,.home-motion-staged .home-rnd-panel__list{opacity:1;transform:none;transition:none}
  .home-motion-image img{transform:none;transition:none}
}
