/* ===== Custom Styles for Area 51 Tattoo & Piercing ===== */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #14171b;
}
::-webkit-scrollbar-thumb {
    background: #3d434b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #E8734A;
}

/* ===== Hero Animations ===== */
.hero-eyebrow {
    animation: fadeInUp 0.8s ease forwards;
}
.hero-title {
    animation: fadeInUp 0.8s ease 0.1s forwards;
    opacity: 0;
}
.hero-desc {
    animation: fadeInUp 0.8s ease 0.2s forwards;
    opacity: 0;
}
.hero-cta-primary {
    animation: fadeInUp 0.8s ease 0.3s forwards;
    opacity: 0;
}
.hero-cta-secondary {
    animation: fadeInUp 0.8s ease 0.35s forwards;
    opacity: 0;
}
.hero-stats {
    animation: fadeInUp 0.8s ease 0.4s forwards;
    opacity: 0;
}
.hero-img-main {
    animation: fadeInRight 1s ease 0.3s forwards;
    opacity: 0;
}
.hero-float-card {
    animation: floatCard 0.8s ease 0.8s forwards, float 4s ease-in-out infinite 0.8s;
    opacity: 0;
}

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

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

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

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ===== Section Animations ===== */
.section-eyebrow {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}
.section-title {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease 0.1s;
}
.section-eyebrow.visible,
.section-title.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Service Cards ===== */
.service-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
}
.service-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== Gallery ===== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}
@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.gallery-item {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.5s ease;
    aspect-ratio: auto;
}
.gallery-item.visible {
    opacity: 1;
    transform: scale(1);
}
.gallery-item:nth-child(1) { aspect-ratio: 5/6; }
.gallery-item:nth-child(2) { aspect-ratio: 5/4; }
.gallery-item:nth-child(3) { aspect-ratio: 1; }
.gallery-item:nth-child(4) { aspect-ratio: 5/7; }
.gallery-item:nth-child(5) { aspect-ratio: 5/4.5; }
.gallery-item:nth-child(6) { aspect-ratio: 5/5.5; }

/* ===== Testimonials ===== */
.testimonial-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.5s ease;
}
.testimonial-card.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ===== About Images ===== */
.about-images {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s ease;
}
.about-images.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ===== Navbar ===== */
.navbar-scrolled {
    background: rgba(10, 12, 14, 0.95) !important;
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

/* ===== Mobile Menu ===== */
.mobile-menu-open {
    opacity: 1 !important;
    pointer-events: all !important;
}

/* ===== General utilities ===== */
::selection {
    background: rgba(232, 115, 74, 0.3);
    color: white;
}

/* ===== Gallery item hover - override aspect-ratio for mobile ===== */
@media (max-width: 767px) {
    .gallery-item {
        aspect-ratio: 1 !important;
    }
}

/* ===== Contact form focus styles ===== */
input:focus,
textarea:focus,
select:focus {
    outline: none;
}

/* ===== Print styles ===== */
@media print {
    nav, .hero-float-card, #form-success {
        display: none !important;
    }
}