/* SL COSMETICS V17 cinematic full-bleed motion hero */
.cine-hero{position:relative;height:100svh;min-height:720px;overflow:hidden;background:#111;margin-top:0;color:#fff;isolation:isolate}
.cine-hero__scenes,.cine-scene,.cine-scene__media,.cine-scene__shade{position:absolute;inset:0}
.cine-scene{opacity:0;visibility:hidden;transition:opacity 1.15s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.15s;z-index:1}
.cine-scene.is-active{opacity:1;visibility:visible;transition-delay:0s;z-index:2}
.cine-scene__media{overflow:hidden;background:#151515}
.cine-scene__media img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.08);filter:saturate(.92) contrast(1.02);will-change:transform}
.cine-scene.is-active .cine-scene__media img{animation:cineZoomOut var(--scene-dur,5.2s) cubic-bezier(.2,.65,.25,1) both}
.cine-scene[data-motion="in"].is-active .cine-scene__media img{animation-name:cineZoomIn}
.cine-scene[data-motion="pan-left"].is-active .cine-scene__media img{animation-name:cinePanLeft}
.cine-scene[data-motion="pan-right"].is-active .cine-scene__media img{animation-name:cinePanRight}
@keyframes cineZoomOut{from{transform:scale(1.13)}to{transform:scale(1.015)}}
@keyframes cineZoomIn{from{transform:scale(1.01)}to{transform:scale(1.11)}}
@keyframes cinePanLeft{from{transform:scale(1.08) translateX(2.5%)}to{transform:scale(1.04) translateX(-2.5%)}}
@keyframes cinePanRight{from{transform:scale(1.08) translateX(-2.5%)}to{transform:scale(1.04) translateX(2.5%)}}
.cine-scene__shade{background:linear-gradient(90deg,rgba(10,10,10,.66) 0%,rgba(10,10,10,.45) 34%,rgba(10,10,10,.14) 68%,rgba(10,10,10,.24) 100%);z-index:1}
.cine-scene[data-align="right"] .cine-scene__shade{background:linear-gradient(270deg,rgba(10,10,10,.67) 0%,rgba(10,10,10,.44) 36%,rgba(10,10,10,.12) 72%,rgba(10,10,10,.24) 100%)}
.cine-scene[data-tone="light"] .cine-scene__shade{background:linear-gradient(90deg,rgba(251,248,247,.92) 0%,rgba(251,248,247,.72) 36%,rgba(251,248,247,.16) 72%,rgba(251,248,247,.12) 100%)}
.cine-scene[data-tone="light"]{color:#35121d}
.cine-scene[data-tone="light"][data-align="right"] .cine-scene__shade{background:linear-gradient(270deg,rgba(251,248,247,.93) 0%,rgba(251,248,247,.72) 36%,rgba(251,248,247,.14) 72%,rgba(251,248,247,.10) 100%)}
.cine-scene__content{position:absolute;z-index:3;left:max(5.2vw,52px);top:50%;transform:translateY(-48%);width:min(46vw,820px);pointer-events:none}
.cine-scene[data-align="right"] .cine-scene__content{left:auto;right:max(5.2vw,52px);text-align:right}
.cine-kicker{margin:0 0 26px;font-size:clamp(11px,.82vw,15px);letter-spacing:.34em;font-weight:500;text-transform:uppercase;opacity:0;transform:translateY(18px)}
.cine-title{margin:0;font-family:"Helvetica Neue","Avenir Next",Arial,sans-serif;font-size:clamp(58px,6.5vw,126px);line-height:.92;font-weight:300;letter-spacing:-.055em;text-wrap:balance;opacity:0;transform:translateY(38px);filter:blur(10px)}
.cine-title.cine-title--ko{font-family:Pretendard,"Noto Sans KR","Apple SD Gothic Neo",sans-serif;font-size:clamp(48px,5vw,94px);line-height:1.08;letter-spacing:-.05em;font-weight:350;max-width:13ch}
.cine-scene[data-align="right"] .cine-title.cine-title--ko{margin-left:auto}
.cine-copy{margin:30px 0 0;max-width:660px;font-size:clamp(16px,1.18vw,23px);line-height:1.72;font-weight:350;letter-spacing:-.02em;opacity:0;transform:translateY(24px)}
.cine-scene[data-align="right"] .cine-copy{margin-left:auto}
.cine-line{position:absolute;z-index:3;left:max(5.2vw,52px);top:calc(50% + 178px);width:min(26vw,430px);height:1px;background:currentColor;opacity:.5;transform:scaleX(0);transform-origin:left}
.cine-line:after{content:"";position:absolute;right:-4px;top:-3px;width:7px;height:7px;border-radius:50%;background:currentColor}
.cine-scene[data-align="right"] .cine-line{left:auto;right:max(5.2vw,52px);transform-origin:right}
.cine-scene.is-active .cine-kicker{animation:cineTextIn .85s .15s ease forwards}
.cine-scene.is-active .cine-title{animation:cineTitleIn 1.15s .36s cubic-bezier(.2,.72,.2,1) forwards}
.cine-scene.is-active .cine-copy{animation:cineTextIn .95s .78s ease forwards}
.cine-scene.is-active .cine-line{animation:cineLineIn 1.25s 1.05s cubic-bezier(.65,0,.35,1) forwards}
@keyframes cineTextIn{to{opacity:1;transform:none}}
@keyframes cineTitleIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cineLineIn{to{transform:scaleX(1)}}
.cine-hero__topline{position:absolute;z-index:6;left:max(5.2vw,52px);right:max(5.2vw,52px);top:calc(var(--header,80px) + 28px);display:flex;justify-content:space-between;align-items:center;color:#fff;mix-blend-mode:difference;pointer-events:none}
.cine-hero__brandtag{font-size:11px;letter-spacing:.28em;font-weight:500}
.cine-hero__counter{font-size:10px;letter-spacing:.22em;font-weight:500}
.cine-hero__progress{position:absolute;z-index:7;left:max(5.2vw,52px);right:max(5.2vw,52px);bottom:34px;height:1px;background:rgba(255,255,255,.35);mix-blend-mode:difference}
.cine-hero__progress i{display:block;width:0;height:100%;background:#fff;transform-origin:left}
.cine-hero__hint{position:absolute;z-index:7;right:max(5.2vw,52px);bottom:52px;color:#fff;mix-blend-mode:difference;font-size:9px;letter-spacing:.24em}
.cine-hero__cta{display:inline-flex;pointer-events:auto;margin-top:34px;align-items:center;gap:22px;color:inherit;text-decoration:none;font-size:13px;letter-spacing:.08em;border-bottom:1px solid currentColor;padding-bottom:8px;opacity:0;transform:translateY(18px)}
.cine-scene.is-active .cine-hero__cta{animation:cineTextIn .8s 1.05s ease forwards}
@media(max-width:900px){
 .cine-hero{min-height:680px}
 .cine-scene__content,.cine-scene[data-align="right"] .cine-scene__content{left:26px;right:26px;top:auto;bottom:104px;transform:none;width:auto;text-align:left}
 .cine-scene__shade,.cine-scene[data-align="right"] .cine-scene__shade{background:linear-gradient(0deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.42) 42%,rgba(8,8,8,.06) 72%)}
 .cine-scene[data-tone="light"] .cine-scene__shade,.cine-scene[data-tone="light"][data-align="right"] .cine-scene__shade{background:linear-gradient(0deg,rgba(251,248,247,.96) 0%,rgba(251,248,247,.70) 45%,rgba(251,248,247,.08) 75%)}
 .cine-title{font-size:clamp(50px,14vw,78px)}
 .cine-title.cine-title--ko{font-size:clamp(38px,10vw,62px);max-width:12ch}
 .cine-copy,.cine-scene[data-align="right"] .cine-copy{font-size:16px;line-height:1.62;max-width:31em;margin-left:0}
 .cine-line,.cine-scene[data-align="right"] .cine-line{left:26px;right:auto;top:auto;bottom:82px;width:42vw;transform-origin:left}
 .cine-hero__topline{left:26px;right:26px;top:calc(var(--header,72px) + 20px)}
 .cine-hero__progress{left:26px;right:26px;bottom:24px}
 .cine-hero__hint{display:none}
}
@media(prefers-reduced-motion:reduce){
 .cine-scene__media img,.cine-scene.is-active .cine-kicker,.cine-scene.is-active .cine-title,.cine-scene.is-active .cine-copy,.cine-scene.is-active .cine-line,.cine-scene.is-active .cine-hero__cta{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
}


/* V17 fix01: package scene image framing and lighter English title */
.cine-title:not(.cine-title--ko){font-size:clamp(54px,6vw,112px);font-weight:240;letter-spacing:-.038em;line-height:.94}
.cine-scene--package .cine-scene__content{width:min(40vw,700px);top:46%;transform:translateY(-46%)}
.cine-scene--package .cine-title{font-size:clamp(50px,5.4vw,96px);font-weight:220;letter-spacing:-.032em;line-height:.95}
.cine-scene--package .cine-copy{max-width:620px}
.cine-scene--package .cine-line{top:calc(50% + 166px)}
.cine-scene--package .cine-scene__media img{object-position:50% 46%;}
.cine-scene--package.is-active .cine-scene__media img{animation-name:cinePanRightSoft}
@keyframes cinePanRightSoft{from{transform:scale(1.03) translateX(-1.2%)}to{transform:scale(1.0) translateX(1.2%)}}
@media(max-width:900px){
 .cine-title:not(.cine-title--ko){font-size:clamp(44px,12.2vw,70px);letter-spacing:-.03em}
 .cine-scene--package .cine-title{font-size:clamp(42px,11vw,64px)}
 .cine-scene--package .cine-scene__media img{object-position:48% 42%}
 .cine-scene--package .cine-line{bottom:82px;top:auto}
}


/* V17 fix02: word-by-word cinematic typography from supplied motion reference */
.cine-title,.cine-copy{opacity:1!important;transform:none!important;filter:none!important}
.cine-word{display:inline-block;opacity:0;will-change:transform,opacity,filter}
.cine-title .cine-word{transform:scale(1.16) translateY(.22em);filter:blur(11px)}
.cine-copy .cine-word{transform:scale(.94) translateY(.18em);filter:blur(7px)}
.cine-scene.is-active .cine-title .cine-word{animation:cineWordTitleIn 1.35s cubic-bezier(.2,.75,.2,1) calc(.28s + var(--wi)*.085s) forwards}
.cine-scene.is-active .cine-copy .cine-word{animation:cineWordCopyIn 1.05s cubic-bezier(.2,.75,.2,1) calc(.78s + var(--wi)*.05s) forwards}
@keyframes cineWordTitleIn{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes cineWordCopyIn{to{opacity:1;transform:none;filter:blur(0)}}
/* keep the label restrained so the main title remains the hero */
.cine-scene.is-active .cine-kicker{animation:cineTextIn .8s .12s ease forwards}
/* slightly softer exit as the next full-bleed image crossfades in */
.cine-scene:not(.is-active) .cine-word{opacity:0;transform:scale(.985) translateY(-.08em);filter:blur(5px);transition:opacity .45s,transform .55s,filter .45s}
@media(max-width:900px){
 .cine-title .cine-word{transform:scale(1.10) translateY(.16em);filter:blur(8px)}
 .cine-copy .cine-word{transform:scale(.97) translateY(.12em);filter:blur(5px)}
 .cine-scene.is-active .cine-title .cine-word{animation-duration:1.05s;animation-delay:calc(.24s + var(--wi)*.065s)}
 .cine-scene.is-active .cine-copy .cine-word{animation-duration:.9s;animation-delay:calc(.68s + var(--wi)*.035s)}
}
@media(prefers-reduced-motion:reduce){
 .cine-word{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
}