/**
 * FEZIMA Website - Minimal Custom Styles
 * Only @keyframes animations that cannot be done with Tailwind utilities
 */

/* ===========================
   BASE STYLES
   =========================== */

body {
    font-family: 'Inter', system-ui, sans-serif;
    background-color: #0B0B0E;
    color: #ECECEC;
}

/* ===========================
   CANVAS BACKGROUND
   =========================== */

#hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
}

/* ===========================
   FADE-IN ANIMATION
   =========================== */

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

.fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Stagger delays for sequential animations */
.stagger-1 { animation-delay: 0.1s; opacity: 0; }
.stagger-2 { animation-delay: 0.2s; opacity: 0; }
.stagger-3 { animation-delay: 0.3s; opacity: 0; }
.stagger-4 { animation-delay: 0.4s; opacity: 0; }

/* ===========================
   SCROLL REVEAL (Alpine.js)
   =========================== */

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.reveal.show {
    opacity: 1;
    transform: translateY(0);
}