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

/* Line clamp utilities for text truncation */
@layer utilities {
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }
  
  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  
  .line-clamp-3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }
}

/* Critical performance optimizations */
@layer base {
  /* Optimize font rendering performance */
  * {
    font-synthesis: none;
    text-rendering: optimizeSpeed;
  }
  
  /* CRITICAL: Font metrics overrides to prevent reflow */
  @font-face {
    font-family: 'System Font';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 100%;
    src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Oxygen'), local('Ubuntu'), local('Cantarell'), local('sans-serif');
  }
  
  @font-face {
    font-family: 'System Font';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 100%;
    src: local('system-ui'), local('-apple-system'), local('BlinkMacSystemFont'), local('Segoe UI'), local('Roboto'), local('Oxygen'), local('Ubuntu'), local('Cantarell'), local('sans-serif');
  }
  
  /* CRITICAL: Hero heading font optimization for LCP */
  .hero-heading {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'System Font', sans-serif;
    font-weight: 900;
    contain: layout style;
  }
  
  /* PERFORMANCE: Make all text bolder for better visual appeal */
  body {
    font-weight: 600 !important;
  }
  
  p, span, div, h1, h2, h3, h4, h5, h6 {
    font-weight: 600 !important;
  }
  
  /* Ensure buttons have consistent bold text */
  button, .btn-primary-brutal, .btn-secondary-brutal, .btn-outline-brutal, .btn-learn-more-brutal {
    font-weight: 900 !important;
  }
  
  /* Mobile follow button immediate color updates */
  .mobile-follow-btn {
    transition: none !important;
    -webkit-transition: none !important;
  }
  
  .mobile-follow-btn:active {
    transform: scale(0.98);
  }
  
  /* Optimize scrolling performance */
  * {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
  }
  
  /* CRITICAL: Prevent layout shifts with proper image handling */
  img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Reserve space to prevent layout shift */
    min-height: 1px;
    background-color: hsl(var(--muted));
    /* Prevent layout shift during loading */
    aspect-ratio: attr(width) / attr(height);
  }
  
  /* CRITICAL: Ensure all images have proper dimensions */
  img[width][height] {
    aspect-ratio: attr(width) / attr(height);
  }
  
  /* CRITICAL: Prevent layout shifts on dynamic content */
  .cls-optimized {
    contain: layout style;
    content-visibility: auto;
    will-change: auto;
  }
  
  /* CRITICAL: Ensure consistent dimensions for dynamic elements */
  .dynamic-content {
    min-height: 1px;
    contain: layout style;
  }
  
  /* CRITICAL: Prevent layout shifts from modals and overlays */
  .modal-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    /* Prevent layout shift by reserving space */
    contain: layout style;
  }
  
  /* CRITICAL: Prevent layout shifts from loading states */
  .loading-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    contain: layout style;
  }
  
  /* CRITICAL: Fix CLS issues with animated background elements */
  .fixed > .absolute {
    contain: layout style;
    will-change: transform;
  }
  
  /* CRITICAL: Ensure hero card images have proper dimensions */
  .hero-card-image {
    aspect-ratio: 1/1;
    contain: layout style;
    object-fit: cover;
  }
  
  /* CRITICAL: Prevent layout shifts from animated elements */
  .animate-float,
  .animate-float-reverse,
  .animate-grid-line,
  .animate-particle-float {
    contain: layout style;
    will-change: transform;
  }
  
  /* CRITICAL: Disable animations on mobile to prevent CLS */
  @media (max-width: 768px) {
    .fixed > .absolute {
      animation: none !important;
      transform: none !important;
      contain: layout style paint;
    }
    
    .animate-float,
    .animate-float-reverse,
    .animate-grid-line,
    .animate-particle-float {
      animation: none !important;
      transform: none !important;
      contain: layout style paint;
    }
  }
  
  /* CRITICAL: CSS-only kill switch for background animations on mobile */
  @media (max-width: 768px) {
    .bg-anim,
    .bg-gradient-layer,
    .bg-overlay-wrapper,
    .bg-anim *,
    .bg-gradient-layer * {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      transform: none !important;
      animation: none !important;
      contain: layout paint style !important;
    }
  }
  
  /* CRITICAL: Ensure stable dimensions for hero content */
  .hero-section {
    min-height: 600px;
    contain: layout style;
  }
  
  /* CRITICAL: Stable dimensions for header and hero containers */
  .hero-section,
  .hero-container {
    min-height: 600px;
    contain: layout style;
  }
  
  /* CRITICAL: Ensure hero cards have stable dimensions */
  .hero-card-container {
    aspect-ratio: 9/16;
    contain: layout style;
    min-height: 400px;
  }
  
  .hero-card-container {
    aspect-ratio: 9/16;
    contain: layout style;
  }

  /* Mobile voting optimization - prevent text overflow */
  .voting-options-container {
    max-width: 100%;
    overflow: hidden;
  }

  .voting-option-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
  }

  /* Ensure result bars don't overflow on mobile */
  .result-bar-container {
    max-width: 100%;
    overflow: hidden;
  }

  .result-bar-text {
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.2;
  }

  /* Simple voting optimizations */
  .voting-result-bar {
    min-height: 80px;
    display: flex;
    align-items: center;
  }

  /* Ensure consistent sizing for A and B options */
  .voting-option-container {
    min-height: 80px;
  }

  /* Future-proofing for images */
  .voting-card-with-images {
    --image-height: 200px;
    --content-padding: 1rem;
  }

  .voting-card-with-images .voting-options {
    margin-top: calc(var(--content-padding) * 0.5);
  }
  
  .hero-card-image {
    aspect-ratio: 1/1;
    contain: layout style;
    object-fit: cover;
  }
  
  @keyframes loading-shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
  }
  
  /* PERFORMANCE OPTIMIZED: Simplified animations for better mobile performance */
  .animate-float-slow {
    animation: float-slow 12s ease-in-out infinite;
    will-change: transform;
  }
  
  .animate-float-slow-reverse {
    animation: float-slow-reverse 12s ease-in-out infinite;
    will-change: transform;
  }
  
  .animate-float-medium {
    animation: float-medium 8s ease-in-out infinite;
    will-change: transform;
  }
  
  .animate-pulse-slow {
    animation: pulse-slow 4s ease-in-out infinite;
    will-change: opacity;
  }
  
  .animate-pulse-slow-reverse {
    animation: pulse-slow-reverse 4s ease-in-out infinite;
    will-change: opacity;
  }
  
  .animate-grid-line {
    animation: grid-line 10s linear infinite;
    will-change: transform;
  }
  
  .animate-particle-float {
    animation: particle-float 8s ease-in-out infinite;
    will-change: transform;
  }
  
  .animate-morph-slow {
    animation: morph-slow 15s ease-in-out infinite;
    will-change: transform;
  }
  
  .animate-morph-medium {
    animation: morph-medium 10s ease-in-out infinite;
    will-change: transform;
  }
  
  /* PERFORMANCE: Respect user preferences for reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .animate-float-slow,
    .animate-float-slow-reverse,
    .animate-float-medium,
    .animate-pulse-slow,
    .animate-pulse-slow-reverse,
    .animate-grid-line,
    .animate-particle-float,
    .animate-morph-slow,
    .animate-morph-medium {
      animation: none;
    }
    
    .loading-placeholder {
      animation: none;
      background: #f0f0f0;
    }
  }
  
  /* PERFORMANCE: Optimize for mobile devices */
  @media (max-width: 768px) {
    .animate-float-slow,
    .animate-float-slow-reverse,
    .animate-float-medium,
    .animate-pulse-slow,
    .animate-pulse-slow-reverse,
    .animate-grid-line,
    .animate-particle-float,
    .animate-morph-slow,
    .animate-morph-medium {
      animation-duration: 20s; /* Slower animations on mobile for better performance */
    }
  }
  
  /* CRITICAL: Optimize font loading to prevent FOIT/FOUT */
  /* Using system fonts instead of external fonts */
}

