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

/* Base styles with vintage feel */
body {
    @apply bg-vintage-cream text-vintage-dark font-sans;
    background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='smallGrid' width='10' height='10' patternUnits='userSpaceOnUse'%3E%3Cpath d='M 10 0 L 0 0 0 10' fill='none' stroke='rgba(108, 88, 76, 0.1)' stroke-width='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23smallGrid)'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6 {
    @apply font-heading tracking-wide;
}

/* Vintage UI elements */
.btn-vintage {
    @apply bg-vintage-brown text-vintage-cream border-2 border-vintage-dark relative transition-all duration-200;
    box-shadow: 3px 3px 0 theme('colors.vintage-dark');
    top: 0;
    left: 0;
}

.btn-vintage:hover {
    top: 1px;
    left: 1px;
    box-shadow: 2px 2px 0 theme('colors.vintage-dark');
}

.btn-vintage:active {
    top: 3px;
    left: 3px;
    box-shadow: none;
}

/* Card with vintage style */
.card-vintage {
    @apply bg-white border border-vintage-brown relative;
    box-shadow: 5px 5px 0 theme('colors.vintage-dark');
}

.card-vintage::before {
    content: "";
    @apply absolute inset-0 pointer-events-none opacity-50;
    background-image: url("data:image/svg+xml,%3Csvg width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cpattern id='noise' width='100' height='100' patternUnits='userSpaceOnUse'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%' height='100%' fill='url(%23noise)'/%3E%3C/svg%3E");
}

/* Vintage image styles */
.img-vintage {
    @apply border-8 border-white relative;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);
}

.img-vintage::after {
    content: "";
    @apply absolute inset-0 pointer-events-none;
    background: linear-gradient(135deg, rgba(221, 161, 94, 0.1) 0%, rgba(0,0,0,0) 100%);
}

/* Vintage dividers */
.divider-vintage {
    @apply h-5 my-8;
    background-image: url("data:image/svg+xml,%3Csvg width='100%' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 10 Q25 20, 50 10 T 100 10 T 150 10 T 200 10 T 250 10 T 300 10 T 350 10 T 400 10 T 450 10 T 500 10 T 550 10 T 600 10 T 650 10 T 700 10 T 750 10 T 800 10 T 850 10 T 900 10 T 950 10 T 1000 10' stroke='rgba(108, 88, 76, 0.5)' fill='transparent' stroke-width='1'/%3E%3C/svg%3E");
}

/* Vintage navbar */
.navbar-vintage {
    @apply bg-vintage-dark border-b-3 border-vintage-gold;
}

.navbar-vintage a {
    @apply text-vintage-cream font-heading tracking-wider relative;
}

.navbar-vintage a::after {
    content: "";
    @apply absolute bottom-[-5px] left-0 w-full h-0.5 bg-vintage-gold transform scale-x-0 transition-transform duration-300;
}

.navbar-vintage a:hover::after {
    @apply scale-x-100;
}

/* Vintage footer */
.footer-vintage {
    @apply bg-vintage-dark text-vintage-cream border-t-3 border-vintage-gold;
}

/* Animation for hero text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-text {
    animation: fadeInUp 0.8s ease-out forwards;
    @apply font-heading;
    text-shadow: 2px 2px 0 theme('colors.vintage-dark');
}

.hero-subtitle {
    animation: fadeInUp 0.8s ease-out 0.2s forwards;
    @apply opacity-0 font-mono;
}

.hero-cta {
    animation: fadeInUp 0.8s ease-out 0.4s forwards;
    @apply opacity-0;
}

/* Image animations and effects */
@keyframes floatAnimation {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(1deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

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

/* Vintage form elements */
.form-vintage input,
.form-vintage textarea,
.form-vintage select {
    @apply bg-white border-2 border-vintage-brown text-vintage-dark font-mono transition-all duration-300;
}

.form-vintage input:focus,
.form-vintage textarea:focus,
.form-vintage select:focus {
    @apply border-vintage-gold;
    box-shadow: 0 0 0 3px rgba(221, 161, 94, 0.3);
}

/* Vintage badges */
.badge-vintage {
    @apply bg-vintage-gold text-vintage-dark font-mono font-bold;
    transform: rotate(-2deg);
}

/* Vintage pricing tables */
.pricing-vintage {
    @apply border-2 border-vintage-brown bg-white relative overflow-hidden;
}

.pricing-vintage::before {
    content: "";
    @apply absolute top-0 left-0 w-full h-1 bg-vintage-gold;
}

.pricing-vintage-popular::before {
    @apply bg-vintage-red;
}

/* Vintage section headers */
.section-header-vintage {
    @apply text-center relative mb-12;
}

.section-header-vintage h2 {
    @apply inline-block bg-vintage-cream px-6 relative z-10;
}

.section-header-vintage::after {
    content: "";
    @apply absolute top-1/2 left-0 right-0 h-0.5 bg-vintage-brown z-0;
}