@import 'tailwindcss';

@plugin '@tailwindcss/forms' {
  strategy: class;
}

@plugin '@tailwindcss/typography';

@custom-variant dark (&:where(.dark, .dark *));

@source "../views";
@source "../../../extensions/**/*.blade.php";

/* =============================================================================
   FONT DEFINITIONS
   ============================================================================= */

@font-face {
    font-family: 'Figtree';
    src: url('../fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-display: swap;
    unicode-range: U+0000-00FF;
    font-style: normal;
    font-weight: 200 800;
}

/* =============================================================================
   PERFORMANCE OPTIMIZATIONS - CRITICAL FIXES
   ============================================================================= */

/* Remove excessive GPU layers and fix blur issues */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    /* Remove blanket translateZ(0) that causes blur */
}

/* Only apply GPU acceleration to elements that truly need it */
.needs-gpu-acceleration {
    will-change: transform, opacity;
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* =============================================================================
   THEME CONFIGURATION
   ============================================================================= */

@theme {
  --font-sans: "Figtree", "Poppins", "Nunito", ui-sans-serif, system-ui, sans-serif;
}

@theme inline {
  /* Branding Colors */
  --color-primary: hsl(var(--color-primary));
  --color-secondary: hsl(var(--color-secondary));
  
  /* Neutral Colors */
  --color-neutral: hsl(var(--color-neutral));
  
  /* Text Colors */
  --color-base: hsl(var(--color-base));
  --color-muted: hsl(var(--color-muted));
  --color-inverted: hsl(var(--color-inverted));
  
  /* State Colors */
  --color-success: hsl(var(--color-success));
  --color-error: hsl(var(--color-error));
  --color-warning: hsl(var(--color-warning));
  --color-inactive: hsl(var(--color-inactive));
  --color-info: hsl(var(--color-info));
  
  /* Background Colors */
  --color-background: hsl(var(--color-background));
  --color-background-secondary: hsl(var(--color-background-secondary));
}

/* =============================================================================
   BASE STYLES
   ============================================================================= */

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

html {
    scroll-behavior: smooth;
}

/* =============================================================================
   UTILITIES - OPTIMIZED
   ============================================================================= */

@utility text-nowrap {
  text-wrap: nowrap;
}

@utility text-wrap {
  text-wrap: wrap;
}

/* Line clamp utilities - removed excessive containment */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-4 {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.prose ul {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.prose ol {
    list-style-type: decimal !important;
    padding-left: 1.5rem !important;
    margin: 1rem 0 !important;
}

.prose li {
    margin: 0.5rem 0 !important;
    display: list-item !important;
}

/* Untuk dark mode */
.dark .prose ul,
.dark .prose ol {
    list-style-type: disc !important;
    padding-left: 1.5rem !important;
}

.dark .prose ol {
    list-style-type: decimal !important;
}

/* Custom scrollbar - simplified */
.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--color-neutral) transparent;
}

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--color-neutral);
    border-radius: 9999px;
    border: 1px solid transparent;
    transition: background-color 0.2s ease;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-primary);
}

/* =============================================================================
   OPTIMIZED ANIMATION CLASSES - FIXED BLUR ISSUES
   ============================================================================= */

/* Remove excessive will-change and translateZ from animations */
.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.animate-fade-in-down { 
    animation: fadeInDown 0.6s ease-out forwards;
}

.animate-fade-in-left { 
    animation: fadeInLeft 0.7s ease-out forwards;
}

.animate-fade-in-right { 
    animation: fadeInRight 0.7s ease-out forwards;
}

.form-fade-in {
    animation: fade-in 0.8s ease-out forwards;
}

/* Only apply GPU acceleration to complex animations */
.animated-gradient {
    background-size: 200% 200%;
    animation: gradient-animation 10s ease infinite;
    will-change: background-position;
}

.animate-gradient-flow {
    animation: gradient-flow 3s ease infinite;
}

.cta-breathe {
    animation: breathe 4s ease-in-out infinite;
}

.particle {
    animation: float-particle 8s ease-in-out infinite;
    will-change: transform, opacity;
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Animation delays - removed translateZ(0) */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }

.animate-fade-in-up-delay-1 { animation-delay: 0.2s; }
.animate-fade-in-up-delay-2 { animation-delay: 0.4s; }
.animate-fade-in-up-delay-3 { animation-delay: 0.6s; }
.animate-fade-in-up-delay-4 { animation-delay: 0.8s; }

/* =============================================================================
   KEYFRAME ANIMATIONS - SIMPLIFIED
   ============================================================================= */

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

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

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

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

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