/* Neo-Brutalism Design System - Bold colors, thick borders, harsh shadows */

@layer base {
  :root {
    /* Neo-Brutalist Color Palette */
    --background: 48 14% 96%; /* Off-white #F8F7F4 */
    --foreground: 0 0% 0%; /* Pure black */
    
    --card: 0 0% 100%; /* White cards */
    --card-foreground: 0 0% 0%;
    
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 0%;
    
    /* Bold Primary - Magenta */
    --primary: 300 100% 50%; /* #FF00FF */
    --primary-foreground: 0 0% 100%;
    
    /* Bold Secondary - Cyan */  
    --secondary: 180 100% 50%; /* #00FFFF */
    --secondary-foreground: 0 0% 0%;
    
    /* Accent - Yellow */
    --accent: 48 100% 50%; /* #FFD600 */
    --accent-foreground: 0 0% 0%;
    
    --muted: 0 0% 85%;
    --muted-foreground: 0 0% 25%;
    
    --destructive: 0 100% 50%; /* Bright red */
    --destructive-foreground: 0 0% 100%;
    
    /* Neo-Brutalist borders and elements */
    --border: 0 0% 0%; /* Pure black borders */
    --input: 0 0% 100%;
    --ring: 300 100% 50%; /* Magenta focus ring */
    
    --radius: 0; /* No rounded corners for brutal aesthetic */
    
    /* Brutal shadows */
    --shadow-brutal: 4px 4px 0px hsl(var(--foreground));
    --shadow-brutal-lg: 8px 8px 0px hsl(var(--foreground));
    --shadow-brutal-hover: 6px 6px 0px hsl(var(--foreground));
    
    /* Animation timings */
    --transition-brutal: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    /* Dark mode disabled for Neo-Brutalism - always use light high-contrast */
    --background: 48 14% 96%;
    --foreground: 0 0% 0%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground font-mono;
    font-family: 'Courier New', monospace;
    /* Prevent horizontal overflow */
    overflow-x: hidden;
    /* Ensure proper viewport handling */
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile */
  }

  /* Ensure viewport-aware sizing */
  html {
    height: 100%;
    height: 100dvh;
  }

  h1, h2, h3, h4, h5, h6 {
    @apply font-black;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  /* Prevent content from overflowing viewport */
  .viewport-safe {
    max-height: 100vh;
    max-height: 100dvh;
  }

  .card-viewport-safe {
    max-height: calc(100vh - 2rem);
    max-height: calc(100dvh - 2rem);
  }

  .card-zoom-safe {
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    max-width: calc(100vw - 2rem);
    max-height: calc(100dvh - 2rem);
  }

  .text-zoom-safe {
    font-size: clamp(0.75rem, 2vw, 1rem);
  }

  .text-zoom-safe-lg {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
}

@layer components {
  .btn-brutal {
    @apply border-2 border-foreground font-black transition-all duration-200 transform;
  }

  .btn-brutal:hover {
    @apply transform -translate-y-1 shadow-brutal-hover;
  }

  .btn-brutal:active {
    @apply transform translate-y-0 shadow-brutal;
  }

  .btn-primary-brutal {
    @apply bg-primary text-primary-foreground btn-brutal;
  }

  .btn-secondary-brutal {
    @apply bg-secondary text-secondary-foreground btn-brutal;
  }

  .btn-accent-brutal {
    @apply bg-accent text-accent-foreground btn-brutal;
  }

  .btn-outline-brutal {
    @apply border-2 border-foreground bg-background text-foreground font-black uppercase tracking-wide shadow-brutal hover:shadow-brutal-hover hover:transform hover:-translate-x-0.5 hover:-translate-y-0.5 active:transform active:translate-x-0.5 active:translate-y-0.5 active:shadow-[2px_2px_0px_hsl(var(--foreground))] transition-all duration-200;
  }

  .btn-learn-more-brutal {
    @apply bg-accent text-accent-foreground btn-brutal;
    background-color: hsl(48 100% 50%) !important;
    color: hsl(0 0% 0%) !important;
  }

  .btn-learn-more-brutal:hover {
    @apply bg-accent text-accent-foreground transform -translate-y-1 shadow-brutal-hover;
    background-color: hsl(48 100% 50%) !important;
    color: hsl(0 0% 0%) !important;
  }

  .btn-learn-more-brutal:active {
    @apply bg-accent text-accent-foreground transform translate-y-0 shadow-brutal;
    background-color: hsl(48 100% 50%) !important;
    color: hsl(0 0% 0%) !important;
  }

  .btn-learn-more-brutal:focus {
    @apply bg-accent text-accent-foreground ring-2 ring-accent;
    background-color: hsl(48 100% 50%) !important;
    color: hsl(0 0% 0%) !important;
  }

  .btn-learn-more-brutal:focus-visible {
    background-color: hsl(48 100% 50%) !important;
    color: hsl(0 0% 0%) !important;
  }

  .card-brutal {
    @apply bg-card border-2 border-foreground shadow-brutal transition-all duration-200;
  }

  .card-brutal:hover {
    @apply shadow-brutal-hover transform -translate-y-1;
  }

  .input-brutal {
    @apply border-2 border-foreground bg-background font-mono;
  }

  .input-brutal:focus {
    @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
  }

  .border-3 {
    border-width: 3px;
  }

  .vote-pop {
    animation: votePop 0.3s ease-out;
  }

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

  @keyframes slideInBottom {
    0% { 
      transform: translateY(100%);
      opacity: 0;
    }
    100% { 
      transform: translateY(0);
      opacity: 1;
    }
  }

  @keyframes slideOutBottom {
    0% { 
      transform: translateY(0);
      opacity: 1;
    }
    100% { 
      transform: translateY(100%);
      opacity: 0;
    }
  }

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

  @keyframes fadeOut {
    0% { 
      opacity: 1;
      transform: translateY(0);
    }
    100% { 
      opacity: 0;
      transform: translateY(-20px);
    }
  }

  @keyframes bounce {
    0%, 20%, 53%, 80%, 100% {
      transform: translate3d(0,0,0);
    }
    40%, 43% {
      transform: translate3d(0, -30px, 0);
    }
    70% {
      transform: translate3d(0, -15px, 0);
    }
    90% {
      transform: translate3d(0, -4px, 0);
    }
  }

  .animate-slide-in-bottom {
    animation: slideInBottom 0.5s ease-out;
  }

  .animate-slide-out-bottom {
    animation: slideOutBottom 0.3s ease-in;
  }

  .animate-fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  .animate-fade-out {
    animation: fadeOut 0.3s ease-in;
  }

  .animate-bounce {
    animation: bounce 1s ease-in-out;
  }

  @keyframes swipe-back {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(100%);
    }
  }

  .animate-swipe-back {
    animation: swipe-back 0.3s ease-out forwards;
  }

  @keyframes bounceIn {
    0% {
      opacity: 0;
      transform: scale(0.3);
    }
    50% {
      opacity: 1;
      transform: scale(1.05);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @keyframes pop {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
  }

  @keyframes ripple {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(4);
      opacity: 0;
    }
  }

  .animate-bounce-in {
    animation: bounceIn 0.6s ease-out;
  }

  .animate-pop {
    animation: pop 0.2s ease-out;
  }

  .ripple-effect {
    position: relative;
    overflow: hidden;
  }

  .ripple-effect:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }

  .ripple-effect:active:before {
    width: 300px;
    height: 300px;
  }

  .text-brutal {
    @apply font-black text-foreground;
    font-family: 'Courier New', monospace;
    text-transform: uppercase;
    letter-spacing: -0.02em;
  }

  .text-raw {
    @apply text-foreground;
    font-family: 'Courier New', monospace;
    font-weight: 500;
  }

  .skew-brutal {
    transform: skew(-2deg);
  }

  .skew-brutal-reverse {
    transform: skew(2deg);
  }

  .feed-scroll::-webkit-scrollbar {
    display: none;
  }
  
  .feed-scroll {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .hover-pop:hover {
    transform: scale(1.02);
  }

  .active-pop:active {
    transform: scale(0.98);
  }

  /* Landing page specific animations */
  .animate-brutal-slide-in {
    animation: slideInBottom 0.8s ease-out;
  }

  /* Continuous scrolling animation for reviews */
  @keyframes scrollLeft {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }

  .animate-scroll-left {
    animation: scrollLeft 30s linear infinite;
  }

  /* Auto-scroll pause on hover */
  .animate-scroll-left:hover {
    animation-play-state: paused;
  }

  /* Enhanced card animations */
  .card-hover-lift {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .card-hover-lift:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 12px 12px 0px hsl(var(--foreground));
  }

  /* Gradient backgrounds for enhanced cards */
  .gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary) / 0.1) 0%, hsl(var(--primary) / 0.2) 100%);
  }

  .gradient-secondary {
    background: linear-gradient(135deg, hsl(var(--secondary) / 0.1) 0%, hsl(var(--secondary) / 0.2) 100%);
  }

  .gradient-accent {
    background: linear-gradient(135deg, hsl(var(--accent) / 0.1) 0%, hsl(var(--accent) / 0.2) 100%);
  }

  /* Spin animations for decorative elements */
  .animate-spin-slow {
    animation: spin 8s linear infinite;
  }

  .animate-spin-slow-reverse {
    animation: spin 8s linear infinite reverse;
  }

  /* Pulse animation for social proof */
  .animate-pulse-slow {
    animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Card transition animations */
  .card-transition-enter {
    opacity: 0;
    transform: translateX(100%);
  }

  .card-transition-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: all 0.5s ease-in-out;
  }

  .card-transition-exit {
    opacity: 1;
    transform: translateX(0);
  }

  .card-transition-exit-active {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 0.5s ease-in-out;
  }

  /* Hide scrollbar for reviews section */
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

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

  /* Enhanced shadow effects */
  .shadow-brutal-xl {
    box-shadow: 12px 12px 0px hsl(var(--foreground));
  }

  .shadow-brutal-2xl {
    box-shadow: 16px 16px 0px hsl(var(--foreground));
  }

  /* Text gradient effects */
  .text-gradient-primary {
    background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--secondary)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  .text-gradient-secondary {
    background: linear-gradient(135deg, hsl(var(--secondary)) 0%, hsl(var(--accent)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* Responsive text sizing */
  .text-responsive-xl {
    font-size: clamp(1.5rem, 4vw, 3rem);
  }

  .text-responsive-2xl {
    font-size: clamp(2rem, 5vw, 4rem);
  }

  .text-responsive-3xl {
    font-size: clamp(2.5rem, 6vw, 5rem);
  }

  /* Mobile-first spacing */
  .space-responsive {
    gap: clamp(1rem, 3vw, 2rem);
  }

  .padding-responsive {
    padding: clamp(1rem, 4vw, 2rem);
  }

  /* Enhanced focus states */
  .focus-brutal:focus {
    outline: 3px solid hsl(var(--foreground));
    outline-offset: 2px;
  }

  /* Loading states */
  .loading-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  }

  /* Success states */
  .success-glow {
    box-shadow: 0 0 20px hsl(var(--primary) / 0.5);
  }

  /* Error states */
  .error-shake {
    animation: shake 0.5s ease-in-out;
  }

  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  
  /* CLS Prevention - Skeleton Loading States */
  .skeleton {
    background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
  }
  
  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }
  
  /* Reserve space for dynamic content to prevent shifts */
  .count-placeholder {
    min-width: 2rem;
    min-height: 1rem;
  }
  
  .button-count-badge {
    min-width: 1rem;
    min-height: 1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Accessibility improvements */
  .focus-visible-brutal:focus-visible {
    outline: 3px solid hsl(var(--primary));
    outline-offset: 2px;
  }

  /* High contrast mode support */
  @media (prefers-contrast: high) {
    .card-brutal {
      border-width: 3px;
    }
    
    .btn-brutal {
      border-width: 3px;
    }
  }

  /* Reduced motion support */
  @media (prefers-reduced-motion: reduce) {
    .animate-scroll-left {
      animation: none;
    }
    
    .card-hover-lift:hover {
      transform: none;
    }
    
    .animate-brutal-slide-in {
      animation: none;
    }
  }

  /* Print styles */
  @media print {
    .card-brutal {
      border: 2px solid black;
      box-shadow: none;
    }
    
    .btn-brutal {
      border: 2px solid black;
      background: white;
      color: black;
    }
  }
}

/* Feed-specific styles */
.feed-transition {
  transition: all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.feed-snap {
  scroll-snap-type: y mandatory;
  scroll-snap-align: start;
}

.feed-container {
  overflow-style: none;
  scrollbar-width: none;
}

.feed-container::-webkit-scrollbar {
  display: none;
}

.card-transition {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease-out;
}

.pull-refresh-indicator {
  transition: transform 0.15s ease-out;
}

.touch-feedback:active {
  transition: transform 0.05s ease-out;
}

/* Professional Background Animation System */
@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-20px) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(-3deg); }
  75% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes float-slow-reverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(20px) rotate(-5deg); }
  50% { transform: translateY(10px) rotate(3deg); }
  75% { transform: translateY(15px) rotate(-2deg); }
}

