/* ============================================================
   ANIMATIONS — Kuroko Beauty
   軽量・上質なアニメーション定義
   ============================================================ */

/* ----------------------------------------------------------------
   Scroll reveal (GSAPで制御、CSS定義のみ)
   ---------------------------------------------------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.0,0.0,0.2,1),
              transform 0.6s cubic-bezier(0.0,0.0,0.2,1);
}
[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] {
  transform: none;
}
[data-reveal="left"] {
  transform: translateX(-16px);
}
[data-reveal="right"] {
  transform: translateX(16px);
}
[data-reveal].is-revealed {
  transform: none;
  opacity: 1;
}

/* Stagger delay via CSS custom prop */
[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }

/* ----------------------------------------------------------------
   Page load — fade in body
   ---------------------------------------------------------------- */
body {
  animation: kbPageEnter 0.4s cubic-bezier(0.0,0.0,0.2,1) both;
}
@keyframes kbPageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ----------------------------------------------------------------
   Search overlay
   ---------------------------------------------------------------- */
.kb-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(250,249,247,.98);
  backdrop-filter: blur(20px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.0,0.0,0.2,1);
}
.kb-search-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}
.kb-search-overlay__inner {
  width: 100%;
  max-width: 600px;
  padding: var(--kb-sp-5);
  position: relative;
}
.kb-search-overlay__input {
  width: 100%;
  font-family: var(--kb-serif);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 300;
  color: var(--kb-charcoal);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--kb-sand);
  padding: var(--kb-sp-4) 0;
  outline: none;
  transition: border-color 0.3s;
}
.kb-search-overlay__input::placeholder { color: var(--kb-sand); }
.kb-search-overlay__input:focus { border-color: var(--kb-gold); }
.kb-search-overlay__close {
  position: absolute;
  top: var(--kb-sp-4);
  right: var(--kb-sp-4);
  background: none;
  border: none;
  font-size: var(--kb-fs-lg);
  color: var(--kb-brown);
  cursor: pointer;
  transition: color 0.2s;
}
.kb-search-overlay__close:hover { color: var(--kb-charcoal); }

/* ----------------------------------------------------------------
   Link underline wipe
   ---------------------------------------------------------------- */
.kb-link-wipe {
  position: relative;
  display: inline;
}
.kb-link-wipe::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--kb-gold);
  transition: width 0.3s cubic-bezier(0.0,0.0,0.2,1);
}
.kb-link-wipe:hover::after { width: 100%; }

/* ----------------------------------------------------------------
   Breadcrumb
   ---------------------------------------------------------------- */
.kb-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--kb-sp-1);
  color: var(--kb-brown);
}
.kb-breadcrumb a { transition: color 0.2s; }
.kb-breadcrumb a:hover { color: var(--kb-gold); }
.kb-breadcrumb__sep { color: var(--kb-sand); }

/* ----------------------------------------------------------------
   Pagination styling
   ---------------------------------------------------------------- */
.page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--kb-radius-sm);
  font-size: var(--kb-fs-sm);
  color: var(--kb-charcoal);
  border: var(--kb-border);
  transition: all 0.2s;
}
.page-numbers.current,
.page-numbers:hover {
  background: var(--kb-gold);
  border-color: var(--kb-gold);
  color: var(--kb-white);
}
.page-numbers.dots { border: none; background: none; }

/* ----------------------------------------------------------------
   Hover lift (汎用)
   ---------------------------------------------------------------- */
.kb-lift {
  transition: transform 0.3s cubic-bezier(0.0,0.0,0.2,1),
              box-shadow 0.3s cubic-bezier(0.0,0.0,0.2,1);
}
.kb-lift:hover {
  transform: translateY(-3px);
  box-shadow: var(--kb-shadow);
}

/* ----------------------------------------------------------------
   Skeleton loading
   ---------------------------------------------------------------- */
.kb-skeleton {
  background: linear-gradient(90deg,
    var(--kb-greige) 0%,
    var(--kb-sand)   50%,
    var(--kb-greige) 100%);
  background-size: 200%;
  animation: kbSkeleton 1.5s ease-in-out infinite;
  border-radius: var(--kb-radius);
}
@keyframes kbSkeleton {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ----------------------------------------------------------------
   Print
   ---------------------------------------------------------------- */
@media print {
  .kb-header,
  .kb-footer,
  .kb-sticky-cta,
  .kb-mobile-menu,
  .kb-carousel__controls { display: none !important; }
  body { background: white; color: black; }
  .kb-entry { max-width: 100%; }
}

/* ----------------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}