/* ============================================================
   Texley — DAILYALLOC mascot. Recolour of Wexley (sibling
   /wexley project) in the app's lime / ink palette.

   Two transform layers:
     .texley-physics  → motion physics (tilt, landing squash).
                         JS sets `--motion-tilt`; CSS transitions
                         it during wander, and the `.landed`
                         class triggers a one-shot squash keyframe.
     .texley-svg      → idle animations (breathe). Independent
                         from the physics layer so the two
                         transforms don't fight.

   Inside the SVG, .eye-group (eye+pupil wrapper) handles blinks;
   .eye-pupil handles cursor-tracking via JS-set SVG transform.
   ============================================================ */

/* ---------- Overlay container ---------- */
.texley-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  z-index: 90;            /* above main content; below modals (200) and rail (120) */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transition: left 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              top  1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.texley-overlay.hidden { display: none; }
.texley-overlay.dragging .texley-svg { cursor: grabbing; }

/* ---------- Physics layer ---------- */
.texley-physics {
  width: 100%;
  height: 100%;
  transform-origin: 50% 90%;     /* pivot at the tie base — leans like a body */
  transform: rotate(var(--motion-tilt, 0deg));
  transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.texley-overlay.dragging .texley-physics {
  transition: none;
}
/* One-shot squash on landing — fires when the .landed class is added
   (briefly, in JS) after a wander move or drag drop. */
.texley-overlay.landed .texley-physics {
  animation: texley-land 0.42s ease-out;
}
@keyframes texley-land {
  0%   { transform: rotate(0deg) scaleY(1)    scaleX(1); }
  28%  { transform: rotate(0deg) scaleY(0.9)  scaleX(1.08); }
  60%  { transform: rotate(0deg) scaleY(1.04) scaleX(0.98); }
  100% { transform: rotate(0deg) scaleY(1)    scaleX(1); }
}

/* ---------- Inner SVG (breathing) ---------- */
.texley-svg {
  width: 100%;
  height: 100%;
  display: block;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
  transform-origin: 50% 80%;
  animation: texley-breathe 4.2s ease-in-out infinite;
}
.texley-svg:hover { filter: drop-shadow(0 4px 16px rgba(212, 255, 58, 0.35)); }
.texley-overlay.dragging .texley-svg {
  filter: drop-shadow(0 8px 22px rgba(212, 255, 58, 0.45));
}
/* While the physics layer is mid-animation (wander / landing), pause
   breathing so the two layers don't fight visually. */
.texley-overlay.wandering .texley-svg,
.texley-overlay.landed    .texley-svg { animation-play-state: paused; }

/* ---------- Recolour: Wexley .stN classes → DAILYALLOC palette ---------- */
.texley-svg .st0 { fill: #d4ff3a; }                     /* lime accent (was cyan) */
.texley-svg .st1 { fill: #ffffff; }                     /* whites kept */
.texley-svg .st2 { fill: #ffffff; stroke: #ffffff;
                    stroke-miterlimit: 10; stroke-width: 7px; }
.texley-svg .st3 { fill: #14161a; }                     /* deep bg (was teal) */

/* ---------- Idle: breathe ---------- */
@keyframes texley-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(1.025); }
}

/* ---------- Eyes (group blinks; pupils translate via JS) ---------- */
.texley-svg .eye-group {
  transform-origin: center;
  transform-box: fill-box;
  animation: texley-blink 5.4s ease-in-out infinite,
             texley-double-blink 17s ease-in-out infinite;
}
.texley-svg .eye-group-right { animation-delay: 0.04s, 0.04s; }
@keyframes texley-blink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.1); }
}
@keyframes texley-double-blink {
  0%, 78%, 84%, 100% { transform: scaleY(1); }
  80%, 82%           { transform: scaleY(0.1); }
}
.texley-svg .eye-pupil {
  fill: #14161a;
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Eyebrows: occasional twitch ---------- */
.texley-svg .eyebrow {
  transform-origin: center;
  transform-box: fill-box;
}
.texley-svg .eyebrow-left  { animation: texley-brow 11s ease-in-out infinite; }
.texley-svg .eyebrow-right { animation: texley-brow 11s ease-in-out infinite 5.5s; }
@keyframes texley-brow {
  0%, 88%, 100% { transform: translateY(0); }
  92%, 96%      { transform: translateY(-12px); }
}

/* ---------- Mustache wiggle ---------- */
.texley-svg .mustache {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: texley-mustache 7s ease-in-out infinite;
}
@keyframes texley-mustache {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-1.4deg); }
  75%      { transform: rotate(1.4deg); }
}

/* ---------- Antenna ball: accent glow pulse ---------- */
.texley-svg .antenna-ball {
  filter: drop-shadow(0 0 4px rgba(212, 255, 58, 0));
  animation: texley-antenna 2.6s ease-in-out infinite;
}
@keyframes texley-antenna {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(212, 255, 58, 0)); }
  50%      { filter: drop-shadow(0 0 8px rgba(212, 255, 58, 0.7)); }
}

