/* ChikApart V6 living logo (vector): chikapart-logo.js draws the inline SVG into .ck-logo; the motion lives here.
   Same variables as the V5 kit: --ck-ink (letters), --ck-gold, --ck-gold-hi (the light), --ck-h (height).
   data-motion: glance (default) | build | shimmer | rebuild | still. The jumper never moves: only light does. */
.ck-logo {
  --ck-ink: #F4EFE4; --ck-gold: #C6A063; --ck-gold-hi: #F5E3B3; --ck-h: 46px;
  --ck-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ck-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  position: relative; display: inline-block; height: var(--ck-h); aspect-ratio: var(--ck-ratio, 3.3); max-width: 100%; line-height: 0;
  color: var(--ck-ink); text-decoration: none; -webkit-tap-highlight-color: transparent; vertical-align: middle;
  transition: transform 160ms var(--ck-ease-out);
}
.ck-logo > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck-logo:active { transform: scale(0.97); }
.ck-logo:focus-visible { outline: 2px solid var(--ck-gold-hi); outline-offset: 6px; border-radius: 4px; }
.ck-logo svg g, .ck-logo .ck-spk { transform-box: fill-box; transform-origin: 50% 50%; }

/* the light: a bright copy of the drawing, seen through a soft band that crosses it; star glints on the summits */
.ck-logo .ck-gl { --ck-ink: #fff; --ck-gold: var(--ck-gold-hi); --ck-bg: transparent; pointer-events: none; }
.ck-logo[data-motion="shimmer"] .ck-gl { --ck-ink: transparent; }          /* shimmer: only the gold catches the light */
.ck-logo .ck-spk { transform: scale(0); }
.ck-logo:is(.ck-out, .ck-pre:not(.ck-done)) .ck-gl { visibility: hidden; }    /* no light on parts that are not there yet */
.ck-logo:not(.ck-live) :is(.ck-band, .ck-spk) { animation-play-state: paused; }

.ck-logo:not([data-motion]) .ck-band, .ck-logo[data-motion="glance"] .ck-band { animation: ck-glance 8s var(--ck-ease-in-out) 1.2s infinite; }
.ck-logo:not([data-motion]) .ck-spk, .ck-logo[data-motion="glance"] .ck-spk { animation: ck-twinkle 8s ease-in-out infinite; animation-delay: calc(1.9s + var(--s) * 0.2s); }
.ck-done:is([data-motion="build"], [data-motion="rebuild"]) .ck-band { animation: ck-glance 8s var(--ck-ease-in-out) infinite; }
.ck-done:is([data-motion="build"], [data-motion="rebuild"]) .ck-spk { animation: ck-twinkle 8s ease-in-out infinite; animation-delay: calc(0.7s + var(--s) * 0.2s); }
.ck-logo[data-motion="shimmer"] .ck-band { animation: ck-glance 3.6s linear infinite; }
.ck-logo[data-motion="shimmer"] .ck-spk { animation: ck-twinkle 3.6s ease-in-out infinite; animation-delay: calc(0.6s + var(--s) * 1.1s); }
.ck-logo.ck-sweeping .ck-band { animation: ck-sweep 1.2s var(--ck-ease-in-out); }        /* hover: the light passes now */

/* build / rebuild: the logo builds itself in place (nothing travels): the ski is drawn, the letters appear one after the
   other, the snow cap settles on the A, the jumper and the place fade in */
.ck-pre:not(.ck-in) :is(.ck-l, .ck-s, .ck-n, .ck-p, .ck-j, .ck-ul, .ck-uk, .ck-ur) { opacity: 0; }
.ck-in:not(.ck-done) .ck-s  { animation: ck-draw 900ms var(--ck-ease-in-out) 100ms both; }
.ck-in:not(.ck-done) .ck-n  { animation: ck-fade 700ms ease-out 800ms both; }
.ck-in:not(.ck-done) .ck-l  { animation: ck-reveal 650ms var(--ck-ease-out) both; animation-delay: calc(200ms + var(--i) * 70ms); }
.ck-in:not(.ck-done) .ck-p  { animation: ck-cap 700ms var(--ck-ease-out) 850ms both; }
.ck-in:not(.ck-done) .ck-j  { animation: ck-fade 700ms ease-out 1100ms both; }
.ck-in:not(.ck-done) :is(.ck-ul, .ck-ur) { animation: ck-fade 700ms ease-out 1250ms both; }
.ck-in:not(.ck-done) .ck-uk { animation: ck-cap 700ms var(--ck-ease-out) 1350ms both; }
.ck-out :is(.ck-l, .ck-s, .ck-n, .ck-p, .ck-j, .ck-ul, .ck-uk, .ck-ur) { opacity: 0; transition: opacity 500ms ease-in; }

@keyframes ck-glance { 0% { transform: translateX(0); } 16%, 100% { transform: translateX(var(--ck-travel)); } }
@keyframes ck-sweep { from { transform: translateX(0); } to { transform: translateX(var(--ck-travel)); } }
@keyframes ck-twinkle { 0%, 100% { transform: scale(0) rotate(0deg); } 5% { transform: scale(1) rotate(45deg); } 11% { transform: scale(0) rotate(90deg); } }
@keyframes ck-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ck-draw { from { opacity: 1; clip-path: inset(-60% 100% -60% -3%); } to { opacity: 1; clip-path: inset(-60% -3% -60% -3%); } }
@keyframes ck-reveal { from { opacity: 0; clip-path: inset(-10% 100% -10% -10%); } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); } }
@keyframes ck-cap { from { opacity: 0; clip-path: inset(-10% -10% 100% -10%); } to { opacity: 1; clip-path: inset(-10% -10% -10% -10%); } }

@media (prefers-reduced-motion: reduce) {
  .ck-logo, .ck-logo * { animation: none !important; transition: none !important; }
}