/* =====================================================================
   Wolf House Production — Animation layer
   Loaded after React renders. Uses IntersectionObserver, no deps.
   ===================================================================== */

/* ── Custom cursor ─────────────────────────────────────────────────── */
.wh-cursor-dot {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 8px; height: 8px; border-radius: 50%;
  background: #1C2FE8;
  transform: translate(-50%, -50%);
  transition: transform 0.1s, opacity 0.2s, width 0.25s, height 0.25s;
  will-change: transform;
}
.wh-cursor-ring {
  position: fixed; z-index: 9998; pointer-events: none;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(28,47,232,0.5);
  transform: translate(-50%, -50%);
  transition: transform 0.18s ease-out, width 0.3s, height 0.3s, border-color 0.3s;
  will-change: transform;
}
body:has(button:hover) .wh-cursor-ring,
body:has(a:hover) .wh-cursor-ring { width: 56px; height: 56px; border-color: #1C2FE8; }
body:has(button:hover) .wh-cursor-dot,
body:has(a:hover) .wh-cursor-dot { width: 4px; height: 4px; }
@media (hover: none) { .wh-cursor-dot, .wh-cursor-ring { display: none; } }

/* ── Scroll reveal base state ──────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.7s cubic-bezier(0.22,0.61,0.36,1);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger children */
[data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22,0.61,0.36,1),
              transform 0.6s cubic-bezier(0.22,0.61,0.36,1);
}
[data-reveal-stagger].is-visible > *:nth-child(1)  { opacity:1; transform:none; transition-delay: 0.05s; }
[data-reveal-stagger].is-visible > *:nth-child(2)  { opacity:1; transform:none; transition-delay: 0.12s; }
[data-reveal-stagger].is-visible > *:nth-child(3)  { opacity:1; transform:none; transition-delay: 0.19s; }
[data-reveal-stagger].is-visible > *:nth-child(4)  { opacity:1; transform:none; transition-delay: 0.26s; }
[data-reveal-stagger].is-visible > *:nth-child(5)  { opacity:1; transform:none; transition-delay: 0.33s; }
[data-reveal-stagger].is-visible > *:nth-child(6)  { opacity:1; transform:none; transition-delay: 0.40s; }
[data-reveal-stagger].is-visible > *:nth-child(n+7){ opacity:1; transform:none; transition-delay: 0.46s; }

/* ── Hero headline clip reveal ─────────────────────────────────────── */
.wh-word-wrap {
  display: inline-block; overflow: hidden;
  vertical-align: bottom; line-height: inherit;
}
.wh-word-inner {
  display: inline-block;
  animation: wh-word-up 0.75s cubic-bezier(0.22,0.61,0.36,1) both;
}
@keyframes wh-word-up {
  from { transform: translateY(105%); }
  to   { transform: translateY(0); }
}

/* ── Section label tick grow ───────────────────────────────────────── */
@keyframes wh-tick-grow {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.wh-tick-anim {
  animation: wh-tick-grow 0.6s cubic-bezier(0.22,0.61,0.36,1) 0.3s both;
}

/* ── Blue accent line under hero divider ───────────────────────────── */
@keyframes wh-line-slide {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* ── Wolf head interactions ─────────────────────────────────────────── */
#wh-wolf-mark {
  transition: transform 0.12s ease-out, filter 0.3s, opacity 0.3s;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Breathing idle */
@keyframes wh-wolf-breathe {
  0%, 100% { transform: scale(1) translateY(0); }
  50%       { transform: scale(1.04) translateY(-10px); }
}
.wh-wolf-idle { animation: wh-wolf-breathe 4s ease-in-out infinite; }

/* Glitch on click */
@keyframes wh-wolf-glitch-r {
  0%  { clip-path: inset(30% 0 40% 0); transform: translate(6px, 0) perspective(800px); filter: hue-rotate(180deg); }
  25% { clip-path: inset(70% 0 5%  0); transform: translate(-5px,0); }
  50% { clip-path: inset(10% 0 70% 0); transform: translate(4px, 0); filter: hue-rotate(270deg); }
  75% { clip-path: inset(50% 0 20% 0); transform: translate(-3px,0); }
  100%{ clip-path: inset(0); transform: translate(0); filter: none; }
}
@keyframes wh-wolf-glitch-b {
  0%  { clip-path: inset(50% 0 20% 0); transform: translate(-5px,0); filter: hue-rotate(90deg); }
  25% { clip-path: inset(15% 0 65% 0); transform: translate(4px, 0); }
  50% { clip-path: inset(75% 0 5%  0); transform: translate(-3px,0); filter: hue-rotate(0deg); }
  75% { clip-path: inset(35% 0 30% 0); transform: translate(5px, 0); }
  100%{ clip-path: inset(0); transform: translate(0); filter: none; }
}
.wh-wolf-glitch-r { animation: wh-wolf-glitch-r 0.45s steps(1) both; }
.wh-wolf-glitch-b { animation: wh-wolf-glitch-b 0.45s steps(1) both; }

/* Spotlight */
#wh-wolf-spotlight {
  position: absolute;
  width: 320px; height: 320px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(28,47,232,0.18) 0%, rgba(28,47,232,0.06) 45%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s;
  mix-blend-mode: screen;
  will-change: left, top;
}

/* About wolf hover tilt */
#about img[alt="Wolf House"] {
  transition: transform 0.18s ease-out, filter 0.3s;
  cursor: default;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wh-wolf-idle, .wh-wolf-glitch-r, .wh-wolf-glitch-b { animation: none !important; }
  #wh-wolf-mark { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-stagger] > *,
  .wh-word-inner, .wh-cursor-dot, .wh-cursor-ring { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}