/* ========================================================================
   CAT COMPANION — bottom-right, bounce on click, supportive bubble
   ======================================================================== */
.cat-companion {
  --cat-tilt: 0deg;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--z-cat);
  width: 120px;
  height: 120px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 8px 16px rgba(26, 26, 26, 0.18));
  transition: transform var(--d-base) var(--ease-spring),
              filter var(--d-base) var(--ease-out);
}
.cat-companion:hover {
  transform: translateY(-4px) rotate(var(--cat-tilt));
  filter: drop-shadow(0 12px 22px rgba(26, 26, 26, 0.24));
}
.cat-companion.is-bouncing { animation: cat-bounce 720ms var(--ease-spring); }
.cat-companion svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@keyframes cat-bounce {
  0%   { transform: translateY(0)    scale(1, 1); }
  20%  { transform: translateY(0)    scale(1.08, 0.92); }
  45%  { transform: translateY(-32px) scale(0.94, 1.06); }
  70%  { transform: translateY(0)    scale(1.05, 0.95); }
  85%  { transform: translateY(-8px)  scale(0.98, 1.02); }
  100% { transform: translateY(0)    scale(1, 1); }
}

/* Idle gentle sway — picks up scroll tilt via CSS var */
.cat-companion.is-idle { animation: cat-sway 5s ease-in-out infinite; }
@keyframes cat-sway {
  0%, 100% { transform: rotate(var(--cat-tilt, 0deg)) translateY(0); }
  50%      { transform: rotate(calc(2deg + var(--cat-tilt, 0deg))) translateY(-6px); }
}

/* Speech bubble */
.cat-bubble {
  position: fixed;
  right: 156px;
  bottom: 96px;
  z-index: var(--z-cat);
  background: var(--kinari);
  border: 1.5px solid var(--sumi);
  border-radius: 20px;
  padding: 14px 20px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--sumi);
  max-width: 260px;
  box-shadow: 4px 4px 0 var(--sumi);
  opacity: 0;
  transform: translateX(20px) scale(0.85);
  transform-origin: bottom right;
  pointer-events: none;
  transition:
    opacity var(--d-base) var(--ease-out),
    transform var(--d-base) var(--ease-spring);
}
.cat-bubble.is-shown {
  opacity: 1;
  transform: translateX(0) scale(1);
}
.cat-bubble::before {
  content: "";
  position: absolute;
  right: -10px;
  bottom: 24px;
  width: 16px;
  height: 16px;
  background: var(--kinari);
  border-right: 1.5px solid var(--sumi);
  border-bottom: 1.5px solid var(--sumi);
  transform: rotate(-45deg);
  border-radius: 0 0 4px 0;
}

/* Hint button on cat (small "?" badge) */
.cat-hint-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 28px;
  height: 28px;
  background: var(--beni);
  color: var(--kinari);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  border: 2px solid var(--kinari);
  animation: cat-pulse 2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cat-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* Cat companion — mobile layout
   Bubble appears ABOVE the cat with a downward pointer.
   This avoids the side-pointer offset issue when cat shrinks.
*/
@media (max-width: 720px) {
  .cat-companion { width: 72px; height: 72px; right: 14px; bottom: 14px; }
  .cat-bubble {
    right: 14px;
    left: auto;
    bottom: 92px;
    max-width: calc(100vw - 28px);
    font-size: var(--fs-xs);
    padding: 10px 14px;
    transform-origin: bottom right;
  }
  /* Reposition pointer to point DOWN at the cat (instead of right) */
  .cat-bubble::before {
    right: 24px;
    bottom: -10px;
    width: 16px;
    height: 16px;
    background: var(--kinari);
    border-top: 0;
    border-left: 0;
    border-right: 1.5px solid var(--sumi);
    border-bottom: 1.5px solid var(--sumi);
    transform: rotate(45deg);
    border-radius: 0 0 4px 0;
  }
}

/* ========================================================================
   SAKURA CONFETTI
   ======================================================================== */
.sakura-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}

/* ========================================================================
   PAGE TRANSITIONS — scroll-triggered reveals
   Activated by JS via IntersectionObserver: when an element enters the
   viewport, it gets `.is-shown` class.
   ======================================================================== */

/* Single-element fade (page hero, etc) */
.page-fade {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}
.page-fade.is-shown {
  opacity: 1;
  transform: translateY(0);
}

/* Container with staggered children */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
  will-change: opacity, transform;
}
.stagger.is-shown > * { opacity: 1; transform: translateY(0); }

.stagger.is-shown > *:nth-child(1)  { transition-delay:  40ms; }
.stagger.is-shown > *:nth-child(2)  { transition-delay: 110ms; }
.stagger.is-shown > *:nth-child(3)  { transition-delay: 180ms; }
.stagger.is-shown > *:nth-child(4)  { transition-delay: 250ms; }
.stagger.is-shown > *:nth-child(5)  { transition-delay: 320ms; }
.stagger.is-shown > *:nth-child(6)  { transition-delay: 390ms; }
.stagger.is-shown > *:nth-child(7)  { transition-delay: 460ms; }
.stagger.is-shown > *:nth-child(8)  { transition-delay: 530ms; }
.stagger.is-shown > *:nth-child(9)  { transition-delay: 600ms; }
.stagger.is-shown > *:nth-child(10) { transition-delay: 670ms; }

/* Standalone reveal (apply to any block) */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
}
.reveal.is-shown { opacity: 1; transform: translateY(0); }

/* Reveal variants */
.reveal-left  { transform: translateX(-32px); }
.reveal-right { transform: translateX(32px); }
.reveal-left.is-shown,
.reveal-right.is-shown { transform: translateX(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .page-fade, .stagger > *, .reveal, .reveal-left, .reveal-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}