/**
 * Liquid Timer Background Styles
 *
 * Provides a visual background fill that grows from bottom-to-top
 * behind the steps list to indicate elapsed time vs planned duration.
 *
 * Design Philosophy:
 * - Gentle, liquid-like transitions (0.8s) for calm flow state
 * - Low opacity to avoid distraction from content
 * - Theme-aware gradients (yang/yin)
 * - Accessible with reduced motion and high contrast support
 */

/* =============================================================================
   Timer Background Container
   ============================================================================= */

.timer-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10;

  /* Purely visual - never blocks interactions */
  pointer-events: none;
}

/* =============================================================================
   Timer Fill Element
   ============================================================================= */

/**
 * Animated fill element that grows from bottom to top
 * Height controlled by JavaScript (0% to 100%)
 *
 * Transition: 0.8s provides smooth, liquid-like feel
 * Aligns with "flow state preservation" philosophy
 */
.timer-fill {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;  /* Initial state, updated by JavaScript */

  /* Smooth, liquid-like transition */
  transition: height 0.8s ease-out;

  /* Prevent interaction */
  pointer-events: none;
}

/* =============================================================================
   Yang Theme (Action-Oriented, Warm)
   ============================================================================= */

/**
 * Yang theme: Warm orange gradients for execution/action contexts
 * Light mode: Subtle presence to avoid distraction
 */
.timer-fill-yang {
  background: linear-gradient(
    to top,
    rgba(251, 146, 60, 0.4),    /* Much more visible */
    rgba(251, 146, 60, 0.2)     /* Much more visible */
  );
}

/**
 * Dark mode: Slightly more vibrant to maintain visibility
 */
.dark .timer-fill-yang {
  background: linear-gradient(
    to top,
    rgba(251, 146, 60, 0.10),
    rgba(251, 146, 60, 0.20)
  );
}

/* =============================================================================
   Yin Theme (Reflective, Cool)
   ============================================================================= */

/**
 * Yin theme: Cool purple gradients for planning/reflection contexts
 * Light mode: Subtle presence to avoid distraction
 */
.timer-fill-yin {
  background: linear-gradient(
    to top,
    rgba(139, 92, 246, 0.08),    /* Lighter at bottom */
    rgba(139, 92, 246, 0.15)     /* Deeper at top */
  );
}

/**
 * Dark mode: Slightly more vibrant to maintain visibility
 */
.dark .timer-fill-yin {
  background: linear-gradient(
    to top,
    rgba(139, 92, 246, 0.10),
    rgba(139, 92, 246, 0.20)
  );
}

/* =============================================================================
   Accessibility
   ============================================================================= */

/**
 * Reduced motion: Respect user preferences
 * Users with vestibular disorders get instant updates
 */
@media (prefers-reduced-motion: reduce) {
  .timer-fill {
    transition: none;
  }
}

/**
 * High contrast: Increase visibility
 * Helps users with visual impairments
 */
@media (prefers-contrast: high) {
  .timer-fill-yang,
  .timer-fill-yin {
    background: linear-gradient(
      to top,
      rgba(251, 146, 60, 0.20),  /* Increased opacity */
      rgba(251, 146, 60, 0.30)
    );
  }
}

/* =============================================================================
   Timer Behavior Notes
   ============================================================================= */

/**
 * Timer at 100% (Duration Exceeded):
 * - JavaScript caps height at 100% (no overflow)
 * - No additional visual pressure or warnings
 * - Steady state maintained for "something is something" philosophy
 *
 * This aligns with the app's principle of avoiding guilt-inducing
 * time pressure - the timer provides feedback without judgment.
 */