/* ==========================================================================
   FINDER GUY — Lil' Finder Guy companion character
   A split-face Finder mascot that randomly peeks up above the dock (bottom-
   left corner) to play a brief expression animation, then hides.
   
   Architecture:
   - .finder-guy: Outer wrapper (fixed bottom-left, visibility control)
   - .finder-guy__character: The SVG character (transform target)
   - Animation states applied via modifier classes on .finder-guy
   - Graphics-tier-aware via .lg-quality-{low|medium|high} body classes
   ========================================================================== */

/* ==========================================================================
   CUSTOM PROPERTIES
   ========================================================================== */
:root {
  /* Appearance timing */
  --fg-peek-duration: 550ms;
  --fg-hide-duration: 500ms;
  --fg-expression-duration: 800ms;

  /* Character easing — spring-like for personality */
  /* Reduced y2 overshoot (1.56 -> 1.3): prevents double-bounce when stacked with keyframe wobble */
  --fg-curve-peek: cubic-bezier(0.22, 1.3, 0.58, 1);
  --fg-curve-hide: cubic-bezier(0.55, 0, 0.67, 0.52);
  --fg-curve-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
  --fg-curve-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --fg-curve-playful: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Sizing — matches desktop icon glass height (64px) */
  --fg-size: 57px;
  --fg-height: 64px;

  /* Position: bottom-left corner, above the dock */
  --fg-left: 16px;
  --fg-bottom: 16px;
}

/* ==========================================================================
   BASE LAYOUT
   ========================================================================== */
.finder-guy {
  position: fixed;
  bottom: var(--fg-bottom);
  left: var(--fg-left);
  z-index: 999; /* Below dock (1000) and below windows */
  width: var(--fg-size);
  height: var(--fg-height);
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%); /* Hidden below — peeks UP */
  will-change: transform, opacity;
}

/* Only enable interaction during visible states */
.finder-guy--visible {
  pointer-events: auto;
  cursor: pointer;
}

/* ==========================================================================
   CHARACTER ELEMENT
   ========================================================================== */
.finder-guy__character {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.25));
  transition: filter 200ms ease;
}

.finder-guy--visible:hover .finder-guy__character {
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.35));
}

/* ==========================================================================
   PEEK-IN ANIMATIONS (Entry)
   Character peeks UP from behind the dock area.
   Three variants — selected randomly for variety.
   ========================================================================== */

