/* =============================================================================
   Utility Classes - Apple Liquid Glass Aesthetic
   ============================================================================= */

/* =============================================================================
   Keyframe Animations
   ============================================================================= */

/* Entrance Animations */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Card entrance with rotation */
@keyframes cardEnterLeft {
  from { opacity: 0; transform: rotate(-6deg) translateX(-30px) translateY(20px); }
  to { opacity: 1; transform: rotate(-6deg) translateX(0) translateY(0); }
}

@keyframes cardEnterRight {
  from { opacity: 0; transform: rotate(4deg) translateX(30px) translateY(-20px); }
  to { opacity: 1; transform: rotate(4deg) translateX(0) translateY(0); }
}

/* Ambient/Idle Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes floatSubtle {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.02); opacity: 0.9; }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 1; }
  50% { transform: translateX(-50%) translateY(4px); opacity: 0.5; }
}

/* Glow Animations */
@keyframes pulseGlow {
  0%, 100% { box-shadow: var(--shadow-card), 0 0 20px rgba(194, 65, 12, 0.15); }
  50% { box-shadow: var(--shadow-card), 0 0 40px rgba(194, 65, 12, 0.25); }
}

@keyframes pulseGlowSuccess {
  0%, 100% { box-shadow: 0 0 15px rgba(34, 197, 94, 0.2); }
  50% { box-shadow: 0 0 30px rgba(34, 197, 94, 0.4); }
}

@keyframes pulseGlowWarning {
  0%, 100% { box-shadow: 0 0 15px rgba(245, 158, 11, 0.2); }
  50% { box-shadow: 0 0 30px rgba(245, 158, 11, 0.4); }
}

@keyframes glowRing {
  0% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0.4); }
  70% { box-shadow: 0 0 0 10px rgba(194, 65, 12, 0); }
  100% { box-shadow: 0 0 0 0 rgba(194, 65, 12, 0); }
}

/* Loading Animations */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes shimmerGlass {
  0% { background-position: -200% 0; opacity: 0.5; }
  50% { opacity: 0.8; }
  100% { background-position: 200% 0; opacity: 0.5; }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Success/Celebration Animations */
@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes bounceIn {
  0% { transform: scale(0); }
  50% { transform: scale(1.1); }
  70% { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes checkmark {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}

@keyframes confettiBurst {
  0% { transform: scale(0) rotate(0deg); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: scale(1.5) rotate(180deg); opacity: 0; }
}

/* Gradient Mesh Animation */
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes ambientGlow {
  0%, 100% {
    background-position: 0% 0%;
    filter: brightness(1);
  }
  50% {
    background-position: 100% 100%;
    filter: brightness(1.05);
  }
}

/* =============================================================================
   Animation Utility Classes
   ============================================================================= */

/* Apply animation */
.animate-fade-in { animation: fadeIn var(--duration-normal) var(--ease-out) forwards; }
.animate-fade-up { animation: fadeUp var(--duration-normal) var(--ease-out) forwards; }
.animate-fade-down { animation: fadeDown var(--duration-normal) var(--ease-out) forwards; }
.animate-fade-in-scale { animation: fadeInScale var(--duration-normal) var(--ease-spring) forwards; }
.animate-slide-in-left { animation: slideInLeft var(--duration-normal) var(--ease-out) forwards; }
.animate-slide-in-right { animation: slideInRight var(--duration-normal) var(--ease-out) forwards; }

/* Ambient animations */
.animate-float { animation: float 3s var(--ease-smooth) infinite; }
.animate-float-subtle { animation: floatSubtle 4s var(--ease-smooth) infinite; }
.animate-breathe { animation: breathe 4s var(--ease-smooth) infinite; }
.animate-pulse-glow { animation: pulseGlow 2s var(--ease-smooth) infinite; }

/* Loading states */
.animate-spin { animation: spin 1s linear infinite; }
.animate-shimmer {
  animation: shimmer 1.5s linear infinite;
  background: linear-gradient(
    90deg,
    var(--c-border) 25%,
    var(--c-base) 50%,
    var(--c-border) 75%
  );
  background-size: 200% 100%;
}
.animate-pulse { animation: pulse 2s var(--ease-smooth) infinite; }

/* Celebration */
.animate-scale-in { animation: scaleIn var(--duration-normal) var(--ease-spring) forwards; }
.animate-bounce-in { animation: bounceIn var(--duration-slow) var(--ease-spring) forwards; }

/* Animation delays (staggered entries) */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }
.delay-5 { animation-delay: 250ms; }
.delay-6 { animation-delay: 300ms; }

/* =============================================================================
   Visibility Utilities
   ============================================================================= */

.hidden { display: none !important; }
.invisible { visibility: hidden; }
.opacity-0 { opacity: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-100 { opacity: 1; }

/* =============================================================================
   Display Utilities
   ============================================================================= */

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.block { display: block; }
.inline-block { display: inline-block; }

/* =============================================================================
   Spacing Utilities
   ============================================================================= */

.mt-xs { margin-top: var(--space-xs); }
.mt-s { margin-top: var(--space-s); }
.mt-m { margin-top: var(--space-m); }
.mt-l { margin-top: var(--space-l); }

.mb-xs { margin-bottom: var(--space-xs); }
.mb-s { margin-bottom: var(--space-s); }
.mb-m { margin-bottom: var(--space-m); }
.mb-l { margin-bottom: var(--space-l); }

.gap-xs { gap: var(--space-xs); }
.gap-s { gap: var(--space-s); }
.gap-m { gap: var(--space-m); }
.gap-l { gap: var(--space-l); }

/* =============================================================================
   Text Utilities
   ============================================================================= */

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-soft { color: var(--c-text-soft); }
.text-accent { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-warning { color: var(--c-warning); }
.text-error { color: var(--c-error); }

.font-display { font-family: var(--ff-display); }
.font-body { font-family: var(--ff-body); }

.font-light { font-weight: 300; }
.font-normal { font-weight: 400; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }

/* =============================================================================
   Border Radius Utilities
   ============================================================================= */

.rounded-xs { border-radius: var(--radius-xs); }
.rounded-s { border-radius: var(--radius-s); }
.rounded-m { border-radius: var(--radius-m); }
.rounded-l { border-radius: var(--radius-l); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* =============================================================================
   Screen Reader Only
   ============================================================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =============================================================================
   Glass Bevel Border - Apple's Lighting Effect
   Light appears to hit from upper-left, creating realistic glass depth
   ============================================================================= */

.glass-bevel {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.glass-bevel::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  /* Diagonal gradient: 135deg creates smooth edge transitions
     Bright at top-left & bottom-right, nearly invisible at top-right & bottom-left */
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.85) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 1;
}

/* Variant: Stronger bevel for hero sections */
.glass-bevel--strong::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

/* Variant: Subtle bevel for nested elements */
.glass-bevel--subtle::before {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.6) 0%,
    rgba(255, 255, 255, 0.02) 50%,
    rgba(255, 255, 255, 0.6) 100%
  );
}

/* =============================================================================
   Reduced Motion Support
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in,
  .animate-fade-up,
  .animate-fade-down,
  .animate-fade-in-scale,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-float,
  .animate-float-subtle,
  .animate-breathe,
  .animate-pulse-glow,
  .animate-scale-in,
  .animate-bounce-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .animate-shimmer,
  .animate-spin,
  .animate-pulse {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}