/* ============================================================
   carrot-anim.css — styles for the WWCarrot animation layer.
   All overlay geometry is % of the image box; stroke weights
   use --u (1% of carrot height, set by JS) so the same code
   works at 34px in the bar and 400px on a stage.
   Brand inks only: #0E0E0C ink, #FFFEFD paper, #F37300 skin,
   #FF1EC8 pink. Hover effects gated; reduced-motion respected.
   ============================================================ */

.ww-carrot {
  position: relative;
  display: inline-block;
  line-height: 0;
  --u: 1px; /* JS overwrites: carrot height / 100 */
}
.ww-carrot.cw-tilt { transform: rotate(6deg); }
.ww-carrot .cwi,
.ww-carrot .cw-stack { position: relative; display: inline-block; line-height: 0; }
.ww-carrot .cw-img { height: 100%; width: auto; display: block; }
.ww-carrot .cwi { height: 100%; }
.ww-carrot .cw-stack { height: 100%; }
.ww-carrot .cw-pokeable { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.ww-carrot, .ww-carrot * { user-select: none; -webkit-user-select: none; }

/* ── transform layers ──────────────────────────────────── */
.cw-idle .cw-stack {
  animation: cw-breathe 4.2s ease-in-out infinite alternate;
  transform-origin: 38% 96%;
}
@keyframes cw-breathe {
  from { transform: scale(1, 1); }
  to   { transform: scale(1.012, 1.022) rotate(0.4deg); }
}
.cw-wiggling .cwi {
  animation: cw-wiggle 850ms cubic-bezier(.36,.07,.19,.97);
  transform-origin: 38% 92%;
}
@keyframes cw-wiggle {
  0% { transform: rotate(0); } 18% { transform: rotate(-5deg); }
  42% { transform: rotate(4deg); } 66% { transform: rotate(-2.5deg); }
  84% { transform: rotate(1.5deg); } 100% { transform: rotate(0); }
}
.cw-poked .cwi {
  animation: cw-poke 750ms cubic-bezier(.34,1.56,.64,1);
  transform-origin: 38% 96%;
}
@keyframes cw-poke {
  0% { transform: scale(1,1); }
  22% { transform: scale(1.14, 0.8); }
  48% { transform: scale(0.9, 1.12); }
  72% { transform: scale(1.05, 0.96); }
  100% { transform: scale(1,1); }
}
.cw-rave .cwi {
  animation: cw-dance 0.46s ease-in-out infinite alternate;
  transform-origin: 38% 94%;
}
@keyframes cw-dance {
  from { transform: rotate(-4deg) translateY(0); }
  to   { transform: rotate(4deg) translateY(calc(var(--u) * -2)); }
}

/* ── hue / psychedelic ─────────────────────────────────── */
.cw-hued .cw-img { animation: cw-hue 7s linear infinite; }
.cw-rave .cw-img { animation-duration: 2.4s; }
@keyframes cw-hue {
  from { filter: hue-rotate(0deg) saturate(1.15); }
  to   { filter: hue-rotate(360deg) saturate(1.15); }
}

/* ── glitch burst ──────────────────────────────────────── */
.cw-g { position: absolute; inset: 0; height: 100%; width: auto; display: none; pointer-events: none; }
.cw-glitching .cw-g { display: block; opacity: 0.65; }
.cw-glitching .cw-g1 {
  filter: hue-rotate(285deg) saturate(2.6);
  animation: cw-gl1 640ms steps(2, jump-none) both;
}
.cw-glitching .cw-g2 {
  filter: hue-rotate(160deg) saturate(2.6);
  animation: cw-gl2 640ms steps(3, jump-none) both;
}
.cw-glitching .cw-img { animation: cw-gl0 640ms steps(4, jump-none) both; }
@keyframes cw-gl0 {
  0% { transform: translate(0,0); }
  25% { transform: translate(calc(var(--u)*-1.2), calc(var(--u)*0.6)); }
  50% { transform: translate(calc(var(--u)*1), 0); }
  75% { transform: translate(calc(var(--u)*-0.6), calc(var(--u)*-0.8)); }
  100% { transform: translate(0,0); }
}
@keyframes cw-gl1 {
  0% { clip-path: inset(8% 0 64% 0); transform: translate(calc(var(--u)*2.4), 0); }
  33% { clip-path: inset(42% 0 22% 0); transform: translate(calc(var(--u)*-2.4), calc(var(--u)*1)); }
  66% { clip-path: inset(70% 0 6% 0); transform: translate(calc(var(--u)*1.8), 0); }
  100% { clip-path: inset(30% 0 48% 0); transform: translate(0,0); }
}
@keyframes cw-gl2 {
  0% { clip-path: inset(55% 0 18% 0); transform: translate(calc(var(--u)*-2), calc(var(--u)*-0.8)); }
  40% { clip-path: inset(12% 0 70% 0); transform: translate(calc(var(--u)*2.2), 0); }
  80% { clip-path: inset(36% 0 38% 0); transform: translate(calc(var(--u)*-1.4), calc(var(--u)*0.6)); }
  100% { clip-path: inset(60% 0 12% 0); transform: translate(0,0); }
}

/* ── eyes: lids, dizzy spirals, pupil-follow ───────────── */
.cw-eye {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
}
/* white + pupil only used by dizzy / follow modes */
.cw-white {
  position: absolute; inset: 6% 4%;
  border-radius: 50%;
  background: #FFFEFD;
  display: none;
  align-items: center; justify-content: center;
}
.cw-pupil {
  width: 42%; height: 56%;
  border-radius: 50%;
  background: #0E0E0C;
  margin: auto; position: absolute; inset: 0;
}
.cw-follow .cw-white { display: flex; }
.cw-spiralwrap { position: absolute; inset: -4%; display: none; background: #FFFEFD; border-radius: 50%; }
.cw-spiral { width: 100%; height: 100%; transform-origin: 50% 50%; }
.cw-dizzy .cw-spiralwrap { display: block; }
.cw-dizzy .cw-spiral { animation: cw-spin 0.8s linear infinite; }
.cw-eye-r .cw-spiral { animation-direction: reverse; }
@keyframes cw-spin { to { transform: rotate(360deg); } }

/* eyelid: slides down along the eye's own tilted axis */
.cw-lid {
  position: absolute; inset: -8%;
  background: #F37300;
  border-bottom: calc(var(--u) * 1.1) solid #0E0E0C;
  transform: translateY(-104%);
}
.cw-lid.blinking { animation: cw-blink 340ms ease-in-out both; }
@keyframes cw-blink {
  0% { transform: translateY(-104%); }
  38% { transform: translateY(0%); }
  58% { transform: translateY(0%); }
  100% { transform: translateY(-104%); }
}
/* sleepy half-lids in coffee mode */
.cw-squint .cw-lid { transform: translateY(-62%); transition: transform 600ms ease; }
.cw-squint .cw-lid.blinking { animation: cw-blink-squint 520ms ease-in-out both; }
@keyframes cw-blink-squint {
  0% { transform: translateY(-62%); }
  45% { transform: translateY(0%); }
  62% { transform: translateY(0%); }
  100% { transform: translateY(-62%); }
}

/* ── shades (placeholder prop) ─────────────────────────── */
.cw-shades {
  position: absolute;
  display: none;
  gap: 4%;
  align-items: center;
  transform: rotate(var(--rot, 0deg));
  pointer-events: none;
}
.cw-rave .cw-shades { display: flex; animation: cw-drop 480ms cubic-bezier(.34,1.56,.64,1) both; }
@keyframes cw-drop {
  from { transform: rotate(var(--rot, 0deg)) translateY(-46%); opacity: 0; }
  to   { transform: rotate(var(--rot, 0deg)) translateY(0); opacity: 1; }
}
.cw-lens {
  flex: 1; height: 100%;
  background:
    linear-gradient(115deg, transparent 38%, rgba(255,255,255,0.5) 42%, rgba(255,255,255,0.5) 50%, transparent 54%),
    #0E0E0C;
  border: calc(var(--u) * 0.9) solid #0E0E0C;
  border-radius: 38% 38% 46% 46% / 44% 44% 56% 56%;
  box-shadow: 0 calc(var(--u) * 0.8) 0 rgba(14,14,12,0.25);
}
.cw-bridge {
  width: 8%; height: calc(var(--u) * 1.6);
  background: #0E0E0C; border-radius: var(--u);
  flex: 0 0 auto;
}

/* ── coffee mug (placeholder prop) ─────────────────────── */
.cw-mug { position: absolute; display: none; transform: rotate(var(--rot, 0deg)); pointer-events: none; }
.cw-coffee .cw-mug { display: block; animation: cw-drop 480ms cubic-bezier(.34,1.56,.64,1) both; }
.cw-cup {
  position: absolute; inset: 28% 18% 0 0;
  background: #FFFEFD;
  border: calc(var(--u) * 0.9) solid #0E0E0C;
  border-radius: 10% 10% 26% 26% / 14% 14% 38% 38%;
}
.cw-cup::before { /* coffee surface line */
  content: ""; position: absolute; left: 8%; right: 8%; top: 16%;
  height: calc(var(--u) * 0.8);
  background: #0E0E0C; border-radius: var(--u); opacity: 0.85;
}
.cw-handle {
  position: absolute; right: -34%; top: 12%;
  width: 38%; height: 54%;
  border: calc(var(--u) * 0.9) solid #0E0E0C;
  border-radius: 50%;
  background: transparent;
}
.cw-steam {
  position: absolute; top: -6%;
  width: calc(var(--u) * 1.1); height: 30%;
  background: #0E0E0C; opacity: 0;
  border-radius: var(--u);
}
.cw-steam.s1 { left: 26%; }
.cw-steam.s2 { left: 48%; }
.cw-coffee .cw-steam { animation: cw-steam 1.7s ease-in-out infinite; }
.cw-coffee .cw-steam.s2 { animation-delay: 0.55s; }
@keyframes cw-steam {
  0% { transform: translateY(20%) scaleY(0.6) rotate(0deg); opacity: 0; }
  35% { opacity: 0.4; }
  100% { transform: translateY(-110%) scaleY(1) rotate(8deg); opacity: 0; }
}

/* ── speech balloon ────────────────────────────────────── */
.cw-balloon {
  position: absolute;
  transform: translate(0, -100%) scale(0.5);
  transform-origin: 0% 100%;
  background: #FFFDF3;
  color: #0E0E0C;
  border: max(2px, calc(var(--u) * 0.8)) solid #0E0E0C;
  border-radius: 18px 22px 20px 22px;
  padding: 0.3em 0.7em 0.35em;
  font-family: "Caveat", "Bradley Hand", "Segoe Script", cursive;
  font-weight: 700;
  font-size: max(17px, calc(var(--u) * 7));
  line-height: 1.05;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  box-shadow: calc(var(--u) * 0.8) calc(var(--u) * 0.8) 0 #FF1EC8;
  z-index: 3;
}
.cw-balloon::after { /* tail */
  content: "";
  position: absolute;
  left: 12%; bottom: calc(-0.6em - max(2px, calc(var(--u) * 0.8)));
  width: 0.55em; height: 0.62em;
  background: #FFFDF3;
  border-right: max(2px, calc(var(--u) * 0.8)) solid #0E0E0C;
  border-bottom: max(2px, calc(var(--u) * 0.8)) solid #0E0E0C;
  transform: skewX(28deg) rotate(28deg);
}
.cw-balloon.show {
  opacity: 1;
  transform: translate(0, -100%) scale(1);
  transition: transform 240ms cubic-bezier(.34,1.8,.64,1), opacity 120ms linear;
}

/* ── reduced motion: keep states, drop motion ──────────── */
@media (prefers-reduced-motion: reduce) {
  .cw-idle .cw-stack, .cw-wiggling .cwi, .cw-poked .cwi, .cw-rave .cwi,
  .cw-hued .cw-img, .cw-glitching .cw-img,
  .cw-dizzy .cw-spiral, .cw-coffee .cw-steam { animation: none !important; }
  .cw-glitching .cw-g { display: none !important; }
  .cw-rave .cw-shades, .cw-coffee .cw-mug { animation: none !important; }
  .cw-balloon.show { transition: opacity 150ms linear; }
  .cw-lid.blinking { animation: none !important; }
}