/* moodArt curved-wipe transition — shared by React landing + static pages
   Usage: add data-wipe to any same-origin <a> to trigger the animation.
   Colors: pink panel, cream wordmark. Circle grows from click point → holds → shrinks on arrival. */

.moodart-wipe-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #e8739a;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%));
  -webkit-clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%));
  will-change: clip-path;
}

.moodart-wipe-overlay[data-state='growing'] {
  animation: moodart-wipe-grow 620ms cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
.moodart-wipe-overlay[data-state='covered'] {
  clip-path: circle(150% at 50% 50%);
  -webkit-clip-path: circle(150% at 50% 50%);
}
.moodart-wipe-overlay[data-state='shrinking'] {
  animation: moodart-wipe-shrink 680ms cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes moodart-wipe-grow {
  from { clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%)); -webkit-clip-path: circle(0% at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
  to   { clip-path: circle(150% at var(--wipe-x, 50%) var(--wipe-y, 50%)); -webkit-clip-path: circle(150% at var(--wipe-x, 50%) var(--wipe-y, 50%)); }
}
@keyframes moodart-wipe-shrink {
  from { clip-path: circle(150% at 50% 50%); -webkit-clip-path: circle(150% at 50% 50%); }
  to   { clip-path: circle(0% at 50% 50%); -webkit-clip-path: circle(0% at 50% 50%); }
}

.moodart-wipe-wordmark {
  text-align: center;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 280ms ease, transform 380ms ease;
  padding: 0 24px;
}
.moodart-wipe-overlay[data-state='growing'] .moodart-wipe-wordmark,
.moodart-wipe-overlay[data-state='covered'] .moodart-wipe-wordmark,
.moodart-wipe-overlay[data-state='shrinking'] .moodart-wipe-wordmark {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 220ms;
}
.moodart-wipe-wordmark .w1 {
  display: block;
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(56px, 13vw, 120px);
  color: #fdf6f9;
  letter-spacing: -0.03em;
  line-height: 1;
}
.moodart-wipe-wordmark .w2 {
  display: block;
  font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;
  font-size: clamp(10px, 1.4vw, 13px);
  text-transform: uppercase;
  letter-spacing: 0.55em;
  color: rgba(253, 246, 249, 0.78);
  margin-top: 20px;
  padding-left: 0.55em;
}
.moodart-wipe-wordmark .w-dot {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #fdf6f9;
  margin-left: 4px;
  vertical-align: 0.1em;
  transform: translateY(-4px);
}

/* Subtle paint-splash underdot accent */
.moodart-wipe-splash {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease 260ms;
}
.moodart-wipe-overlay[data-state='growing'] .moodart-wipe-splash,
.moodart-wipe-overlay[data-state='covered'] .moodart-wipe-splash,
.moodart-wipe-overlay[data-state='shrinking'] .moodart-wipe-splash {
  opacity: 0.25;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .moodart-wipe-overlay { display: none !important; }
}