/* ============================================================
   Wind-resistance on tie + antenna. JS sets --tie-tilt and
   --antenna-tilt based on body velocity during drag (and the
   direction of travel during wander). The tie pivots at its
   top (where it joins the body) and the antenna pivots at its
   base — so both swing like pendulums lagging the body's motion.
   Release/end-of-wander returns them to 0 with elastic overshoot.
   ============================================================ */
.texley-svg .tie {
  transform-origin: 50% 0%;
  transform-box: fill-box;
  transform: rotate(var(--tie-tilt, 0deg));
  transition: transform 0.55s cubic-bezier(0.34, 1.5, 0.64, 1);
}
.texley-svg .antenna {
  transform-origin: 50% 100%;
  transform-box: fill-box;
  transform: rotate(var(--antenna-tilt, 0deg));
  transition: transform 0.5s cubic-bezier(0.34, 1.55, 0.64, 1);
}
/* While dragging: short linear transition so the lag tracks velocity
   tightly. The elastic overshoot is only wanted on release / arrival. */
.texley-overlay.dragging .texley-svg .tie,
.texley-overlay.dragging .texley-svg .antenna {
  transition: transform 0.08s linear;
}

/* ---------- Mouth quivers while speaking ---------- */
.texley-overlay.speaking .texley-svg .mouth-smile {
  animation: texley-talk 0.42s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes texley-talk {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.6); }
}

/* ============================================================
   Speech bubble — four anchor variants. JS picks the one that
   keeps the bubble inside the viewport given Texley's current
   position, applied via .bubble-{tl|tr|bl|br} on the overlay.
   ============================================================ */
.texley-bubble {
  position: absolute;
  min-width: 160px;
  max-width: 260px;
  padding: 10px 14px;
  background: var(--surface, #1a1d22);
  color: var(--ink, #e8eaed);
  border: 1px solid var(--accent-dim, #b8e030);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: 0.01em;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.32s ease-out, transform 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
.texley-bubble::after {
  content: '';
  position: absolute;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
.texley-overlay.speaking .texley-bubble {
  opacity: 1;
  transform: scale(1);
}

/* Anchor: top-left of Texley (bubble above-left, tail down-right). Default. */
.texley-overlay.bubble-tl .texley-bubble {
  bottom: 82%; right: 64%; left: auto; top: auto;
  transform-origin: bottom right;
}
.texley-overlay.bubble-tl .texley-bubble::after {
  bottom: -8px; right: 14px; left: auto; top: auto;
  border-top: 8px solid var(--accent-dim, #b8e030); border-bottom: 0;
}

/* Top-right (bubble above-right, tail down-left). For Texley on left edge. */
.texley-overlay.bubble-tr .texley-bubble {
  bottom: 82%; left: 64%; right: auto; top: auto;
  transform-origin: bottom left;
}
.texley-overlay.bubble-tr .texley-bubble::after {
  bottom: -8px; left: 14px; right: auto; top: auto;
  border-top: 8px solid var(--accent-dim, #b8e030); border-bottom: 0;
}

/* Bottom-left (bubble below-left, tail up-right). For Texley near top edge. */
.texley-overlay.bubble-bl .texley-bubble {
  top: 82%; right: 64%; left: auto; bottom: auto;
  transform-origin: top right;
}
.texley-overlay.bubble-bl .texley-bubble::after {
  top: -8px; right: 14px; left: auto; bottom: auto;
  border-bottom: 8px solid var(--accent-dim, #b8e030); border-top: 0;
}

/* Bottom-right (bubble below-right, tail up-left). For top-left corner. */
.texley-overlay.bubble-br .texley-bubble {
  top: 82%; left: 64%; right: auto; bottom: auto;
  transform-origin: top left;
}
.texley-overlay.bubble-br .texley-bubble::after {
  top: -8px; left: 14px; right: auto; bottom: auto;
  border-bottom: 8px solid var(--accent-dim, #b8e030); border-top: 0;
}

/* ---------- Reduced-motion: kill movement, keep visibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .texley-overlay,
  .texley-physics,
  .texley-svg,
  .texley-svg .eye-group,
  .texley-svg .eyebrow,
  .texley-svg .mustache,
  .texley-svg .antenna-ball,
  .texley-overlay.speaking .texley-svg .mouth-smile,
  .texley-overlay.landed .texley-physics {
    animation: none;
    transition: none;
  }
  .texley-svg .eye-pupil { transition: none; }
}

/* ---------- Narrow viewports: shrink ---------- */
@media (max-width: 720px) {
  .texley-overlay { width: 72px; height: 72px; }
  .texley-bubble  { font-size: 11px; max-width: 200px; }
}