@keyframes gradient-animation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes gradient-text {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

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

@keyframes blob {
    0% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0, 0) scale(1); }
}

/* =============================================================================
   COMPONENT STYLES - FIXED BLUR & PERFORMANCE
   ============================================================================= */

/* Hero title - removed excessive GPU layers */
.hero-title {
    background: linear-gradient(45deg, hsl(var(--color-primary)), hsl(var(--color-secondary)), hsl(var(--color-primary)));
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradient-text 3s ease-in-out infinite;
}

/* Magnetic effect - simplified */
[data-magnetic] {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Navigation link styles */
x-navigation-link svg {
    vertical-align: middle;
}

/* =============================================================================
   FORM STYLES - SIMPLIFIED
   ============================================================================= */

.form-input-container {
    position: relative;
}

.form-input {
    border: none;
    border-bottom: 2px solid #404040;
    outline: none;
    background: transparent;
    transition: border-color 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    width: 100%;
    padding: 10px 0;
}

.form-input-label {
    position: absolute;
    top: 10px;
    left: 0;
    color: #a3a3a3;
    pointer-events: none;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.form-input:focus + .form-input-label,
.form-input:not(:placeholder-shown) + .form-input-label {
    transform: translateY(-22px);
    font-size: 12px;
    color: hsl(var(--color-background));
}

.form-input:focus {
    border-bottom-color: hsl(var(--color-background));
}

.form-radio:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-radio:focus {
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
}

/* =============================================================================
   HOVER EFFECTS - OPTIMIZED FOR RESPONSIVENESS
   ============================================================================= */

/* Category cards - improved hover without blur */
.category-card {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.category-card:hover {
    transform: translateY(-2px);
}

.category-card:hover .category-icon svg {
    filter: drop-shadow(0 0 10px hsl(var(--color-primary)));
}

.category-card:hover .category-icon {
    transform: scale(1.1) rotate(15deg);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.category-card img {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.category-card:hover img {
    transform: scale(1.05);
}

.feature-card {
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.feature-card:hover {
    background: linear-gradient(135deg, hsl(var(--color-background-secondary))/50, hsl(var(--color-primary))/5);
    transform: translateY(-2px);
}

/* Group hover effects - simplified */
.group:hover .group-hover\:scale-110 {
    transform: scale(1.1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group\/btn:hover .group-hover\/btn\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/btn:hover .group-hover\/btn\:scale-110 {
    transform: scale(1.1);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.group\/nav:hover .group-hover\/nav\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/radio:hover .group-hover\/radio\:translate-x-1 {
    transform: translateX(0.25rem);
    transition: transform 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

.group\/radio:hover .group-hover\/radio\:opacity-100 {
    opacity: 1;
    transition: opacity 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* =============================================================================
   BUTTON IMPROVEMENTS - BETTER CLICK HANDLING
   ============================================================================= */

.btn-primary {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.btn-primary:active {
    transform: translateY(0);
    transition-duration: 0.1s;
}

.btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading state for buttons */
.btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

.btn-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* =============================================================================
   RESPONSIVE FIXES
   ============================================================================= */

/* Better mobile touch targets */
@media (max-width: 768px) {
    .btn-primary,
    .category-card,
    .feature-card {
        min-height: 44px; /* Better touch target */
    }
    
    /* Reduce complex animations on mobile */
    .particle {
        display: none;
    }
    
    .animated-gradient {
        animation-duration: 15s;
    }
    
    /* Prevent hover states on touch devices */
    .category-card:hover,
    .feature-card:hover {
        transform: none;
    }
}

/* Better desktop interactions */
@media (min-width: 769px) {
    /* Enable smooth hover only on devices that support it */
    @media (hover: hover) {
        .category-card:hover {
            transform: translateY(-4px);
        }
        
        .feature-card:hover {
            transform: translateY(-2px);
        }
    }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    ::before,
    ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
    }
    
    .particle {
        display: none;
    }
}

/* =============================================================================
   LOADING STATES & SKELETON
   ============================================================================= */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite;
}

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

/* =============================================================================
   CRITICAL PERFORMANCE FIXES
   ============================================================================= */

/* Remove excessive containment and layers */
.category-card, 
.feature-card {
    /* Only add containment where truly needed */
    contain: layout;
}

/* Optimize text rendering */
.hero-title,
h1, h2, h3, h4, h5, h6 {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Optimize images */
img {
    image-rendering: auto;
    -webkit-user-drag: none;
    user-select: none;
}

/* Better scroll performance */
.custom-scrollbar {
    -webkit-overflow-scrolling: touch;
}

/* =============================================================================
   EASYMDE STYLES
   ============================================================================= */

@import './easymde.css';