/* OQ'O Design - Custom Styles */

[x-cloak] {
    display: none !important;
}

/* ─── Hero Entrance ─── */

@keyframes hero-title-reveal {
    from {
        opacity: 0;
        letter-spacing: 0.3em;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        letter-spacing: -0.02em;
        transform: translateY(0);
    }
}

@keyframes hero-fade-up {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-title {
    opacity: 0;
    animation: hero-title-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

.hero-subtitle {
    opacity: 0;
    animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

.hero-cta {
    opacity: 0;
    animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1s forwards;
}

/* ─── Scroll Reveal ─── */

.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

/* ─── Background blobs ─── */

@keyframes pulse-slow {
    0%, 100% { opacity: 0.3; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.1); }
}

.animate-pulse-slow {
    animation: pulse-slow 6s ease-in-out infinite;
}

/* ─── Scroll indicator ─── */

@keyframes fade-in-delayed {
    0%, 60% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes scroll-line {
    0% { transform: scaleY(0); transform-origin: top; }
    50% { transform: scaleY(1); transform-origin: top; }
    51% { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

.animate-fade-in-delayed {
    animation: fade-in-delayed 3s ease forwards;
}

.animate-scroll-line {
    animation: scroll-line 2s ease-in-out infinite;
}

/* ─── Product Cards ─── */

.product-card {
    transition: transform 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
}

/* ─── Scrollbar ─── */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0D0D0D; }
::-webkit-scrollbar-thumb { background: #8B2252; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #A83279; }

/* ─── Selection ─── */

::selection {
    background: #8B2252;
    color: #F5F0EB;
}

/* ─── Admin inputs ─── */

.admin-input {
    @apply w-full px-4 py-2.5 bg-oqo-gray border border-oqo-cream/10 rounded-lg text-oqo-cream text-sm focus:outline-none focus:border-oqo-marsala/50 transition-colors;
}

.admin-btn {
    @apply inline-flex items-center justify-center font-heading text-sm font-semibold rounded-xl transition-colors;
}

.admin-btn-primary {
    @apply bg-oqo-marsala text-oqo-cream hover:bg-oqo-marsala-light;
}

.admin-btn-ghost {
    @apply bg-oqo-gray text-oqo-cream/60 hover:text-oqo-cream;
}