@keyframes float-medium {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-15px) rotate(3deg); }
  66% { transform: translateY(10px) rotate(-2deg); }
}

@keyframes pulse-slow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.05); }
}

@keyframes pulse-slow-reverse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.95); }
}

@keyframes grid-line {
  0% { transform: translateX(-100%); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes particle-float {
  0%, 100% { transform: translateY(0px) scale(1); opacity: 0.3; }
  25% { transform: translateY(-30px) scale(1.2); opacity: 0.6; }
  50% { transform: translateY(-15px) scale(0.8); opacity: 0.4; }
  75% { transform: translateY(-25px) scale(1.1); opacity: 0.5; }
}

@keyframes morph-slow {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.2; }
  25% { transform: scale(1.1) rotate(90deg); opacity: 0.4; }
  50% { transform: scale(0.9) rotate(180deg); opacity: 0.3; }
  75% { transform: scale(1.05) rotate(270deg); opacity: 0.5; }
}

@keyframes morph-medium {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.15; }
  33% { transform: scale(1.2) rotate(120deg); opacity: 0.3; }
  66% { transform: scale(0.8) rotate(240deg); opacity: 0.25; }
}

.animate-float-slow {
  animation: float-slow 8s ease-in-out infinite;
}

.animate-float-slow-reverse {
  animation: float-slow-reverse 10s ease-in-out infinite;
}