/* Variant 1: Slide up from behind dock with bounce */
@keyframes fg-peek-slide {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  48% {
    opacity: 1;
    transform: translateY(-5px);
  }
  72% {
    transform: translateY(1.5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Variant 2: Pop-up with scale burst */
@keyframes fg-peek-pop {
  0% {
    opacity: 0;
    transform: translateY(45%) scale(0.55);
  }
  50% {
    opacity: 1;
    transform: translateY(-4px) scale(1.07);
  }
  72% {
    transform: translateY(1.5px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Variant 3: Swing up from left with rotation */
@keyframes fg-peek-swing {
  0% {
    opacity: 0;
    transform: translateY(75%) translateX(-16px) rotate(-8deg);
  }
  44% {
    opacity: 1;
    transform: translateY(-4px) translateX(1.5px) rotate(2deg);
  }
  70% {
    transform: translateY(1px) translateX(-0.5px) rotate(-0.5deg);
  }
  100% {
    opacity: 1;
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

/* Entry state classes */
.finder-guy--peek-slide {
  animation: fg-peek-slide var(--fg-peek-duration) var(--fg-curve-peek) forwards;
}

.finder-guy--peek-pop {
  animation: fg-peek-pop var(--fg-peek-duration) var(--fg-curve-elastic) forwards;
}

/* Uses --fg-curve-elastic (not --fg-curve-bounce): the bounce curve's negative y1
   caused the character to lurch backward before entering — now enters cleanly */
.finder-guy--peek-swing {
  animation: fg-peek-swing var(--fg-peek-duration) var(--fg-curve-elastic) forwards;
}

/* Variant 4: Sneak — climbs from the viewport bottom edge using "hands",
   stops with just the eyes above the edge. Never plays an expression.
   CSS duration (2000ms) must match Dart _sneakPeekDurationMs.
   translateY math (64px element, bottom:0):
     92% -> top=5px (fingertips gripping),  78% -> top=14px (forehead),
     60% -> top=26px = eyes ~6px above viewport edge (final hold). */
@keyframes fg-peek-sneak {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  22% {
    opacity: 1;
    transform: translateY(92%); /* First grip — just fingertips visible */
  }
  32% {
    transform: translateY(94%); /* Micro-retreat, re-grips */
  }
  50% {
    transform: translateY(78%); /* Second push — forehead emerges */
  }
  60% {
    transform: translateY(80%); /* Settle */
  }
  78% {
    transform: translateY(60%); /* Final rise to eye level */
  }
  91% {
    transform: translateY(57%); /* Tiny overshoot */
  }
  100% {
    opacity: 1;
    transform: translateY(60%); /* Hold: eyes just above viewport edge */
  }
}

/* Sneak variants: character must be flush with the viewport bottom edge
   so the climb translateY math is correct (element height 64px fully off-screen
   = translateY(100%), eyes appear at translateY(60%)). Override --fg-bottom. */
.finder-guy[class*="--peek-sneak"] {
  bottom: 0; /* Override --fg-bottom */
}

.finder-guy--peek-sneak {
  animation: fg-peek-sneak 2000ms var(--fg-curve-playful) forwards;
}

/* Variant 4b: Quick sneak — single confident grip, smooth fast pull to eye level */
@keyframes fg-peek-sneak-quick {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  18% {
    opacity: 1;
    transform: translateY(86%); /* Confident single grip */
  }
  25% {
    transform: translateY(89%); /* Brief slip, re-grips */
  }
  42% {
    transform: translateY(60%); /* Smooth powerful pull to eye level */
  }
  52% {
    transform: translateY(57%); /* Slight overshoot */
  }
  100% {
    opacity: 1;
    transform: translateY(60%); /* Hold */
  }
}

.finder-guy--peek-sneak-quick {
  animation: fg-peek-sneak-quick 2000ms var(--fg-curve-playful) forwards;
}

/* Variant 4c: Shy sneak — tentative, retreats once, gathers courage and rises */
@keyframes fg-peek-sneak-shy {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }
  20% {
    opacity: 1;
    transform: translateY(88%); /* Tentative first peek */
  }
  32% {
    transform: translateY(93%); /* Gets spooked, drops back */
  }
  44% {
    transform: translateY(88%); /* Peers again, building courage */
  }
  58% {
    transform: translateY(75%); /* Forehead clears the edge */
  }
  65% {
    transform: translateY(78%); /* Wobble of doubt */
  }
  80% {
    transform: translateY(60%); /* Brave final rise to eye level */
  }
  90% {
    transform: translateY(58%); /* Tiny overshoot */
  }
  100% {
    opacity: 1;
    transform: translateY(60%); /* Hold */
  }
}

.finder-guy--peek-sneak-shy {
  animation: fg-peek-sneak-shy 2000ms var(--fg-curve-playful) forwards;
}

/* ==========================================================================
   PEEK-OUT ANIMATIONS (Exit)
   Character hides back DOWN behind the dock area.
   Three variants — paired or randomized.
   ========================================================================== */

/* Variant 1: Slide back down behind dock */
@keyframes fg-hide-slide {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  30% {
    transform: translateY(-4px);
  }
  100% {
    opacity: 0;
    transform: translateY(100%);
  }
}

/* Variant 2: Shrink and fade down */
@keyframes fg-hide-shrink {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    opacity: 1;
    transform: translateY(-3px) scale(1.08);
  }
  100% {
    opacity: 0;
    transform: translateY(40%) scale(0.2);
  }
}

/* Variant 3: Tumble off to the left */
@keyframes fg-hide-tumble {
  0% {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px) rotate(5deg);
  }
  100% {
    opacity: 0;
    transform: translateY(80%) translateX(-40px) rotate(-25deg);
  }
}

/* Exit state classes */
.finder-guy--hide-slide {
  animation: fg-hide-slide var(--fg-hide-duration) var(--fg-curve-hide) forwards;
}

.finder-guy--hide-shrink {
  animation: fg-hide-shrink var(--fg-hide-duration) var(--fg-curve-hide) forwards;
}

.finder-guy--hide-tumble {
  animation: fg-hide-tumble var(--fg-hide-duration) var(--fg-curve-hide) forwards;
}

/* Sneak hide: reverses the climb from eye-level back below viewport.
   CSS duration (600ms) must match Dart _sneakHideDurationMs.
   Starts from translateY(60%) to match sneak peek final hold position.
   No opacity fade — character just drops below the edge cleanly. */
@keyframes fg-hide-sneak {
  0% {
    opacity: 1;
    transform: translateY(60%);
  }
  30% {
    opacity: 1;
    transform: translateY(63%); /* Brief duck before retreating */
  }
  100% {
    opacity: 1;
    transform: translateY(100%);
  }
}

.finder-guy--hide-sneak {
  bottom: 0; /* Maintain viewport-bottom anchor during hide */
  animation: fg-hide-sneak 600ms var(--fg-curve-hide) forwards;
}

/* Sneak hide eyelids: picks up from the squint hold and closes fully as the
   character drops. Prevents the jarring snap-to-open that occurs when
   --visible is removed and fg-sneak-eyelids loses its target. */
@keyframes fg-sneak-hide-eyelids {
  0%   { transform: translateY(5px); }  /* Continues from squint hold */
  100% { transform: translateY(12px); } /* Eyes shut as retreating */
}

.finder-guy[class*="--peek-sneak"].finder-guy--hide-sneak .fg-eyelid {
  animation: fg-sneak-hide-eyelids 600ms ease-in forwards;
}

/* Sneak hide pupils: hold last gaze direction. Without this, the 200ms ease
   transition on .fg-pupil would slide pupils back to center during the hide. */
.finder-guy[class*="--peek-sneak"].finder-guy--hide-sneak .fg-pupil {
  transform: translate(2px, 0);
  transition: none;
}

/* ==========================================================================
   IDLE BLINK (natural blinking when visible, no expression active)
   Periodic double-blink via eyelid translateY.
   ========================================================================== */
@keyframes fg-idle-blink {
  /* Close (2%) -> hold closed (2%) -> open (2%) per blink at 8s ≈ 160ms each phase.
     The hold window prevents the eyelid from feeling like an instant flash. */
  0%, 87%, 93%, 100% {
    transform: translateY(0);
  }
  89%, 91% {
    transform: translateY(12px); /* First blink: close->hold->open */
  }
  95%, 97% {
    transform: translateY(12px); /* Second blink: close->hold->open */
  }
}

.finder-guy--visible .fg-eyelid {
  animation: fg-idle-blink 8s ease-in-out infinite;
}

/* Disable idle blink when an expression is active */
.finder-guy[class*="--expr-"] .fg-eyelid {
  animation: none;
}

/* ==========================================================================
   IDLE FLOAT (subtle vertical bob while visible)
   ========================================================================== */
@keyframes fg-idle-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

.finder-guy--visible .finder-guy__character {
  animation: fg-idle-float 3s ease-in-out infinite;
}

/* Sneak: eyes sit at the viewport edge — a 2px float bob would flash them
   in and out of view. Disable idle float for the duration of a sneak peek. */
.finder-guy[class*="--peek-sneak"].finder-guy--visible .finder-guy__character {
  animation: none;
}

/* Sneak eyelid: enters open, narrows into a suspicious squint, does two slow
   blinks, then holds half-lidded until the hide. 4000ms = full visible window.
   Overrides idle blink (specificity 0,3,0 > 0,2,0). */
/* Suspicious original: squints deep, two slow blinks, holds half-lidded */
@keyframes fg-sneak-eyelids {
  0%   { transform: translateY(0); }      /* Eyes clear viewport — open */
  8%   { transform: translateY(6px); }    /* Settle into squint */
  20%, 28% { transform: translateY(5px); } /* Hold narrow sweep */
  24%  { transform: translateY(12px); }   /* First slow blink */
  45%, 58% { transform: translateY(5px); } /* Squint hold */
  52%  { transform: translateY(12px); }   /* Second blink */
  75%, 100% { transform: translateY(5px); } /* Squint hold to hide */
}

/* Confident quick: barely narrows — wide-alert, no blinks, all business */
@keyframes fg-sneak-quick-eyelids {
  0%   { transform: translateY(0); }      /* Open as eyes clear */
  6%   { transform: translateY(2px); }    /* Tiny alert squint — just sharp */
  100% { transform: translateY(2px); }    /* Holds that steady the whole time */
}

/* Nervous shy: rapid-fire blinks, wide-eyed panic, slowly droops at end */
@keyframes fg-sneak-shy-eyelids {
  0%   { transform: translateY(0); }
  6%   { transform: translateY(12px); }   /* Immediate nervous blink */
  12%  { transform: translateY(0); }      /* Snap open */
  18%  { transform: translateY(12px); }   /* Second fast blink */
  24%  { transform: translateY(0); }      /* Snap open — wide-eyed */
  38%  { transform: translateY(1px); }    /* Barely-open hold, trembling */
  48%  { transform: translateY(12px); }   /* Third blink */
  54%  { transform: translateY(1px); }    /* Flick open */
  70%  { transform: translateY(8px); }    /* Slowly closing — losing nerve */
  100% { transform: translateY(8px); }    /* Drooped, resigned */
}

.finder-guy--peek-sneak.finder-guy--visible .fg-eyelid {
  animation: fg-sneak-eyelids 4000ms ease-in-out forwards;
}
.finder-guy--peek-sneak-quick.finder-guy--visible .fg-eyelid {
  animation: fg-sneak-quick-eyelids 4000ms ease-in-out forwards;
}
.finder-guy--peek-sneak-shy.finder-guy--visible .fg-eyelid {
  animation: fg-sneak-shy-eyelids 4000ms ease-in-out forwards;
}

/* Sneak pupils: scans right first, centers through each blink, drifts left
   to check the other direction, then locks back right — "casing the room".
   Tiny upward nudge at entry reinforces the climbing-into-view moment.
   Timed to coordinate with fg-sneak-eyelids (same 4000ms window). */
/* Suspicious original: scan right, check left, lock right — casing the room */
@keyframes fg-sneak-pupils {
  0%   { transform: translate(0, -1.5px); }   /* Looking slightly up as rising */
  10%  { transform: translate(2px, 0); }      /* Scan right */
  18%, 30% { transform: translate(2px, 0); }  /* Hold right sweep */
  24%  { transform: translate(0, 0); }        /* Center during first blink */
  40%  { transform: translate(-1.5px, 0); }   /* Check left */
  48%, 55% { transform: translate(-1.5px, 0); } /* Hold left */
  52%  { transform: translate(0, 0); }        /* Center during second blink */
  65%  { transform: translate(2px, 0); }      /* Lock back right */
  100% { transform: translate(2px, 0); }      /* Hold — watching something */
}

/* Confident quick: hard lock right on arrival, zero wander — laser focused */
@keyframes fg-sneak-quick-pupils {
  0%   { transform: translate(0, -1.5px); }   /* Up as rising */
  5%   { transform: translate(2.5px, 0); }    /* Snaps right, decisive */
  100% { transform: translate(2.5px, 0); }    /* Locked — never wavers */
}

/* Nervous shy: darts all over, never settles, ends avoiding eye contact */
@keyframes fg-sneak-shy-pupils {
  0%   { transform: translate(0, -1.5px); }   /* Up as rising */
  7%   { transform: translate(-2px, 0); }     /* Dart left first (checking escape) */
  14%  { transform: translate(0, 1.5px); }    /* Dart down (embarrassed) */
  20%  { transform: translate(2px, 0); }      /* Dart right */
  28%  { transform: translate(-2px, 0.5px); } /* Back left-ish */
  38%  { transform: translate(0, 0); }        /* Brief center */
  46%  { transform: translate(0, 0); }        /* Center during third blink */
  55%  { transform: translate(-1px, 1px); }   /* Drift left-down — shy */
  68%  { transform: translate(1.5px, 0); }    /* One last look right */
  80%  { transform: translate(-1.5px, 0); }   /* Looks away — can't hold gaze */
  100% { transform: translate(-1.5px, 0); }   /* Averted, hoping not noticed */
}

.finder-guy--peek-sneak.finder-guy--visible .fg-pupil {
  animation: fg-sneak-pupils 4000ms var(--fg-curve-playful) forwards;
}
.finder-guy--peek-sneak-quick.finder-guy--visible .fg-pupil {
  animation: fg-sneak-quick-pupils 4000ms var(--fg-curve-playful) forwards;
}
.finder-guy--peek-sneak-shy.finder-guy--visible .fg-pupil {
  animation: fg-sneak-shy-pupils 4000ms var(--fg-curve-playful) forwards;
}

/* ==========================================================================
   EXPRESSION ANIMATIONS (While visible)
   Each expression is a COORDINATED system:
   - Body: .finder-guy__character (tilt, bounce, sway)
   - Eyes: .fg-eye (squint, widen, close)
   - Pupils: .fg-pupil (look direction)
   - Mouth: .fg-mouth (smile, frown, O-shape via transform)

   Specificity 0,3,0 via double class — beats tier overrides by source order.
   ========================================================================== */

/* --- Base styles for face elements --- */
.fg-eye { transform-origin: center center; }
.fg-pupil { transform-origin: center center; transition: transform 200ms ease; }
.fg-mouth { transform-origin: center 42px; transition: transform 200ms ease; }
.fg-eyelid { transform: translateY(0); }

/* ==========================================================================
   EXPR: BLINK — Deliberate double-blink (800ms, with closed hold)
   ========================================================================== */
@keyframes fg-blink-eyelids {
  /* close(70ms) -> hold(40ms) -> open -> pause -> close(70ms) -> hold(40ms) -> open */
  0%, 22%, 55%, 72%, 100% { transform: translateY(0); }
  12%, 17% { transform: translateY(12px); }
  62%, 67% { transform: translateY(12px); }
}

.finder-guy.finder-guy--expr-blink .fg-eyelid {
  animation: fg-blink-eyelids 800ms ease-in-out;
}

/* ==========================================================================
   EXPR: HAPPY — Bouncy squash/stretch, squinted eyes, wide grin
   ========================================================================== */
@keyframes fg-happy-body {
  /* Squash/stretch in-place — no translateY so the character stays
     anchored at the viewport edge rather than jumping off it. */
  0%, 100% { transform: scaleX(1) scaleY(1); }
  15% { transform: scaleX(0.88) scaleY(1.13); }
  30% { transform: scaleX(1.1) scaleY(0.9); }
  45% { transform: scaleX(0.93) scaleY(1.07); }
  60% { transform: scaleX(1.04) scaleY(0.96); }
  80% { transform: scaleX(0.98) scaleY(1.02); }
}

@keyframes fg-happy-eyelids {
  0%, 100% { transform: translateY(0); }
  15%, 60% { transform: translateY(6.6px); }
  30% { transform: translateY(4px); }
  45% { transform: translateY(8px); }
}

@keyframes fg-happy-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  15%, 45% { transform: scaleX(1.4) scaleY(1.3); }
  30% { transform: scaleX(1.2) scaleY(1.1); }
}

.finder-guy.finder-guy--expr-happy .finder-guy__character {
  animation: fg-happy-body 900ms var(--fg-curve-bounce);
  transform-origin: bottom center; /* anchor squash/stretch at the base */
}
.finder-guy.finder-guy--expr-happy .fg-eyelid {
  animation: fg-happy-eyelids 900ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-happy .fg-mouth {
  animation: fg-happy-mouth 900ms var(--fg-curve-bounce);
}

/* ==========================================================================
   EXPR: WAVE — Sways side to side, eyes track direction, friendly grin
   ========================================================================== */
@keyframes fg-wave-body {
  0%, 100% { transform: rotate(0deg); }
  12% { transform: rotate(14deg); }
  28% { transform: rotate(-12deg); }
  42% { transform: rotate(9deg); }
  58% { transform: rotate(-6deg); }
  72% { transform: rotate(3deg); }
  86% { transform: rotate(-1deg); }
}

@keyframes fg-wave-pupils {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(2px); }
  28% { transform: translateX(-2px); }
  42% { transform: translateX(1.5px); }
  58% { transform: translateX(-1px); }
  72% { transform: translateX(0.5px); }
}

@keyframes fg-wave-eyelids {
  0%, 100% { transform: translateY(0); }
  20%, 50% { transform: translateY(4px); }
  35%, 65% { transform: translateY(0); }
}

@keyframes fg-wave-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  15%, 55% { transform: scaleX(1.2) scaleY(1.15); }
  35%, 75% { transform: scaleX(1.1) scaleY(1); }
}

.finder-guy.finder-guy--expr-wave .finder-guy__character {
  animation: fg-wave-body 1200ms var(--fg-curve-playful);
  transform-origin: bottom center;
}
.finder-guy.finder-guy--expr-wave .fg-pupil {
  animation: fg-wave-pupils 1200ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-wave .fg-eyelid {
  animation: fg-wave-eyelids 1200ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-wave .fg-mouth {
  animation: fg-wave-mouth 1200ms var(--fg-curve-playful);
}

/* ==========================================================================
   EXPR: SLEEPY — Slow droop, eyes closing, tiny mouth
   ========================================================================== */
@keyframes fg-sleepy-body {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(3px) rotate(4deg); }
  50% { transform: translateY(5px) rotate(-2deg); }
  75% { transform: translateY(4px) rotate(1deg); }
}

@keyframes fg-sleepy-eyelids {
  0% { transform: translateY(0); }
  20% { transform: translateY(5.3px); }
  40% { transform: translateY(9.2px); }
  55% { transform: translateY(11.3px); }
  70% { transform: translateY(10.6px); }
  85% { transform: translateY(8.6px); }
  100% { transform: translateY(0); }
}

@keyframes fg-sleepy-pupils {
  0%, 100% { transform: translateY(0); }
  40%, 70% { transform: translateY(1.5px); }
}

@keyframes fg-sleepy-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  15% { transform: scaleX(0.8) scaleY(0.7); }
  35%, 65% { transform: scaleX(0.5) scaleY(0.4) translateY(1px); }
  85% { transform: scaleX(0.8) scaleY(0.75); }
}

.finder-guy.finder-guy--expr-sleepy .finder-guy__character {
  animation: fg-sleepy-body 2200ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-sleepy .fg-eyelid {
  animation: fg-sleepy-eyelids 2200ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-sleepy .fg-pupil {
  animation: fg-sleepy-pupils 2200ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-sleepy .fg-mouth {
  animation: fg-sleepy-mouth 2200ms var(--fg-curve-playful);
}

/* ==========================================================================
   EXPR: SPLIT — Halves separate, pupils look outward, mouth tenses
   ========================================================================== */
@keyframes fg-split-left {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  50% { transform: translateX(-3px); }
  75% { transform: translateX(-1px); }
}

@keyframes fg-split-right {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(4px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(1px); }
}

@keyframes fg-split-pupil-left {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-2px); }
}

@keyframes fg-split-pupil-right {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(2px); }
}

@keyframes fg-split-eyelids {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(0); }
  50% { transform: translateY(2px); }
}

@keyframes fg-split-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  10% { transform: scaleX(0.85) scaleY(0.75); }
  25%, 55% { transform: scaleX(0.7) scaleY(0.5) translateY(1px); }
  80% { transform: scaleX(0.9) scaleY(0.8); }
}

.finder-guy.finder-guy--expr-split .fg-half-left {
  animation: fg-split-left var(--fg-expression-duration) var(--fg-curve-elastic);
}
.finder-guy.finder-guy--expr-split .fg-half-right {
  animation: fg-split-right var(--fg-expression-duration) var(--fg-curve-elastic);
}
.finder-guy.finder-guy--expr-split .fg-eyelid {
  animation: fg-split-eyelids var(--fg-expression-duration) var(--fg-curve-elastic);
}
.finder-guy.finder-guy--expr-split .fg-eye-left .fg-pupil {
  animation: fg-split-pupil-left var(--fg-expression-duration) var(--fg-curve-elastic);
}
.finder-guy.finder-guy--expr-split .fg-eye-right .fg-pupil {
  animation: fg-split-pupil-right var(--fg-expression-duration) var(--fg-curve-elastic);
}
.finder-guy.finder-guy--expr-split .fg-mouth {
  animation: fg-split-mouth var(--fg-expression-duration) var(--fg-curve-elastic);
}

/* ==========================================================================
   EXPR: UNAMUSED — Half-lidded eyes, side-glance, flat mouth. "Really?"
   ========================================================================== */
@keyframes fg-unamused-body {
  0%, 100% { transform: rotate(0deg); }
  20% { transform: rotate(3deg); }
  50% { transform: rotate(2deg); }
  80% { transform: rotate(1deg); }
}

@keyframes fg-unamused-eyelids {
  0%, 100% { transform: translateY(0); }
  15% { transform: translateY(4px); }
  30%, 70% { transform: translateY(6.6px); }
  85% { transform: translateY(3.3px); }
}

@keyframes fg-unamused-pupils {
  0%, 100% { transform: translate(0, 0); }
  20%, 70% { transform: translate(2px, 0.5px); }
  85% { transform: translate(0.5px, 0); }
}

@keyframes fg-unamused-mouth {
  /* scaleY(0) collapses the curve to a flat horizontal line at transform-origin */
  0%, 100% { transform: scaleX(1) scaleY(1); }
  15% { transform: scaleX(0.9) scaleY(0.4); }
  30%, 70% { transform: scaleX(0.85) scaleY(0); }
  85% { transform: scaleX(0.9) scaleY(0.4); }
}

.finder-guy.finder-guy--expr-unamused .finder-guy__character {
  animation: fg-unamused-body 1800ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-unamused .fg-eyelid {
  animation: fg-unamused-eyelids 1800ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-unamused .fg-pupil {
  animation: fg-unamused-pupils 1800ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--expr-unamused .fg-mouth {
  animation: fg-unamused-mouth 1800ms var(--fg-curve-playful);
}

/* ==========================================================================
   EXPR: EXPRESSIONLESS — Deadpan stare, flat mouth, no body motion
   ========================================================================== */
@keyframes fg-expressionless-eyelids {
  0%, 100% { transform: translateY(0); }
  40%, 60% { transform: translateY(12px); }
}

@keyframes fg-expressionless-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  12% { transform: scaleX(0.85) scaleY(0.6); }
  25%, 75% { transform: scaleX(0.7) scaleY(0.15); }
  88% { transform: scaleX(0.85) scaleY(0.6); }
}

.finder-guy.finder-guy--expr-expressionless .finder-guy__character {
  animation: none;
}
.finder-guy.finder-guy--expr-expressionless .fg-eyelid {
  animation: fg-expressionless-eyelids 2000ms ease-in-out;
}
.finder-guy.finder-guy--expr-expressionless .fg-mouth {
  animation: fg-expressionless-mouth 2000ms ease-in-out;
}

/* ==========================================================================
   HOVER: PERK UP — Dedicated hover animation.
   Only fires when visible and NOT mid-expression.
   Gentle upward lift + tilt + mouth widen = "noticed you" reaction.
   ========================================================================== */
@keyframes fg-hover-body {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  30% { transform: translateY(-3px) rotate(-3deg); }
  65% { transform: translateY(-1px) rotate(-1deg); }
}

@keyframes fg-hover-pupils {
  0%, 100% { transform: translateY(0); }
  30%, 70% { transform: translateY(-1px); }
}

@keyframes fg-hover-mouth {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  25%, 65% { transform: scaleX(1.15) scaleY(1.1); }
}

.finder-guy.finder-guy--visible:not([class*="--expr-"]):hover .finder-guy__character {
  animation: fg-hover-body 500ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--visible:not([class*="--expr-"]):hover .fg-pupil {
  animation: fg-hover-pupils 500ms var(--fg-curve-playful);
}
.finder-guy.finder-guy--visible:not([class*="--expr-"]):hover .fg-mouth {
  animation: fg-hover-mouth 500ms var(--fg-curve-playful);
}

/* ==========================================================================
   GRAPHICS TIER ADAPTATIONS
   Simpler animations for lower-end hardware.
   ========================================================================== */

/* Low tier: disable complex animations, use simple fade */
.lg-quality-low .finder-guy--peek-slide,
.lg-quality-low .finder-guy--peek-pop,
.lg-quality-low .finder-guy--peek-swing {
  animation: fg-peek-simple 400ms ease-out forwards;
}

.lg-quality-low .finder-guy--hide-slide,
.lg-quality-low .finder-guy--hide-shrink,
.lg-quality-low .finder-guy--hide-tumble {
  animation: fg-hide-simple 300ms ease-in forwards;
}

@keyframes fg-peek-simple {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fg-hide-simple {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  100% {
    opacity: 0;
    transform: translateY(50%);
  }
}

/* Low tier: no idle float, no idle blink, no split animations */
.lg-quality-low .finder-guy--visible .finder-guy__character {
  animation: none;
}

.lg-quality-low .finder-guy--visible .fg-eyelid {
  animation: none;
}

.lg-quality-low .finder-guy--expr-split .fg-half-left,
.lg-quality-low .finder-guy--expr-split .fg-half-right {
  animation: none;
}

/* Low tier: simpler shadow */
.lg-quality-low .finder-guy__character {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.lg-quality-low .finder-guy--visible:hover .finder-guy__character {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

/* Medium tier: keep all animations but disable idle float */
.lg-quality-medium .finder-guy--visible .finder-guy__character {
  animation: none;
}

/* ==========================================================================
   iOS / MOBILE HIDING
   ========================================================================== */
.desktop--ios .finder-guy {
  display: none;
}

/* ==========================================================================
   DEBUG MODE
   ========================================================================== */
.finder-guy--debug {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  z-index: 9999;
}