/* ==========================================
   HalloweenShop — Shared Styles
   ========================================== */

/* Base */
:root {
    --color-primary: 188 74 47;
    --font-body: 'Outfit', sans-serif;
    --font-display: 'Cormorant Garamond', serif;
    --color-bg-dark: #120d12;
    --color-bg-light: #f5eee8;
    --color-off-white: #f4ede6;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.font-display {
    font-family: var(--font-display);
    letter-spacing: -0.03em;
}

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

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

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

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

/* ==========================================
   Scroll Reveal Animation
   ========================================== */
.nova-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

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

/* Stagger children for grids */
.nova-revealed .group,
.nova-revealed details {
    animation: fadeSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.nova-revealed .group:nth-child(1),
.nova-revealed details:nth-child(1) { animation-delay: 0ms; }
.nova-revealed .group:nth-child(2),
.nova-revealed details:nth-child(2) { animation-delay: 100ms; }
.nova-revealed .group:nth-child(3),
.nova-revealed details:nth-child(3) { animation-delay: 200ms; }
.nova-revealed .group:nth-child(4),
.nova-revealed details:nth-child(4) { animation-delay: 300ms; }
.nova-revealed .group:nth-child(5),
.nova-revealed details:nth-child(5) { animation-delay: 400ms; }

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

/* ==========================================
   Header Scroll Effect
   ========================================== */
header {
    transition: transform 0.35s ease, 
                background-color 0.35s ease, 
                box-shadow 0.35s ease;
}

.nova-header-scrolled {
    box-shadow: 0 4px 30px rgba(188, 74, 47, 0.12);
}

/* ==========================================
   Mobile Menu
   ========================================== */
#mobile-menu {
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu a {
    opacity: 0;
    transform: translateY(15px);
    animation: menuItemIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#mobile-menu.opacity-100 a:nth-child(2)  { animation-delay: 50ms; }
#mobile-menu.opacity-100 a:nth-child(3)  { animation-delay: 100ms; }
#mobile-menu.opacity-100 a:nth-child(4)  { animation-delay: 150ms; }
#mobile-menu.opacity-100 a:nth-child(5)  { animation-delay: 200ms; }
#mobile-menu.opacity-100 a:nth-child(6)  { animation-delay: 250ms; }
#mobile-menu.opacity-100 a:nth-child(7)  { animation-delay: 300ms; }
#mobile-menu.opacity-100 a:nth-child(8)  { animation-delay: 350ms; }
#mobile-menu.opacity-100 a:nth-child(9)  { animation-delay: 400ms; }
#mobile-menu.opacity-100 a:nth-child(10) { animation-delay: 450ms; }

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

/* ==========================================
   Back to Top Button
   ========================================== */
#back-to-top {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
    transform: scale(1.15);
}

/* ==========================================
   Interactive Buttons & Links
   ========================================== */
a, button {
    transition: all 0.25s ease;
}

/* Glow effect on primary buttons */
.bg-primary:hover,
[class*="bg-primary"]:hover {
    box-shadow: 0 0 25px rgba(188, 74, 47, 0.25);
}

/* Card hover lift */
[class*="hover:-translate-y"] {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease;
}

/* ==========================================
   Custom Scrollbar
   ========================================== */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #000;
}

::-webkit-scrollbar-thumb {
    background: rgba(188, 74, 47, 0.25);
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(188, 74, 47, 0.5);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(188, 74, 47, 0.25) #120d12;
}

/* ==========================================
   Focus Styles (Accessibility)
   ========================================== */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid rgb(var(--color-primary));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================
   Selection Color
   ========================================== */
::selection {
    background: rgb(var(--color-primary));
    color: #120d12;
}

/* ==========================================
   Scrollbar Hide Utility
   ========================================== */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}