.animate-float-medium {
  animation: float-medium 6s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 4s ease-in-out infinite;
}

.animate-pulse-slow-reverse {
  animation: pulse-slow-reverse 5s ease-in-out infinite;
}

.animate-grid-line {
  animation: grid-line 4s linear infinite;
}

.animate-particle-float {
  animation: particle-float 6s ease-in-out infinite;
}

.animate-morph-slow {
  animation: morph-slow 12s ease-in-out infinite;
}

.animate-morph-medium {
  animation: morph-medium 8s ease-in-out infinite;
}

/* Performance optimizations */
.animate-float-slow,
.animate-float-slow-reverse,
.animate-float-medium,
.animate-pulse-slow,
.animate-pulse-slow-reverse,
.animate-grid-line,
.animate-particle-float,
.animate-morph-slow,
.animate-morph-medium {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-float-slow,
  .animate-float-slow-reverse,
  .animate-float-medium,
  .animate-pulse-slow,
  .animate-pulse-slow-reverse,
  .animate-grid-line,
  .animate-particle-float,
  .animate-morph-slow,
  .animate-morph-medium {
    animation: none;
  }
}

/* Professional Logo Animation - Binary Decision Pulse (Balanced) */
@keyframes logo-either-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1) skew(0deg);
    color: hsl(var(--primary));
  }
  25% {
    opacity: 0.8;
    transform: scale(1.05) skew(2deg);
    color: hsl(var(--primary));
  }
  50% {
    opacity: 0.7;
    transform: scale(0.95) skew(0deg);
    color: hsl(var(--muted-foreground));
  }
  75% {
    opacity: 0.7;
    transform: scale(0.95) skew(0deg);
    color: hsl(var(--muted-foreground));
  }
}

