/* 
    HARVEY'S BESPOKE - ANIMATIONS 
*/

.reveal-init {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

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

/* Specific Staggering for Bento Grid */
.bento-item:nth-child(1) { transition-delay: 0.1s; }
.bento-item:nth-child(2) { transition-delay: 0.2s; }
.bento-item:nth-child(3) { transition-delay: 0.3s; }
.bento-item:nth-child(4) { transition-delay: 0.4s; }
.bento-item:nth-child(5) { transition-delay: 0.5s; }

/* Mask Reveal for Typography */
.reveal-mask {
    overflow: hidden;
}

.reveal-mask > * {
    transform: translateY(100%);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-mask.revealed > * {
    transform: translateY(0);
}

/* Background Noise Animation (Subtle) */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

.noise::after {
    content: "";
    position: absolute;
    top: -100%;
    left: -100%;
    width: 300%;
    height: 300%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    animation: grain 8s steps(10) infinite;
    opacity: 0.05;
    pointer-events: none;
}