/* Kangjei Tiger Co. — motion. Gated on html.motion (reduced motion off). */

/* ---------- Page transitions: crossfade; the polo photo glides between pages ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: kt-header; }
.vt-polo { view-transition-name: kt-polo; }
::view-transition-old(root) { animation: kt-fade-out .18s ease both; }
::view-transition-new(root) { animation: kt-fade-in .36s var(--ease-out-expo) both; }
::view-transition-group(kt-polo) { animation-duration: .6s; animation-timing-function: var(--ease-in-out-strong); }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}
@keyframes kt-fade-out { to { opacity: 0; } }
@keyframes kt-fade-in { from { opacity: 0; } }
@keyframes kt-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes kt-word { from { transform: translateY(105%); } to { transform: none; } }

/* ---------- Loader (home open + reloads): tiger leaps, wordmark inks, curtain lifts ---------- */
.kt-loader { display: none; }
.kt-intro { overflow: hidden; }
.kt-intro .kt-loader { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: var(--navy); color: var(--on-navy); cursor: pointer; }
.kt-loader__inner { display: flex; flex-direction: column; align-items: center; padding: 0 1rem; text-align: center; }
.kt-loader__mark { width: clamp(140px, 18vw, 210px); height: calc(clamp(140px, 18vw, 210px) * .4); object-fit: cover; object-position: center 47%; }
.kt-loader__word { margin-top: .25rem; padding: .1em .35em .2em; font-family: var(--script); font-size: clamp(2.4rem, 5.5vw, 3.75rem); line-height: 1.2; }
.kt-loader__line { margin-top: .4rem; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-soft); }
.kt-loader__bar { position: relative; display: block; width: min(180px, 46vw); height: 1px; margin-top: 1.75rem; overflow: hidden; background: var(--line-on-navy); }
.kt-loader__bar > span { position: absolute; inset: 0; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out-expo); }
.kt-intro:not(.kt-intro-go) .kt-loader__inner > * { opacity: 0; }
.kt-intro-go .kt-loader__mark { animation: kt-leap .95s var(--ease-out-expo) both; }
.kt-intro-go .kt-loader__word { animation: kt-ink .95s var(--ease-in-out-strong) both .2s; }
.kt-intro-go .kt-loader__line { animation: kt-rise .7s var(--ease-out-expo) both .6s; }
.kt-intro-go .kt-loader__bar { animation: kt-fade-in .4s ease both .3s; }
.kt-intro-out .kt-loader { transform: translateY(-100%); transition: transform .85s var(--ease-in-out-strong) .15s; pointer-events: none; }
.kt-intro-out .kt-loader__inner { opacity: 0; transform: translateY(-16px); transition: opacity .3s ease, transform .45s var(--ease-out-expo); }
@keyframes kt-leap { 0% { opacity: 0; transform: translate(-56px, 12px) rotate(-6deg); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
@keyframes kt-ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- Page intro ---------- */
.motion:not(.is-loaded) [data-hero] > *,
.motion:not(.is-loaded) [data-hero-media] { opacity: 0; }
.motion.is-loaded [data-hero] > * { animation: kt-rise .95s var(--ease-out-expo) both; animation-delay: var(--d, 0ms); }
.motion.is-loaded [data-hero] > [data-split] { animation: none; }
.motion [data-split] .kt-w { display: inline-block; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; overflow: hidden; }
.motion [data-split] .kt-w > span { display: inline-block; }
.motion.is-loaded [data-split] .kt-w > span { animation: kt-word 1.05s var(--ease-out-expo) both; animation-delay: var(--d, 0ms); }
/* hero photo rises like a curtain, the seal settles on it */
.motion.is-loaded [data-hero-media] { animation: kt-curtain 1.4s var(--ease-in-out-strong) both; animation-delay: var(--d, 200ms); }
.motion.is-loaded [data-hero-media] > img:not(.vt-polo) { animation: kt-settle 2s var(--ease-out-expo) both; animation-delay: var(--d, 200ms); }
.motion.is-loaded .kt-seal { animation: kt-seal-in 1.3s var(--ease-out-expo) both 1.2s; }
@keyframes kt-curtain { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0); } }
@keyframes kt-settle { from { transform: scale(1.12); } to { transform: none; } }
@keyframes kt-seal-in { from { opacity: 0; transform: scale(.9) rotate(-25deg); } }
@supports (animation-timeline: scroll()) {
  .motion .kt-seal svg { animation: kt-turn linear both; animation-timeline: scroll(root); animation-range: 0 120vh; }
}
@keyframes kt-turn { to { transform: rotate(160deg); } }