@keyframes logo-or-pulse {
  0%, 100% {
    opacity: 0.7;
    transform: scale(0.95) skew(0deg);
    color: hsl(var(--muted-foreground));
  }
  25% {
    opacity: 0.7;
    transform: scale(0.95) skew(0deg);
    color: hsl(var(--muted-foreground));
  }
  50% {
    opacity: 1;
    transform: scale(1.05) skew(0deg);
    color: hsl(var(--secondary));
  }
  75% {
    opacity: 0.8;
    transform: scale(1.02) skew(-1deg);
    color: hsl(var(--secondary));
  }
}

@keyframes logo-slash-rotate {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  25% {
    transform: rotate(0deg) scale(1);
    opacity: 0.8;
  }
  50% {
    transform: rotate(180deg) scale(1.2);
    opacity: 1;
  }
  75% {
    transform: rotate(180deg) scale(1.1);
    opacity: 0.9;
  }
}

.logo-either {
  animation: logo-either-pulse 4s ease-in-out infinite;
  display: inline-block;
  transition: all 0.3s ease;
}

.logo-or {
  animation: logo-or-pulse 4s ease-in-out infinite;
  display: inline-block;
  transition: all 0.3s ease;
  animation-delay: 2s;
}

.logo-slash {
  animation: logo-slash-rotate 4s ease-in-out infinite;
  display: inline-block;
  transition: all 0.3s ease;
  font-weight: 900;
  margin: 0 2px;
}

