/* ==================================================================== K-Well — homepage animation layer (home-anim) Loaded by index.html + ko/index.html only. Same safety model as sp-anim: every hidden pre-state is gated on `html.kw-anim` (set by an inline script); no JS → fully visible. Reduced motion → opacity-only fades, loops off. Deliberately CALMER than the service pages — this is the front door. ==================================================================== */ /* ------------------------- hero entrance ------------------------- */ html.kw-anim .hero__bg video { animation: kwaBgSettle 2.8s var(--kw-ease) both; } @keyframes kwaBgSettle { from { transform: scale(1.05); } to { transform: scale(1); } } /* title lines (wrapped in .kwa-line by home-anim.js) */ html.kw-anim .hero__title .kwa-line { display: inline-block; animation: kwaLine 1s cubic-bezier(.16,.84,.26,1) both; animation-delay: calc(.25s + var(--kwa-i, 0) * 160ms); } @keyframes kwaLine { from { opacity: 0; transform: translateY(.45em); filter: blur(8px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } } html.kw-anim .hero__hangul { animation: kwaFadeUp .8s var(--kw-ease) .75s both; } html.kw-anim .hero__sub { animation: kwaFadeUp .9s var(--kw-ease) .9s both; } html.kw-anim .hero__cta > :nth-child(1) { animation: kwaFadeUp .8s var(--kw-ease) 1.05s both; } html.kw-anim .hero__cta > :nth-child(2) { animation: kwaFadeUp .8s var(--kw-ease) 1.17s both; } html.kw-anim .hero__meta { animation: kwaFade 1.2s ease 1.5s both; } /* vertical rail: lines grow, text fades in */ html.kw-anim .hero__rail-line { transform-origin: top center; animation: kwaRailLine 1.1s var(--kw-ease) 1.2s both; } html.kw-anim .hero__rail-text, html.kw-anim .hero__rail > div:last-child { animation: kwaFade 1s ease 1.55s both; } @keyframes kwaRailLine { from { transform: scaleY(0); } to { transform: scaleY(1); } } /* scroll cue arrow — gentle endless bob */ html.kw-anim .hero__meta-scroll svg { animation: kwaBob 2.4s ease-in-out 2.4s infinite; } @keyframes kwaBob { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(5px); opacity: .55; } } @keyframes kwaFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } @keyframes kwaFade { from { opacity: 0; } to { opacity: 1; } } /* ---------------- scroll-linked accents (ride the existing kw-rev reveal system — no new observers needed) ---------------- */ /* brush numerals in "Five ways" settle like ink as their row reveals */ html.kw-anim .kw-rev-armed.kw-rev-stagger .way__num { opacity: 0; transform: scale(.82); filter: blur(5px); transition: opacity .9s var(--kw-ease) .25s, transform .9s var(--kw-ease) .25s, filter .9s var(--kw-ease) .25s; } html.kw-anim .kw-rev-armed.kw-rev-stagger.is-in .way__num { opacity: 1; transform: scale(1); filter: blur(0); } /* philosophy + footer K watermarks drift, slow as breathing */ html.kw-anim .philosophy__k { animation: kwaDrift 14s ease-in-out infinite alternate; } @keyframes kwaDrift { from { transform: translateY(-50%) rotate(0deg); } to { transform: translateY(-54%) rotate(1.2deg); } } /* ------------------------- micro-interactions ------------------------- */ .way { transition: background var(--kw-dur) var(--kw-ease); } .way:hover .way__num { color: var(--kw-blue); } .way__cta svg { transition: transform var(--kw-dur) var(--kw-ease); } .way:hover .way__cta svg { transform: translate(3px, -3px); } .member__img { transition: transform .6s var(--kw-ease); } .member:hover .member__img { transform: scale(1.04); } .member__img-wrap { overflow: hidden; } .loc-card { transition: transform var(--kw-dur) var(--kw-ease), box-shadow var(--kw-dur) var(--kw-ease); } .loc-card:hover { transform: translateY(-4px); } .btn svg { transition: transform var(--kw-dur) var(--kw-ease); } .btn:hover svg { transform: translate(3px, -3px); } /* ------------------------- reduced motion ------------------------- */ @media (prefers-reduced-motion: reduce) { html.kw-anim .hero__bg video, html.kw-anim .hero__meta-scroll svg, html.kw-anim .philosophy__k { animation: none !important; } html.kw-anim .hero__title .kwa-line, html.kw-anim .hero__hangul, html.kw-anim .hero__sub, html.kw-anim .hero__cta > *, html.kw-anim .hero__meta, html.kw-anim .hero__rail-line, html.kw-anim .hero__rail-text, html.kw-anim .hero__rail > div:last-child { animation: kwaFade .8s ease both !important; } html.kw-anim .kw-rev-armed.kw-rev-stagger .way__num { transform: none !important; filter: none !important; transition: opacity .7s ease !important; } }