/* ---------- Scroll reveal: children rise in sequence ---------- */
.motion [data-reveal]:not(.is-revealed) > * { opacity: 0; }
.motion [data-reveal].is-revealed > * { animation: kt-rise 1.1s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 110ms); }

/* ribbon: club stripes draw across */
.motion .ribbon[data-reveal] { transform: scaleX(0); transform-origin: left; }
.motion .ribbon[data-reveal].is-revealed { transform: none; transition: transform 1.4s var(--ease-in-out-strong); }

/* chukkas: the one in play is lit, the others rest */
@media (min-width: 960px) {
  .motion .chukka { opacity: .32; transition: opacity .7s var(--ease-out); }
  .motion .chukka.is-active { opacity: 1; }
}
.motion .clock__n.is-changing { animation: kt-tick .5s var(--ease-out-expo); }
@keyframes kt-tick { from { opacity: 0; transform: translateY(14px); } }

/* polo field draws itself */
.motion .field [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .field .dash { opacity: 0; transition: opacity 1.2s ease 1.6s; }
.motion .is-revealed .field [pathLength] { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s var(--ease-in-out-strong) .3s; }
.motion .is-revealed .field .dash { opacity: .7; }

/* archive photo develops */
.motion .stamp img { transition: filter 2.6s ease-out .3s; }
.motion [data-reveal]:not(.is-revealed) .stamp img { filter: grayscale(1) brightness(1.8) contrast(.6) blur(4px); }

/* anatomy callouts: the gold rule draws before the words */
.motion .anatomy [data-reveal]:not(.is-revealed) .callout::before { transform: scaleX(0); }
.motion .anatomy [data-reveal].is-revealed .callout::before { transition: transform .9s var(--ease-in-out-strong); transition-delay: calc(var(--i, 0) * 110ms); }

/* footer wordmark inks in */
.motion .site-footer .wordmark--lg { padding-right: .3em; }
.motion .site-footer .wordmark--lg:not(.is-inked) { clip-path: inset(0 100% 0 0); }
.motion .site-footer .wordmark--lg.is-inked { animation: kt-ink 1.5s var(--ease-in-out-strong) backwards .15s; }

/* ---------- Product magnifier ---------- */
.kt-lens { position: absolute; z-index: 2; width: 11rem; height: 11rem; border-radius: 50%; pointer-events: none; background-repeat: no-repeat; background-color: #fff; box-shadow: 0 0 0 1px color-mix(in oklab, var(--gold) 70%, transparent), 0 0 0 5px color-mix(in oklab, var(--ivory) 85%, transparent), 0 18px 40px -18px rgba(15, 26, 46, .55); opacity: 0; transform: scale(.85); transition: opacity .2s ease, transform .25s var(--ease-out); }
.kt-lens.is-on { opacity: 1; transform: scale(1); }
.pdp-media.has-lens { cursor: zoom-in; }

/* ---------- Feedback ---------- */
[data-count] { font-variant-numeric: lining-nums; }
[data-bag-count].is-bumping { display: inline-block; animation: kt-bump .45s var(--ease-out-expo); }
@keyframes kt-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); color: var(--gold); } 100% { transform: scale(1); } }
.motion .kt-preorder__dot { animation: kt-pulse 2.4s var(--ease-out-expo) infinite; }
@keyframes kt-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--gold) 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 .5rem transparent; } }
.motion .kt-mobile-menu:not([hidden]) { animation: kt-menu-in .3s var(--ease-out-expo); }
.motion .kt-mobile-menu:not([hidden]) a { animation: kt-slide-in .4s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
@keyframes kt-menu-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes kt-slide-in { from { opacity: 0; transform: translateX(-10px); } }
.motion .kt-drawer.is-entering .kt-line,
.motion .kt-drawer.is-entering .kt-empty { animation: kt-line-in .5s var(--ease-out-expo) backwards; animation-delay: calc(var(--i, 0) * 60ms + 180ms); }
@keyframes kt-line-in { from { opacity: 0; transform: translateX(20px); } }

/* impact: the bars grow from the floor; 1,411 barely shows, which is the point */
.motion .bars:not(.is-revealed) .bars__bar::after { transform: scaleY(0); }
.motion .bars.is-revealed .bars__bar::after { transition: transform 1.6s var(--ease-in-out-strong); transition-delay: calc(var(--i, 0) * 220ms + 200ms); }

/* home hero background: fades and settles on load, then drifts slower than the page */
.motion:not(.is-loaded) .hero__bg { opacity: 0; }
.motion.is-loaded .hero__bg { animation: kt-hero-bg 2.2s var(--ease-out-expo) both .1s; }
@keyframes kt-hero-bg { from { opacity: 0; transform: scale(1.1); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  .motion.is-loaded .hero__bg {
    animation: kt-hero-bg 2.2s var(--ease-out-expo) both .1s, kt-drift linear both;
    animation-timeline: auto, view();
    animation-range: normal, exit 0% exit 100%;
  }
}
@keyframes kt-drift { to { translate: 0 14%; } }

/* chukka II: the route draws while the ball is carried along it (same curve, same timing) */
.motion .route__line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion .chukka.is-revealed .route__line { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease-in-out-strong) .3s; }

/* chukka III: the old name is struck through, the new one is written in */
.motion .chukka:not(.is-revealed) .rebrand__old { color: var(--ink); }
.motion .chukka:not(.is-revealed) .rebrand__old::after { transform: scaleX(0); }
.motion .chukka:not(.is-revealed) .rebrand__then,
.motion .chukka:not(.is-revealed) .rebrand__new { opacity: 0; transform: translateY(10px); }
.motion .chukka.is-revealed .rebrand__old::after { transition: transform .8s var(--ease-in-out-strong) .9s; }
.motion .chukka.is-revealed .rebrand__old { transition: color .6s ease 1.5s; }
.motion .chukka.is-revealed .rebrand__then { transition: opacity .7s ease 1.7s, transform .9s var(--ease-out-expo) 1.7s; }
.motion .chukka.is-revealed .rebrand__new { transition: opacity .8s ease 1.95s, transform 1s var(--ease-out-expo) 1.95s; }

/* chukka IV: a slow push in on the embroidery */

/* impact tiger: rises out of the dark on load, drifts slower than the page as you scroll */
.motion.is-loaded .ih__tiger[data-hero-media] { animation: kt-emerge 2.2s var(--ease-out-expo) both .25s; }
.motion.is-loaded .ih__tiger > img:not(.vt-polo) { animation: none; }
@keyframes kt-emerge { from { opacity: 0; transform: translateY(40px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
.motion.is-loaded .ih__glow { animation: kt-fade-in 2.6s ease both .5s; }
@supports (animation-timeline: view()) {
  .motion .ih__tiger img { animation: kt-drift linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
}

/* Chapter IV: the campaign photo settles into place as it is revealed */
.motion .chukka:not(.is-revealed) .chukka__img--brand img { transform: scale(1.08); }
.motion .chukka.is-revealed .chukka__img--brand img { transition: transform 2s var(--ease-out-expo) .15s; }
.motion .pdp-low::before { animation: kt-pulse 2.4s var(--ease-out-expo) infinite; }