/* Hover states for interactive feedback */
.logo-animation:hover .logo-either {
  animation-play-state: paused;
  color: hsl(var(--primary));
  transform: scale(1.05);
}

.logo-animation:hover .logo-or {
  animation-play-state: paused;
  color: hsl(var(--accent));
  transform: scale(1.05);
}

.logo-animation:hover .logo-slash {
  animation-play-state: paused;
  transform: rotate(45deg) scale(1.1);
  color: hsl(var(--secondary));
}

/* Performance optimizations */
.logo-either,
.logo-or,
.logo-slash {
  will-change: transform, opacity, color;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .logo-either,
  .logo-or,
  .logo-slash {
    animation: none;
  }
  
  .logo-animation:hover .logo-either,
  .logo-animation:hover .logo-or,
  .logo-animation:hover .logo-slash {
    transform: none;
  }
}

/* Mobile optimization */
@media (max-width: 768px) {
  .logo-either,
  .logo-or,
  .logo-slash {
    animation-duration: 6s;
  }
}

/* CRITICAL: Mobile performance optimizations - disable animations on mobile */
@media (max-width: 768px) {
  /* Disable all decorative animations on mobile to prevent CLS */
  .animate-float,
  .animate-float-reverse,
  .animate-float-slow,
  .animate-float-slow-reverse,
  .animate-float-medium,
  .animate-grid-line,
  .animate-particle-float,
  .animate-morph-slow,
  .animate-morph-medium,
  .animate-pulse-slow,
  .animate-pulse-slow-reverse,
  .animate-slide-in-left,
  .animate-slide-in-right,
  .animate-fade-in-up,
  .animate-fade-in-up-delayed,
  .animate-fade-in-up-delayed-2,
  .animate-fade-in-up-delayed-3,
  .animate-fade-in-up-delayed-4,
  .animate-fade-in-up-delayed-5,
  .animate-fade-in-up-delayed-6,
  .animate-bounce,
  .animate-pulse {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Disable hover effects on mobile to prevent layout shifts */
  .hover\:scale-105:hover,
  .hover\:bg-primary\/20:hover,
  .hover\:bg-secondary\/20:hover,
  .hover\:bg-accent\/20:hover,
  .hover\:bg-primary\/90:hover,
  .hover\:bg-gray-100:hover,
  .hover\:shadow-brutal-xl:hover {
    transform: none !important;
    background-color: inherit !important;
    box-shadow: inherit !important;
  }

  /* Ensure stable layout for hero section on mobile */
  .hero-section {
    min-height: 500px !important;
    contain: layout style !important;
  }

  /* Optimize hero text for mobile LCP - remove all animations */
  .hero-heading {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    contain: layout style !important;
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  /* Ensure hero cards have stable dimensions on mobile */
  .hero-card-container {
    aspect-ratio: 9/16 !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto !important;
    contain: layout style !important;
  }

  .hero-card-image {
    aspect-ratio: 1/1 !important;
    width: 100% !important;
    height: auto !important;
    contain: layout style !important;
  }
}