/* Fade In Animation with Clip Path */
.hero-svg path,
.hero-svg rect {
    clip-path: inset(0 100% 0 0);
    animation: clipReveal 0.8s cubic-bezier(0.785, 0.135, 0.15, 0.86) forwards;
}

.hero-svg path:nth-child(1) {
    animation-delay: 1.8s;
}

.hero-svg path:nth-child(2) {
    animation-delay: 2.5s;
}

.hero-svg path:nth-child(3) {
    animation-delay: 2.5s;
}

.hero-svg path:nth-child(4) {
    animation-delay: 1.8s;
}

.hero-svg path:nth-child(5) {
    animation-delay: 1.8s;
}

.hero-svg path:nth-child(6) {
    animation-delay: 1.9s;
}

/* .hero-svg path:nth-child(7) { animation-delay: 2s; } */
/* .hero-svg path:nth-child(8) { animation-delay: 2s; } */
.hero-svg rect:nth-child(9) {
    animation-delay: 2.1s;
}

.hero-svg rect:nth-child(10) {
    animation-delay: 2.2s;
}

.hero-svg rect:nth-child(11) {
    animation-delay: 2s;
}

.hero-svg rect {
    animation-delay: 2.5s;
}

@keyframes clipReveal {
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Hover Effect */
.hero-svg path,
.hero-svg rect {
    transition: transform 200ms ease;
    cursor: pointer;
}

.hero-svg path:hover {
    transform: translateY(-8px);
}

.hero-svg path:nth-child(1):hover,
.hero-svg path:nth-child(2):hover,
.hero-svg path:nth-child(3):hover {
    transform: translateY(0px);
}

@media (prefers-color-scheme: dark) {
    .hero-svg path:nth-child(1),
    .hero-svg path:nth-child(4),
    .hero-svg path:nth-child(5),
    .hero-svg path:nth-child(6),
    .hero-svg path:nth-child(7),
    .hero-svg path:nth-child(8),
    .hero-svg path:nth-child(9),
    .hero-svg path:nth-child(10),
    .hero-svg path:nth-child(11) {
        fill: #fcd3d1;
    }

    .hero-svg rect {
        fill: #fcd3d1;
    }

    .hero-svg path:nth-child(2),
    .hero-svg path:nth-child(3) {
        fill: #1e2d3d;
    }
}