/**
 * Mobile Utilities - Lazy-loaded for mobile-specific features
 * NOTE: This file is dynamically imported and processed independently.
 * Do NOT use @layer utilities or @apply — they require @tailwind directives.
 * Use plain CSS only.
 */

/* ─── Safe area & layout utilities (moved from index.css for smaller critical CSS) ─── */

.pl-safe {
  padding-left: env(safe-area-inset-left);
}

.pr-safe {
  padding-right: env(safe-area-inset-right);
}

.mt-safe {
  margin-top: env(safe-area-inset-top);
}

.mb-safe {
  margin-bottom: env(safe-area-inset-bottom);
}

/* Despia safe area utilities using CSS variables */
.safe-area-top {
  padding-top: var(--safe-area-top);
}

.safe-area-bottom {
  padding-bottom: var(--safe-area-bottom);
}

.safe-area-left {
  padding-left: var(--safe-area-left);
}

.safe-area-right {
  padding-right: var(--safe-area-right);
}

/* GPU-accelerated sticky header for smooth scroll */
.sticky-header-optimized {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Contain layout to prevent scroll jank */
.contain-layout {
  contain: layout style;
}

.contain-paint {
  contain: paint;
}

.contain-strict {
  contain: strict;
}

/* Trademark symbol styling */
.tm {
  font-size: 0.5em;
  font-weight: 300;
  vertical-align: super;
  line-height: 0;
  letter-spacing: -0.05em;
  opacity: 0.7;
  font-family: system-ui, -apple-system, sans-serif;
}

/* Mobile-first utility classes — plain CSS equivalents */
.mobile-container {
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) {
  .mobile-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
  .mobile-container { max-width: 1024px; margin-left: auto; margin-right: auto; padding-left: 2rem; padding-right: 2rem; }
}

.mobile-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 640px) {
  .mobile-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mobile-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.mobile-hero { height: 12rem; }
@media (min-width: 640px) { .mobile-hero { height: 16rem; } }
@media (min-width: 1024px) { .mobile-hero { height: 20rem; } }

.mobile-section { padding-top: 1.5rem; padding-bottom: 1.5rem; }
@media (min-width: 640px) { .mobile-section { padding-top: 2rem; padding-bottom: 2rem; } }
@media (min-width: 1024px) { .mobile-section { padding-top: 3rem; padding-bottom: 3rem; } }

.mobile-heading { font-size: 1.5rem; line-height: 2rem; font-weight: 700; }
@media (min-width: 640px) { .mobile-heading { font-size: 1.875rem; line-height: 2.25rem; } }
@media (min-width: 1024px) { .mobile-heading { font-size: 2.25rem; line-height: 2.5rem; } }

.mobile-subheading { font-size: 1.125rem; line-height: 1.75rem; }
@media (min-width: 640px) { .mobile-subheading { font-size: 1.25rem; line-height: 1.75rem; } }
@media (min-width: 1024px) { .mobile-subheading { font-size: 1.5rem; line-height: 2rem; } }

.mobile-text { font-size: 0.875rem; line-height: 1.25rem; }
@media (min-width: 640px) { .mobile-text { font-size: 1rem; line-height: 1.5rem; } }

.mobile-button { width: 100%; }
@media (min-width: 640px) { .mobile-button { width: auto; } }

/* Touch-friendly tap targets - 44px minimum for accessibility */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Horizontal scroll container for filters/tabs */
.mobile-scroll-x {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -ms-overflow-style: none;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.mobile-scroll-x::-webkit-scrollbar { display: none; }

/* Fluid container that prevents horizontal overflow */
.fluid-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Prevent layout shifts during navigation */
.page-stable {
  contain: layout style;
}

/* Mobile-safe card that stacks and wraps properly */
.mobile-safe-card {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Responsive text that truncates on mobile */
.mobile-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .mobile-truncate { white-space: normal; overflow: visible; }
}

/* Mobile-first flex wrap utility */
.mobile-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Touch-optimized button spacing */
.touch-spacing { gap: 0.75rem; }
@media (min-width: 640px) { .touch-spacing { gap: 0.5rem; } }

/* Mobile bottom action area */
.mobile-bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid hsl(var(--border));
  padding: 1rem;
  padding-bottom: env(safe-area-inset-bottom);
  z-index: 40;
}

/* Responsive table wrapper */
.mobile-table-wrapper {
  width: 100%;
  overflow-x: auto;
  margin-left: -1rem;
  margin-right: -1rem;
  padding-left: 1rem;
  padding-right: 1rem;
  -webkit-overflow-scrolling: touch;
}
@media (min-width: 640px) {
  .mobile-table-wrapper { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
}

/* Native-like momentum scrolling */
.momentum-scroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Prevent text selection on interactive elements */
.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* GPU-accelerated animations for smoother mobile performance */
.gpu-accelerated {
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Mobile-first native animations */
@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes bounce-in {
  0% { opacity: 0; transform: scale(0.3); }
  50% { transform: scale(1.05); }
  70% { transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

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

.animate-slide-in-up {
  animation: slide-in-up 0.3s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

.animate-bounce-in {
  animation: bounce-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--muted)) 0%,
    hsl(var(--muted-foreground) / 0.1) 50%,
    hsl(var(--muted)) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

/* Mobile scroll snap utilities */
.snap-x {
  scroll-snap-type: x mandatory;
}

.snap-start {
  scroll-snap-align: start;
}

.snap-center {
  scroll-snap-align: center;
}

/* Pull to refresh indicator */
@keyframes pull-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-pull-rotate {
  animation: pull-rotate 1s linear infinite;
}

/* Touch feedback */
.touch-feedback {
  transition: all 150ms;
}

.touch-feedback:active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* Full-width card style */
.mobile-full-card {
  width: 100%;
  border-radius: 1rem;
  overflow: hidden;
  background: hsl(var(--card));
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Sticky header with blur */
.mobile-sticky-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid hsl(var(--border) / 0.3);
}

@keyframes slide-up {
  from { transform: translateY(100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out forwards;
}

/* Native mobile touch optimizations */
.touch-none { touch-action: none; }
.select-none { user-select: none; -webkit-user-select: none; }

/* Improved touch feedback */
@media (hover: none) and (pointer: coarse) {
  .active\:scale-95:active { transform: scale(0.95); }
  .active\:scale-\[0\.98\]:active { transform: scale(0.98); }
}

/* Android-optimized GPU-accelerated animations */
@keyframes slide-up-fade {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-slide-up-fade {
  animation: slide-up-fade 0.4s ease-out forwards;
  opacity: 0;
  will-change: transform, opacity;
}

@keyframes scale-fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.animate-scale-fade-in {
  animation: scale-fade-in 0.3s ease-out forwards;
  opacity: 0;
  will-change: transform, opacity;
}

/* Animation delay utilities */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.duration-500 { animation-duration: 500ms; }
.duration-1000 { animation-duration: 1000ms; }

/* Mobile-first 2-column card grid */
.mobile-card-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

/* Ensure no horizontal overflow globally */
.page-container {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

/* Sticky bottom CTA pattern */
.mobile-sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  padding-bottom: env(safe-area-inset-bottom);
  background: hsl(var(--background) / 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid hsl(var(--border));
  z-index: 40;
}

/* Keyboard-aware input container */
.keyboard-aware-input {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: env(safe-area-inset-bottom);
  transition: transform 200ms;
}

/* Page title scale for mobile */
.page-title { font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }
@media (min-width: 640px) { .page-title { font-size: 1.5rem; line-height: 2rem; } }
@media (min-width: 1024px) { .page-title { font-size: 1.875rem; line-height: 2.25rem; } }

/* Section title scale for mobile */
.section-title { font-size: 1.125rem; line-height: 1.75rem; font-weight: 600; }
@media (min-width: 640px) { .section-title { font-size: 1.25rem; line-height: 1.75rem; } }

/* ─── Feature-specific animations ─── */

/* Floating emoji animation for live streams */
@keyframes heart-float {
  0% { opacity: 1; transform: translateY(0) scale(0.5) rotate(0deg); }
  30% { opacity: 1; transform: translateY(-60px) scale(1.1) rotate(var(--heart-rotate, 5deg)); }
  100% { opacity: 0; transform: translateY(-200px) scale(1.2) rotate(var(--heart-rotate, -10deg)); }
}

.animate-heart-float {
  animation: heart-float var(--heart-duration, 2.8s) ease-out forwards;
  will-change: transform, opacity;
}

/* Legacy float-up */
@keyframes float-up {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  50% { opacity: 0.8; transform: translateY(-60px) scale(1.2); }
  100% { opacity: 0; transform: translateY(-120px) scale(0.8); }
}

.animate-float-up {
  animation: float-up 3s ease-out forwards;
}

/* Camera button pulse */
@keyframes cam-pulse {
  0%, 100% { box-shadow: 0 0 0 0 hsla(0, 0%, 100%, 0.3); }
  50% { box-shadow: 0 0 0 8px hsla(0, 0%, 100%, 0); }
}

.animate-cam-pulse {
  animation: cam-pulse 2s ease-in-out infinite;
}

/* Client Interface pill pulse ring */
@keyframes pulse-ring {
  0% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1); opacity: 0; }
}

/* Gift send animation */
@keyframes gift-send {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(0.8) translateY(-20px); opacity: 0; }
}

.animate-gift-send {
  animation: gift-send 0.8s ease-out forwards;
}

/* Apple Watch micro-viewport support */
@media (max-width: 200px) {
  html { font-size: 10px; }
  .container { padding-left: 4px; padding-right: 4px; }
  nav > div > div { height: 36px; }
  .pt-safe { padding-top: max(env(safe-area-inset-top, 0px), var(--safe-area-top, 0px)); }
  .pb-safe { padding-bottom: env(safe-area-inset-bottom, 0px); }
}