/* ═══════════════════════════════════════════════════════
   ANIMATIONS — Olga Sova
   Изолированные визуальные эффекты:
     1. Custom cursor («кисть» над картинками)
     2. Ink trail (акварельный след от курсора на hero)
   Подключается после main.css. Стили других секций не трогает.
   ═══════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   1. CUSTOM CURSOR
   ═══════════════════════════════════════════════════════ */
.custom-cursor {
  position: fixed;
  top: 0; left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  color: var(--text);
  transform: translate3d(0, 0, 0);
  transition: opacity .25s cubic-bezier(.22,.61,.36,1);
  will-change: transform, opacity;
}
.custom-cursor.is-visible { opacity: 1; }

.custom-cursor__brush {
  position: absolute;
  top: 0; left: 0;
  display: block;
  width: 34px;
  height: 34px;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .18));
  transform-origin: 0 0;
  transform: rotate(-18deg);
  transition:
    transform .35s cubic-bezier(.16,.84,.44,1),
    filter .3s cubic-bezier(.22,.61,.36,1),
    width .35s cubic-bezier(.16,.84,.44,1),
    height .35s cubic-bezier(.16,.84,.44,1);
}

.custom-cursor__brush svg {
  display: block;
  width: 100%;
  height: 100%;
}

.custom-cursor.is-over-image .custom-cursor__brush {
  width: 46px;
  height: 46px;
  transform: rotate(-32deg);
  filter:
    drop-shadow(0 2px 5px rgba(0, 0, 0, .20))
    drop-shadow(0 0 10px rgba(184, 153, 128, .40));
  animation: brushHover 1.8s ease-in-out infinite;
}

@keyframes brushHover {
  0%, 100% { transform: rotate(-32deg) translateY(0); }
  50%      { transform: rotate(-30deg) translateY(-1.5px); }
}

.custom-cursor.custom-cursor--small .custom-cursor__brush {
  width: 24px;
  height: 24px;
  opacity: .9;
  transform: translate(-2px, -1px) rotate(-10deg);
  animation: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .15));
}

.custom-cursor__label {
  position: absolute;
  left: 38px;
  top: 6px;
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--accent);
  opacity: 0;
  transform: translateX(-4px);
  transition:
    opacity .3s cubic-bezier(.22,.61,.36,1),
    transform .35s cubic-bezier(.16,.84,.44,1);
  white-space: nowrap;
}
.custom-cursor.is-visible.is-over-image .custom-cursor__label {
  opacity: 1;
  transform: translateX(0);
}
.custom-cursor--small .custom-cursor__label { display: none; }

.custom-cursor.is-clicking .custom-cursor__brush {
  transform: rotate(-22deg) scale(0.9);
}

html.custom-cursor-active,
html.custom-cursor-active body,
html.custom-cursor-active a,
html.custom-cursor-active button,
html.custom-cursor-active img,
html.custom-cursor-active .work-card,
html.custom-cursor-active .collection-card,
html.custom-cursor-active .print-card,
html.custom-cursor-active input,
html.custom-cursor-active textarea,
html.custom-cursor-active select {
  cursor: none;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .custom-cursor { display: none !important; }
}


/* ═══════════════════════════════════════════════════════
   2. INK TRAIL — акварельный след от курсора
   Позиционируется абсолютно поверх hero, под overlay.
   ═══════════════════════════════════════════════════════ */
.ink-trail {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 2 !important;
  pointer-events: none !important;
  mix-blend-mode: normal;
  opacity: .9;
  display: block;
}

.page-hero--no-image .ink-trail {
  display: none !important;
}

@media (hover: none), (prefers-reduced-motion: reduce) {
  .ink-trail { display: none !important; }
}