@tailwind base;
@tailwind components;
@tailwind utilities;

/*
 * Component-specific styles
 * Inlined to avoid @import issues with Propshaft
 */

/* ============================================
 * Header Component Animations
 * ============================================ */

@keyframes bounceChar {
  0% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
  4% {
    transform: translateY(0) scaleY(0.85) scaleX(1.08);
  }
  8% {
    transform: translateY(-6px) scaleY(1.08) scaleX(0.96);
  }
  11.5% {
    transform: translateY(-13px) scaleY(1.1) scaleX(0.95);
  }
  15% {
    transform: translateY(-6px) scaleY(1.03) scaleX(0.98);
  }
  19% {
    transform: translateY(0) scaleY(0.8) scaleX(1.12);
  }
  21% {
    transform: translateY(-2px) scaleY(1.05) scaleX(0.97);
  }
  23%, 100% {
    transform: translateY(0) scaleY(1) scaleX(1);
  }
}

.animate-bounce-char-1,
.animate-bounce-char-2 {
  display: inline-block;
  position: relative;
  animation: bounceChar 2.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

.animate-bounce-char-1 {
  animation-delay: 0.4s;
}

.animate-bounce-char-2 {
  animation-delay: 1.0s;
}

.brand-blur-yellow::before,
.brand-blur-orange::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.brand-blur-yellow::before {
  background-color: #FEE500;
  opacity: 2;
  filter: blur(6px);
}

.brand-blur-orange::before {
  background-color: #FF6F0F;
  opacity: 0.6;
  filter: blur(6px);
}

.brand-blur-yellow-small::before,
.brand-blur-orange-small::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.brand-blur-yellow-small::before {
  background-color: #FEE500;
  opacity: 0.8;
  filter: blur(5px);
}

.brand-blur-orange-small::before {
  background-color: #FF6F0F;
  opacity: 0.5;
  filter: blur(5px);
}

/* Inline text with orange blur glow */
.text-blur-orange {
  position: relative;
  display: inline-block;
  padding: 0.125rem 0.5rem;
  isolation: isolate;
}

.text-blur-orange::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #FF6F0F;
  opacity: 0.4;
  filter: blur(8px);
  border-radius: 6px;
  z-index: -1;
  pointer-events: none;
}

@keyframes fadeInChar {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-reveal-char {
  display: inline-block;
  opacity: 0;
  animation: fadeInChar 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ============================================
 * Bottom Navigation Component Styles
 * ============================================ */

.bottom-nav-blur-yellow,
.bottom-nav-blur-orange {
  isolation: isolate;
}

.bottom-nav-blur-yellow::before,
.bottom-nav-blur-orange::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
}

.bottom-nav-blur-yellow::before {
  background-color: #FEE500;
  opacity: 1;
  filter: blur(4px);
}

.bottom-nav-blur-orange::before {
  background-color: #FF6F0F;
  opacity: 0.8;
  filter: blur(4px);
}

/* ============================================
 * Profile Tabs Component - Hide Scrollbar
 * ============================================ */

.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* ============================================
 * Image Viewer Modal Component
 * ============================================ */

/* Modal fade-in animation */
@keyframes fadeInModal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Image scale-in animation */
@keyframes scaleInImage {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.image-viewer-modal {
  animation: fadeInModal 0.2s ease-out;
}

.image-viewer-image {
  animation: scaleInImage 0.3s ease-out;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden;
  padding-right: var(--scrollbar-width, 0px);
}

body.modal-open nav[role="navigation"] {
  padding-right: var(--scrollbar-width, 0px);
}

/* ============================================
 * Login Prompt Bottom Sheet Modal
 * ============================================ */

@keyframes slideUpModal {
  from {
    transform: translateY(100%);
    opacity: 0.8;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes slideDownModal {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0.8;
  }
}

.login-prompt-sheet {
  animation: slideUpModal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.login-prompt-sheet.closing {
  animation: slideDownModal 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}