/**
 * Ferni Showcase - Pixar Luxo Jr. Style Animation System
 * 
 * CORE PRINCIPLE: Expression comes from EYE SHAPE, not decorations.
 * Like Pixar's Luxo lamp, Ferni expresses everything through:
 * 1. Eye scale transforms (scaleX, scaleY on .eye-white)
 * 2. Gaze direction (translate on .eyes-group)
 * 3. Head tilts (transform on .ferni-avatar body)
 * 4. Subtle body language
 * 
 * NO sparkles, NO bouncy celebrations, NO over-the-top effects.
 * LUXO STYLE: opaque white eyes, NO pupils. Emotion from shape only.
 */

/* ═══════════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-spring-heavy: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --ease-gentle: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-organic: cubic-bezier(0.23, 1, 0.32, 1);
  
  --glow-sage: rgba(74, 103, 65, 0.4);
  --glow-teal: rgba(58, 107, 115, 0.45);
  --glow-warm: rgba(255, 180, 120, 0.45);
  --glow-golden: rgba(196, 162, 101, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BASE AVATAR STYLES
   ═══════════════════════════════════════════════════════════════════════════════ */

.ferni-avatar {
  --size: 180px;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0 auto var(--space-8, 32px);
  cursor: pointer;
  z-index: 10;
  transform-origin: center bottom;
  transition: transform 0.4s var(--ease-spring);
}

.avatar-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   PRESENCE & GLOW RINGS
   ═══════════════════════════════════════════════════════════════════════════════ */

.presence-ring {
  fill: none;
  stroke: var(--ferni, var(--color-ferni));
  stroke-width: 1.5;
  opacity: 0.3;
  transition: all 0.4s var(--ease-gentle);
  transform-origin: center center;
}

.glow-ring {
  fill: none;
  stroke: var(--glow-sage);
  stroke-width: 3;
  filter: blur(4px);
  opacity: 0.4;
  transition: all 0.5s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BREATHING - Subtle life
   ═══════════════════════════════════════════════════════════════════════════════ */

.ferni-avatar.breathing .avatar-body {
  animation: breathe 4s ease-in-out infinite;
}

.ferni-avatar.breathing .presence-ring {
  animation: ringBreathe 4s ease-in-out infinite;
  animation-delay: 0.3s;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scaleY(1.018) scaleX(0.994); }
}

