/* Klovae Studio — enhancement styles */
.kc-drift { translate: 0 var(--kc-sy, 0); will-change: transform; }

/* page intro curtain */
.kc-intro {
  position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center;
  background: #fff; animation: kc-lift .8s cubic-bezier(.19,1,.22,1) .9s forwards; will-change: transform;
}
.kc-intro__in { display: grid; justify-items: center; gap: 1.1rem; }
.kc-intro__logo {
  font-family: var(--font-display, "Assistant", system-ui, sans-serif); font-weight: 700; letter-spacing: -0.02em;
  font-size: clamp(2rem, 6vw, 3.4rem); color: #0b0b0c;
  opacity: 0; transform: translateY(.5em); animation: kc-word .6s cubic-bezier(.19,1,.22,1) .1s forwards;
}
.kc-intro__logo b { color: #ff1493; font-weight: 700; }
.kc-intro__bar { display: block; width: 120px; height: 2px; background: #e6e6e6; overflow: hidden; border-radius: 2px; }
.kc-intro__bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#ff1493,#ff5eb4); transform: scaleX(0); transform-origin: 0 50%; animation: kc-fill .7s cubic-bezier(.19,1,.22,1) .25s forwards; }
@keyframes kc-word { to { opacity: 1; transform: none; } }
@keyframes kc-fill { to { transform: scaleX(1); } }
@keyframes kc-lift { to { transform: translateY(-101%); visibility: hidden; } }
.intro-seen .kc-intro { display: none; }
@media (prefers-reduced-motion: reduce) { .kc-intro { display: none; } }

/* scroll progress bar */
.kc-progress {
  position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 1000;
  background: linear-gradient(90deg, #ff1493, #ff5eb4);
  transform: scaleX(0); transform-origin: 0 50%;
}
/* scroll-spy active nav link */
.nav__links a.kc-active { color: var(--magenta-deep, #d1006f); }
.nav__links a.kc-active::after { transform: scaleX(1) !important; }

@media (hover: hover) and (pointer: fine) {
  .kc-ring {
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    width: 34px; height: 34px; border-radius: 50%;
    border: 1.5px solid rgba(255, 20, 147, .5); will-change: transform;
    transition: width .3s cubic-bezier(.19,1,.22,1), height .3s cubic-bezier(.19,1,.22,1),
      background .3s ease, border-color .3s ease, opacity .3s ease;
  }
  .kc-ring.is-grow { width: 60px; height: 60px; background: rgba(255, 20, 147, .06); border-color: rgba(255, 20, 147, .85); }
  .kc-ring.is-down { width: 26px; height: 26px; }
}
@media (prefers-reduced-motion: reduce) { .kc-drift { translate: 0 !important; } }