@import "tailwindcss";

@theme {
    --color-primary: #0a2540;
    --color-primary-dark: #05192d;
    --color-secondary: #cba35c;
    --color-secondary-dark: #b68d4a;
    --color-accent: #635bff;
    --color-surface: #ffffff;
    --color-muted: #64748b;

    --font-outfit: "Outfit", sans-serif;
    --font-serif: "Playfair Display", "Georgia", "Times New Roman", serif;

    --shadow-premium: 0 20px 50px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 40px 80px rgba(0, 0, 0, 0.1);

    --transition-premium: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

@layer base {
    body {
        @apply font-outfit text-primary bg-white selection:bg-secondary/30 antialiased overflow-x-hidden;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        @apply tracking-tight font-bold;
    }
}

@layer components {
    .container-custom {
        @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
    }

    /* Shimmer Effect for Loading */
    .shimmer {
        @apply relative overflow-hidden bg-gray-100;
    }

    .shimmer::before {
        content: '';
        @apply absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/20 to-transparent animate-[shimmer_2s_infinite];
    }

    .nav-link {
        @apply text-[12px] xl:text-[14px] font-semibold text-[#4a5568] hover:text-primary transition-all duration-200 relative py-2 px-1 xl:px-3 flex items-center h-full whitespace-nowrap align-middle;
    }

    .nav-link::after {
        content: '';
        @apply absolute bottom-0 left-0 w-0 h-0.5 bg-secondary transition-all duration-300;
    }

    .nav-link:hover::after,
    .nav-link.active::after {
        @apply w-full;
    }

    .btn-primary {
        @apply relative inline-flex items-center justify-center bg-primary text-white px-8 py-4 rounded-xl font-bold shadow-xl shadow-primary/10 hover:shadow-secondary/20 active:scale-95 overflow-hidden z-10;
        transition: var(--transition-premium);
    }

    .btn-primary::before {
        content: '';
        @apply absolute inset-0 bg-secondary transform scale-x-0 origin-right transition-transform duration-500 -z-10;
    }

    .btn-primary:hover::before {
        @apply scale-x-100 origin-left;
    }

    .btn-primary:hover {
        @apply text-primary;
    }

    .section-title {
        @apply text-4xl md:text-6xl font-black text-primary mb-8 relative inline-block tracking-tighter;
    }

    .section-title::after {
        content: '';
        @apply absolute -bottom-3 left-0 w-24 h-2 bg-secondary rounded-full;
    }

    .glass {
        @apply bg-white/70 backdrop-blur-2xl border border-white/20;
        box-shadow: var(--shadow-premium);
    }

    .hover-lift {
        @apply hover:-translate-y-3 active:scale-95;
        transition: var(--transition-premium);
    }

    .hover-lift:hover {
        box-shadow: var(--shadow-hover);
    }

    /* Mobile Menu Drawer Styles (Consolidated) */
    .mobile-drawer {
        @apply fixed inset-0 z-[9999] opacity-0 invisible transition-all duration-300 pointer-events-none;
        display: none;
    }

    .mobile-drawer.active {
        @apply opacity-100 visible pointer-events-auto;
        display: flex;
    }

    .mobile-drawer-backdrop {
        @apply absolute inset-0 bg-primary/60 backdrop-blur-lg opacity-0 transition-opacity duration-300;
    }

    .mobile-drawer.active .mobile-drawer-backdrop {
        @apply opacity-100;
    }

    .mobile-drawer-content {
        @apply absolute top-0 right-0 bottom-0 w-full max-w-sm bg-white shadow-2xl transform translate-x-full transition-transform duration-500 ease-in-out flex flex-col;
    }

    .mobile-drawer.active .mobile-drawer-content {
        @apply translate-x-0;
    }

    /* Scroll Reveal Classes */
    .reveal {
        @apply opacity-0 transition-all duration-1000 ease-out;
    }

    .reveal-fade {
        @apply transform translate-y-8;
    }

    .reveal-left {
        @apply transform -translate-x-8;
    }

    .reveal-right {
        @apply transform translate-x-8;
    }

    .reveal.active {
        @apply opacity-100 translate-y-0 translate-x-0;
    }

    /* Classic Serif Font Utility */
    .font-serif {
        font-family: var(--font-serif);
    }

    /* ===== COMPREHENSIVE ANIMATION UTILITIES ===== */

    /* Parallax Background */
    .parallax-bg {
        will-change: transform;
        transition: transform 0.1s ease-out;
    }

    /* Hero Animations */
    .hero-text-enter {
        animation: fadeUp 1s ease-out forwards;
        opacity: 0;
    }

    .hero-text-enter-delay-1 {
        animation-delay: 0.3s;
    }

    .hero-text-enter-delay-2 {
        animation-delay: 0.6s;
    }

    .hero-text-enter-delay-3 {
        animation-delay: 0.9s;
    }

    /* Scroll Indicator */
    .scroll-indicator {
        animation: bounce 2s infinite;
    }

    /* 3D Card Tilt Effect */
    .card-3d {
        transform-style: preserve-3d;
        transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
    }

    .card-3d:hover {
        transform: perspective(1000px) rotateX(2deg) rotateY(2deg) translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    }

    .card-3d-content {
        transform: translateZ(50px);
    }

    /* Stagger Fade In */
    .stagger-item {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }

    .stagger-item.visible {
        opacity: 1;
        transform: translateY(0);
    }

    .stagger-item:nth-child(1) {
        transition-delay: 0.1s;
    }

    .stagger-item:nth-child(2) {
        transition-delay: 0.2s;
    }

    .stagger-item:nth-child(3) {
        transition-delay: 0.3s;
    }

    .stagger-item:nth-child(4) {
        transition-delay: 0.4s;
    }

    .stagger-item:nth-child(5) {
        transition-delay: 0.5s;
    }

    .stagger-item:nth-child(6) {
        transition-delay: 0.6s;
    }

    /* Counter Animation */
    .counter {
        font-variant-numeric: tabular-nums;
    }

    /* Floating Animation */
    .float {
        animation: float 6s ease-in-out infinite;
    }

    .float-delay-1 {
        animation-delay: 1s;
    }

    .float-delay-2 {
        animation-delay: 2s;
    }

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

    /* Gradient Shift */
    .gradient-shift {
        background-size: 200% 200%;
        animation: gradientShift 8s ease infinite;
    }

    /* Ken Burns Effect */
    .ken-burns {
        animation: kenBurns 20s ease-in-out infinite alternate;
    }

    /* Lightbox */
    .lightbox-overlay {
        backdrop-filter: blur(10px);
        animation: fadeIn 0.3s ease-out;
    }

    .lightbox-content {
        animation: scaleIn 0.3s ease-out;
    }

    /* Masonry Grid */
    .masonry-grid {
        column-count: 1;
        column-gap: 1.5rem;
    }

    @media (min-width: 768px) {
        .masonry-grid {
            column-count: 2;
        }
    }

    @media (min-width: 1024px) {
        .masonry-grid {
            column-count: 3;
        }
    }

    .masonry-item {
        break-inside: avoid;
        margin-bottom: 1.5rem;
    }

    /* Hover Overlay */
    .hover-overlay {
        position: relative;
        overflow: hidden;
    }

    .hover-overlay::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        opacity: 0;
        transition: opacity 0.3s ease-out;
        z-index: 1;
    }

    .hover-overlay:hover::before {
        opacity: 1;
    }

    .hover-overlay img {
        transition: transform 0.5s ease-out;
    }

    .hover-overlay:hover img {
        transform: scale(1.1);
    }

    /* Testimonial Card */
    .testimonial-card {
        @apply bg-white rounded-2xl p-8 shadow-lg hover:shadow-2xl transition-all duration-300;
    }

    /* Star Rating */
    .star-rating {
        display: inline-flex;
        gap: 0.25rem;
    }

    .star {
        color: #d1d5db;
        transition: color 0.2s ease-out;
    }

    .star.filled {
        color: #fbbf24;
        animation: starPop 0.3s ease-out;
    }
}

/* ===== KEYFRAME ANIMATIONS ===== */

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

    100% {
        transform: translateX(100%);
    }
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes starPop {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.font-playfair {
    font-family: 'Playfair Display', serif;
}