/* ==================================================================== K-Well — Service-page animation layer (sp-anim) Loaded ONLY by the 5 service pages (EN + KO). SAFETY MODEL (learned the hard way on this site): - Every "hidden" pre-animation state is gated on `html.sp-anim`, a class set by an inline script. No JS → fully visible page. - Scroll entrances are driven by `.spa-in` (set by sp-anim.js via IntersectionObserver) + per-child `--spa-i` stagger indices. - prefers-reduced-motion: entrances become opacity-only fades; ambient decor is hidden. NO layout properties (width/height) in any shared reduced-motion selector list. ==================================================================== */ /* -------------------------------------------------------------------- 1. HERO CHOREOGRAPHY (plays once on load) -------------------------------------------------------------------- */ /* slow ken-burns settle on the hero image, then a gentle endless drift */ html.sp-anim .sp-hero__bg img { animation: spaBgSettle 2.6s var(--kw-ease) both, spaBgDrift 26s ease-in-out 2.6s infinite alternate; } @keyframes spaBgSettle { from { transform: scale(1.07); } to { transform: scale(1); } } @keyframes spaBgDrift { from { transform: scale(1); } to { transform: scale(1.045); } } html.sp-anim .sp-crumb { animation: spaFadeDown .7s var(--kw-ease) .15s both; } html.sp-anim .sp-hero__eyebrow{ animation: spaFadeUp .7s var(--kw-ease) .25s both; } html.sp-anim .sp-hero__tagline{ animation: spaFadeUp .8s var(--kw-ease) .85s both; } html.sp-anim .sp-hero__rail { animation: spaRailIn 1.1s var(--kw-ease) 1.05s both; } html.sp-anim .sp-hero__cta > *{ animation: spaFadeUp .7s var(--kw-ease) both; } html.sp-anim .sp-hero__cta > :nth-child(1) { animation-delay: 1s; } html.sp-anim .sp-hero__cta > :nth-child(2) { animation-delay: 1.12s; } /* title — per-character rise (spans injected by sp-anim.js) */ html.sp-anim .sp-hero__title .spa-ch { display: inline-block; animation: spaChRise .85s cubic-bezier(.16,.84,.26,1) both; animation-delay: calc(.38s + var(--spa-i, 0) * 34ms); } @keyframes spaChRise { from { opacity: 0; transform: translateY(.55em) rotate(2deg); filter: blur(6px); } to { opacity: 1; transform: translateY(0) rotate(0); filter: blur(0); } } /* hangul brush word — ink settling */ html.sp-anim .sp-hero__hangul { animation: spaInk 1.1s var(--kw-ease) .7s both; } @keyframes spaInk { from { opacity: 0; transform: scale(.86) translateY(8px); filter: blur(7px); } 60% { filter: blur(1.5px); } to { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); } } /* giant brush number — fade in, then forever float */ html.sp-anim .sp-hero__num { animation: spaNumIn 1.6s var(--kw-ease) .5s both, spaFloat 9s ease-in-out 2.2s infinite alternate; } @keyframes spaNumIn { from { opacity: 0; transform: translateY(40px) rotate(3deg); } } @keyframes spaFloat { from { translate: 0 0; } to { translate: 0 -18px; } } /* scroll cue — looping pulse down the line */ html.sp-anim .sp-hero__scrollcue { animation: spaFadeUp .8s var(--kw-ease) 1.5s both; } html.sp-anim .sp-hero__scrollcue-line { position: relative; overflow: hidden; } html.sp-anim .sp-hero__scrollcue-line::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 40%; background: currentColor; animation: spaCue 2.2s cubic-bezier(.6,.05,.3,.95) 2s infinite; } @keyframes spaCue { from { transform: translateY(-110%); } to { transform: translateY(280%); } } @keyframes spaFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } @keyframes spaFadeDown { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: translateY(0); } } @keyframes spaRailIn { from { opacity: 0; transform: translate(-14px, -50%); } to { opacity: 1; transform: translate(0, -50%); } } /* -------------------------------------------------------------------- 2. SCROLL ENTRANCES (granular, staggered — replaces whole-section fade) -------------------------------------------------------------------- */ /* the old whole-section .reveal fade is neutralized on sp-anim pages; children animate individually instead */ html.sp-anim main .reveal { opacity: 1; transform: none; transition: none; } /* section heads: eyebrow slides, title wipes up, intro follows */ html.sp-anim main .reveal .eyebrow { opacity: 0; transform: translateX(-18px); transition: opacity .7s var(--kw-ease), transform .7s var(--kw-ease); } html.sp-anim main .reveal .sp-section__title, html.sp-anim main .reveal .sp-approach__title, html.sp-anim main .reveal .sp-related__title, html.sp-anim main .reveal .sp-booking__h, html.sp-anim main .reveal .sp-essence__lede { opacity: 0; transform: translateY(34px); clip-path: inset(0 0 55% 0); transition: opacity .8s var(--kw-ease) .08s, transform .8s var(--kw-ease) .08s, clip-path .8s var(--kw-ease) .08s; } html.sp-anim main .reveal .sp-section__intro, html.sp-anim main .reveal .sp-booking__sub { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--kw-ease) .22s, transform .8s var(--kw-ease) .22s; } html.sp-anim main .reveal.spa-in .eyebrow { opacity: 1; transform: translateX(0); } html.sp-anim main .reveal.spa-in .sp-section__title, html.sp-anim main .reveal.spa-in .sp-approach__title, html.sp-anim main .reveal.spa-in .sp-related__title, html.sp-anim main .reveal.spa-in .sp-booking__h, html.sp-anim main .reveal.spa-in .sp-essence__lede { opacity: 1; transform: translateY(0); clip-path: inset(-6% 0 -12% 0); } html.sp-anim main .reveal.spa-in .sp-section__intro, html.sp-anim main .reveal.spa-in .sp-booking__sub { opacity: 1; transform: translateY(0); } /* generic staggered children — sp-anim.js sets --spa-i on each */ html.sp-anim .spa-stagger { opacity: 0; transform: translateY(28px); transition: opacity .75s var(--kw-ease), transform .75s var(--kw-ease); transition-delay: calc(.12s + var(--spa-i, 0) * 70ms); } html.sp-anim .spa-in .spa-stagger, html.sp-anim .spa-stagger.spa-in { opacity: 1; transform: translateY(0); } /* treats: hairline draws across the top of each item, number tints in */ html.sp-anim .sp-treats__item { position: relative; } html.sp-anim .sp-treats__item::after { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 1px; background: var(--kw-bone); transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--kw-ease); transition-delay: calc(.2s + var(--spa-i, 0) * 90ms); } html.sp-anim .spa-in .sp-treats__item::after { transform: scaleX(1); } html.sp-anim .sp-treats__num { display: inline-block; opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .6s var(--kw-ease), transform .6s var(--kw-ease); transition-delay: calc(.3s + var(--spa-i, 0) * 90ms); } html.sp-anim .spa-in .sp-treats__num { opacity: 1; transform: translateY(0) scale(1); } /* expect: scroll-drawn spine + steps slide in from the left, numbers stamp in */ html.sp-anim .sp-expect__list { position: relative; } html.sp-anim .sp-expect__list::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, var(--kw-blue), rgba(255,255,255,.35)); transform: scaleY(var(--spa-p, 0)); transform-origin: top center; transition: transform .2s linear; opacity: .8; pointer-events: none; } html.sp-anim .sp-expect__step { padding-left: 6px; } html.sp-anim .sp-expect__step .sp-expect__n { display: inline-block; opacity: 0; transform: scale(.6) rotate(-8deg); transition: opacity .6s var(--kw-ease), transform .6s cubic-bezier(.2,1.4,.4,1); transition-delay: calc(.25s + var(--spa-i, 0) * 110ms); } html.sp-anim .spa-in .sp-expect__step .sp-expect__n { opacity: 1; transform: scale(1) rotate(0); } /* pricing: rows cascade up, divider underline draws, price stamps */ html.sp-anim .sp-pricing__row { position: relative; } html.sp-anim .sp-pricing__row::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--kw-bone); transform: scaleX(0); transform-origin: left center; transition: transform 1s var(--kw-ease); transition-delay: calc(.25s + var(--spa-i, 0) * 80ms); } html.sp-anim .spa-in .sp-pricing__row::after { transform: scaleX(1); } html.sp-anim .sp-pricing__row-r { opacity: 0; transform: scale(.9); transition: opacity .55s var(--kw-ease), transform .55s cubic-bezier(.2,1.3,.4,1); transition-delay: calc(.4s + var(--spa-i, 0) * 80ms); } html.sp-anim .spa-in .sp-pricing__row-r { opacity: 1; transform: scale(1); } /* team & related: image unveils inside its frame */ html.sp-anim .sp-team__img img, html.sp-anim .sp-related__card .sp-related__num { transition: transform .8s var(--kw-ease); } html.sp-anim .sp-team__img { overflow: hidden; } html.sp-anim .spa-stagger .sp-team__img img { transform: scale(1.12); } html.sp-anim .spa-in .spa-stagger .sp-team__img img, html.sp-anim .spa-stagger.spa-in .sp-team__img img { transform: scale(1); } /* voice: seal breathes forever; quote block handled by sp.js fades */ html.sp-anim .sp-voice__seal { animation: spaSeal 6s ease-in-out infinite alternate; } @keyframes spaSeal { from { transform: rotate(-3deg) scale(1); } to { transform: rotate(3deg) scale(1.06); } } /* -------------------------------------------------------------------- 3. HOVER MICRO-INTERACTIONS (always on; no JS needed) -------------------------------------------------------------------- */ .sp-treats__item { transition: transform var(--kw-dur) var(--kw-ease), background var(--kw-dur) var(--kw-ease); } .sp-treats__item:hover { transform: translateY(-4px); } .sp-treats__item:hover .sp-treats__num { color: var(--kw-blue); } .sp-pricing__row { transition: padding-left var(--kw-dur) var(--kw-ease); } .sp-pricing__row:hover { padding-left: 10px; } .sp-pricing__row:hover .sp-pricing__row-r { color: var(--kw-blue); } .sp-team__card .sp-team__img img { transition: transform .6s var(--kw-ease), filter .6s var(--kw-ease); } .sp-team__card:hover .sp-team__img img { transform: scale(1.05); } .sp-related__card { transition: transform var(--kw-dur) var(--kw-ease), box-shadow var(--kw-dur) var(--kw-ease); } .sp-related__card:hover { transform: translateY(-5px); } .sp-related__card:hover .sp-related__num { transform: rotate(-6deg) scale(1.12); } .sp-related__card .sp-related__cta svg { transition: transform var(--kw-dur) var(--kw-ease); } .sp-related__card:hover .sp-related__cta svg { transform: translate(3px, -3px); } .btn svg { transition: transform var(--kw-dur) var(--kw-ease); } .btn:hover svg { transform: translate(3px, -3px); } /* -------------------------------------------------------------------- 4. AMBIENT DECOR (injected by sp-anim.js, themed per service) -------------------------------------------------------------------- */ .spa-decor { position: absolute; z-index: 1; pointer-events: none; user-select: none; } .spa-decor--hero { right: 4%; top: 14%; width: min(46vw, 560px); opacity: .36; } .spa-decor--expect { right: 2%; bottom: 4%; width: min(30vw, 360px); opacity: .22; } .sp-hero { isolation: isolate; } .spa-decor svg { display: block; width: 100%; height: auto; overflow: visible; } /* decor sits above the bg image but below the hero content */ .sp-hero__inner { position: relative; z-index: 2; } /* — acupuncture: meridian constellation — */ .spa-decor [data-spa-draw] { stroke-dasharray: 600; stroke-dashoffset: 600; animation: spaDraw 3.2s var(--kw-ease) 1.2s forwards; } @keyframes spaDraw { to { stroke-dashoffset: 0; } } .spa-decor [data-spa-point] { transform-box: fill-box; transform-origin: center; animation: spaPoint 5.2s ease-in-out infinite; animation-delay: calc(var(--spa-i, 0) * .65s); } @keyframes spaPoint { 0%, 100% { opacity: .35; transform: scale(1); } 50% { opacity: 1; transform: scale(1.7); } } .spa-decor [data-spa-ring] { transform-box: fill-box; transform-origin: center; animation: spaSpin 60s linear infinite; } @keyframes spaSpin { to { transform: rotate(360deg); } } /* — rmt: pressure ripples — */ .spa-decor [data-spa-ripple] { transform-box: fill-box; transform-origin: center; animation: spaRipple 7s cubic-bezier(.2,.6,.4,1) infinite; animation-delay: calc(var(--spa-i, 0) * 2.3s); } @keyframes spaRipple { 0% { opacity: 0; transform: scale(.35); } 25% { opacity: .65; } 100% { opacity: 0; transform: scale(1.5); } } /* — pilates: breath + balance — */ .spa-decor [data-spa-breathe] { transform-box: fill-box; transform-origin: center; animation: spaBreathe 7.5s ease-in-out infinite alternate; } @keyframes spaBreathe { from { transform: scale(1); opacity: .5; } to { transform: scale(1.14); opacity: .9; } } .spa-decor [data-spa-tilt] { transform-box: fill-box; transform-origin: center; animation: spaTilt 9s ease-in-out infinite alternate; } @keyframes spaTilt { from { transform: rotate(-3.5deg); } to { transform: rotate(3.5deg); } } /* — kinesiology: kinetic arc + springing dots — */ .spa-decor [data-spa-bounce] { transform-box: fill-box; transform-origin: center; animation: spaBounce 2.6s cubic-bezier(.35,0,.25,1) infinite alternate; animation-delay: calc(var(--spa-i, 0) * .45s); } @keyframes spaBounce { from { transform: translateY(0); } to { transform: translateY(-46px); } } /* — herbal: rising steam — */ .spa-decor [data-spa-steam] { transform-box: fill-box; transform-origin: center; animation: spaSteam 9s ease-in-out infinite; animation-delay: calc(var(--spa-i, 0) * 2.1s); } @keyframes spaSteam { 0% { opacity: 0; transform: translateY(34px) scale(.85); } 30% { opacity: .6; } 100% { opacity: 0; transform: translateY(-72px) scale(1.25); } } @media (max-width: 860px) { .spa-decor--hero { right: -10%; top: 8%; width: 70vw; opacity: .3; } .spa-decor--expect { display: none; } } /* -------------------------------------------------------------------- 5. REDUCED MOTION — everything becomes a calm opacity fade. (transform/clip/filter neutralized; NO layout properties here.) -------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.sp-anim .sp-hero__bg img, html.sp-anim .sp-hero__num, html.sp-anim .sp-hero__scrollcue-line::after, html.sp-anim .sp-voice__seal, .spa-decor [data-spa-draw], .spa-decor [data-spa-point], .spa-decor [data-spa-ring], .spa-decor [data-spa-ripple], .spa-decor [data-spa-breathe], .spa-decor [data-spa-tilt], .spa-decor [data-spa-bounce], .spa-decor [data-spa-steam] { animation: none !important; } .spa-decor { display: none; } html.sp-anim .sp-crumb, html.sp-anim .sp-hero__eyebrow, html.sp-anim .sp-hero__tagline, html.sp-anim .sp-hero__rail, html.sp-anim .sp-hero__cta > *, html.sp-anim .sp-hero__title .spa-ch, html.sp-anim .sp-hero__hangul, html.sp-anim .sp-hero__scrollcue { animation: spaRmFade .8s ease both !important; } html.sp-anim main .reveal .eyebrow, html.sp-anim main .reveal .sp-section__title, html.sp-anim main .reveal .sp-approach__title, html.sp-anim main .reveal .sp-related__title, html.sp-anim main .reveal .sp-booking__h, html.sp-anim main .reveal .sp-essence__lede, html.sp-anim main .reveal .sp-section__intro, html.sp-anim main .reveal .sp-booking__sub, html.sp-anim .spa-stagger, html.sp-anim .sp-treats__num, html.sp-anim .sp-pricing__row-r, html.sp-anim .sp-expect__step .sp-expect__n { transform: none !important; clip-path: none !important; filter: none !important; transition: opacity .7s ease !important; transition-delay: 0s !important; } html.sp-anim .sp-treats__item::after, html.sp-anim .sp-pricing__row::after { transform: scaleX(1) !important; transition: none !important; } html.sp-anim .sp-expect__list::before { transform: scaleY(1) !important; transition: none !important; opacity: .4; } html.sp-anim .spa-stagger .sp-team__img img { transform: none !important; } } @keyframes spaRmFade { from { opacity: 0; } to { opacity: 1; } }