@keyframes ringBreathe {
  0%, 100% { transform: scale(1); opacity: 0.3; }
  50% { transform: scale(1.008); opacity: 0.35; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   BLINKING - Natural eye blinks
   ═══════════════════════════════════════════════════════════════════════════════ */

.eye-white {
  transform-origin: center center;
  /* Smooth eye shape changes - the heart of Luxo expression! 
     SVG attributes like rx/ry need explicit transition properties */
  transition: 
    rx 0.4s var(--ease-spring),
    ry 0.4s var(--ease-spring),
    transform 0.4s var(--ease-spring);
}

.eye-left, .eye-right {
  transform-origin: center center;
  /* Smooth transitions for ellipse dimensions */
  transition: 
    rx 0.4s var(--ease-spring),
    ry 0.4s var(--ease-spring),
    transform 0.4s var(--ease-spring);
}

.ferni-avatar.blinking .eye-white {
  animation: blink 0.15s ease-in-out;
}

@keyframes blink {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.1); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GAZE DRIFT - Luxo-style looking around
   ═══════════════════════════════════════════════════════════════════════════════ */

.eyes-group {
  transition: transform 0.8s var(--ease-organic);
}

.ferni-avatar.gazing .eyes-group {
  animation: gazeDrift 8s ease-in-out infinite;
}

@keyframes gazeDrift {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(1px, -0.5px); }
  50% { transform: translate(-0.5px, 0.5px); }
  75% { transform: translate(0.5px, 0px); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SMILE CREASES & SPARKLES - Hidden by default (Luxo is subtle!)
   ═══════════════════════════════════════════════════════════════════════════════ */

.smile-crease {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sparkle-group {
  opacity: 0;
  display: none; /* NO sparkles in Luxo style! */
}

/* ═══════════════════════════════════════════════════════════════════════════════
   EXPRESSION STATES - All about the EYES (Luxo Jr. inspired)
   
   Key transforms that create Luxo-style expressions:
   - .eye-white: scaleY (openness), scaleX (width)
   - .eyes-group: translate (gaze direction)
   - .ferni-avatar: rotate/translate (head tilt/position)
   ═══════════════════════════════════════════════════════════════════════════════ */

/* NEUTRAL - Ready and present */
.ferni-avatar[data-mood="neutral"] .eye-white {
  transform: scaleY(1) scaleX(1);
}

/* LISTENING - Eyes slightly wider, leaning in (Luxo noticing something) */
.ferni-avatar[data-mood="listening"] {
  transform: translateY(-3px);
}
.ferni-avatar[data-mood="listening"] .eye-white {
  transform: scaleY(1.12);
}
.ferni-avatar[data-mood="listening"] .presence-ring {
  opacity: 0.4;
}

/* CURIOUS - Head tilt, asymmetric eyes (Luxo's signature move!) */
.ferni-avatar[data-mood="curious"] {
  transform: rotate(4deg) translateY(-2px);
}
.ferni-avatar[data-mood="curious"] .eyes-group {
  transform: translate(2px, -2px);
}
.ferni-avatar[data-mood="curious"] .eye-white {
  transform: scaleY(1.08);
}
.ferni-avatar[data-mood="curious"] .eye-left {
  transform: scaleY(1.12);
}

/* THINKING - Head tilted, eyes to the side, slight squint */
.ferni-avatar[data-mood="thinking"] {
  transform: rotate(2deg);
}
.ferni-avatar[data-mood="thinking"] .eyes-group {
  transform: translate(4px, -2px);
}
.ferni-avatar[data-mood="thinking"] .eye-white {
  transform: scaleY(0.88);
}

/* PONDERING - Deeper thought, more tilt, drifting gaze */
.ferni-avatar[data-mood="pondering"] {
  transform: rotate(5deg) translateY(-3px);
}
.ferni-avatar[data-mood="pondering"] .eye-white {
  transform: scaleY(0.82) scaleX(0.96);
}
.ferni-avatar[data-mood="pondering"] .eyes-group {
  transform: translate(5px, -3px);
}

/* WARM - Soft squint, gentle (Luxo's friendly look) */
.ferni-avatar[data-mood="warm"] .eye-white {
  transform: scaleY(0.85) scaleX(1.04);
}
.ferni-avatar[data-mood="warm"] .smile-crease {
  opacity: 0.5;
}

/* ATTENTIVE - Wide eyes, very present (Luxo spotting something) */
.ferni-avatar[data-mood="attentive"] {
  transform: translateY(-4px);
}
.ferni-avatar[data-mood="attentive"] .eye-white {
  transform: scaleY(1.15) scaleX(1.03);
}
.ferni-avatar[data-mood="attentive"] .presence-ring {
  opacity: 0.5;
}

/* INTERESTED - Engaged, focused */
.ferni-avatar[data-mood="interested"] .eye-white {
  transform: scaleY(1.08) scaleX(1.02);
}
.ferni-avatar[data-mood="interested"] .eyes-group {
  transform: translate(0, -1px);
}

/* CARING - Tilted with soft eyes */
.ferni-avatar[data-mood="caring"] {
  transform: translateY(-2px) rotate(-2deg);
}
.ferni-avatar[data-mood="caring"] .eye-white {
  transform: scaleY(0.85) scaleX(1.03);
}
.ferni-avatar[data-mood="caring"] .smile-crease {
  opacity: 0.6;
}

/* EMPATHETIC - Understanding squint, gentle tilt */
.ferni-avatar[data-mood="empathetic"] {
  transform: rotate(-1deg);
}
.ferni-avatar[data-mood="empathetic"] .eye-white {
  transform: scaleY(0.82) scaleX(1.02);
}
.ferni-avatar[data-mood="empathetic"] .eyes-group {
  transform: translate(0, 1px);
}

/* HAPPY - Squinted eyes (genuine smile) - NOT bouncy! */
.ferni-avatar[data-mood="happy"] {
  transform: translateY(-2px);
}
.ferni-avatar[data-mood="happy"] .eye-white {
  transform: scaleY(0.75) scaleX(1.08);
}
.ferni-avatar[data-mood="happy"] .smile-crease {
  opacity: 0.8;
}

/* PLAYFUL - Asymmetric Luxo look (one eye slightly squinted) */
.ferni-avatar[data-mood="playful"] {
  transform: rotate(3deg) translateY(-2px);
}
.ferni-avatar[data-mood="playful"] .eye-white {
  transform: scaleY(0.9) scaleX(1.05);
}
.ferni-avatar[data-mood="playful"] .eye-left {
  transform: scaleY(0.82) scaleX(1.05);
}

/* CONFIDENT - Steady, subtle squint */
.ferni-avatar[data-mood="confident"] {
  transform: translateY(-1px);
}
.ferni-avatar[data-mood="confident"] .eye-white {
  transform: scaleY(0.88) scaleX(1.02);
}
.ferni-avatar[data-mood="confident"] .smile-crease {
  opacity: 0.4;
}

/* SURPRISED - Wide eyes, slight stretch (Luxo startled!) */
.ferni-avatar[data-mood="surprised"] {
  transform: scaleY(1.02) scaleX(0.99);
}
.ferni-avatar[data-mood="surprised"] .eye-white {
  transform: scaleY(1.2) scaleX(1.08);
}

/* CONFUSED - Head tilt, asymmetric (Luxo puzzled) */
.ferni-avatar[data-mood="confused"] {
  transform: rotate(6deg);
}
.ferni-avatar[data-mood="confused"] .eye-white {
  transform: scaleY(1.02);
}
.ferni-avatar[data-mood="confused"] .eye-left {
  transform: scaleY(0.9);
}

/* CONCERNED - Eyes focused, gentle tilt */
.ferni-avatar[data-mood="concerned"] {
  transform: rotate(-2deg) translateY(1px);
}
.ferni-avatar[data-mood="concerned"] .eye-white {
  transform: scaleY(1.05);
}
.ferni-avatar[data-mood="concerned"] .eyes-group {
  transform: translateY(1px);
}

/* WINKING - One eye closed (classic!) */
.ferni-avatar[data-mood="winking"] {
  transform: rotate(2deg) translateY(-1px);
}
.ferni-avatar[data-mood="winking"] .eye-left {
  transform: scaleY(0.08) scaleX(1.2);
}
.ferni-avatar[data-mood="winking"] .eye-right {
  transform: scaleY(1.05);
}
.ferni-avatar[data-mood="winking"] .smile-crease {
  opacity: 0.5;
}

/* SLEEPY - Heavy lids, droopy */
.ferni-avatar[data-mood="sleepy"] {
  transform: scaleY(0.99);
}
.ferni-avatar[data-mood="sleepy"] .eye-white {
  transform: scaleY(0.4);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   GLOW COLOR CHANGES BY MOOD
   ═══════════════════════════════════════════════════════════════════════════════ */

.ferni-avatar[data-mood="thinking"] .glow-ring,
.ferni-avatar[data-mood="pondering"] .glow-ring,
.ferni-avatar[data-mood="curious"] .glow-ring {
  stroke: var(--glow-teal);
}

.ferni-avatar[data-mood="warm"] .glow-ring,
.ferni-avatar[data-mood="caring"] .glow-ring,
.ferni-avatar[data-mood="empathetic"] .glow-ring,
.ferni-avatar[data-mood="happy"] .glow-ring {
  stroke: var(--glow-warm);
}

.ferni-avatar[data-mood="playful"] .glow-ring,
.ferni-avatar[data-mood="winking"] .glow-ring,
.ferni-avatar[data-mood="confident"] .glow-ring {
  stroke: var(--glow-golden);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   MICRO-EXPRESSIONS - Quick subliminal flashes (40-150ms)
   ═══════════════════════════════════════════════════════════════════════════════ */

.ferni-avatar.micro-recognition .eye-white {
  animation: microRecognition 80ms ease-out;
}

@keyframes microRecognition {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.12); }
}

.ferni-avatar.micro-interest .eye-white {
  animation: microInterest 90ms ease-out;
}

@keyframes microInterest {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.1) scaleX(1.02); }
}

.ferni-avatar.micro-warmth .eye-white {
  animation: microWarmth 100ms ease-out;
}

@keyframes microWarmth {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(0.88) scaleX(1.04); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   INTERACTIVE STATES
   ═══════════════════════════════════════════════════════════════════════════════ */

.ferni-avatar:hover {
  transform: translateY(-3px);
}

.ferni-avatar:hover .eye-white {
  transform: scaleY(1.08);
}

.ferni-avatar:hover .presence-ring {
  opacity: 0.45;
  stroke-width: 2;
}

.ferni-avatar:active {
  transform: translateY(0) scale(0.98);
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .ferni-avatar,
  .ferni-avatar.breathing .avatar-body,
  .ferni-avatar.breathing .presence-ring,
  .ferni-avatar.gazing .eyes-group,
  .eye-white {
    animation: none !important;
    transition: none !important;
  }
}