/* assets/css/style.css */

/* Custom underline animation for links resembling stitching */
.link-underline {
    position: relative;
    text-decoration: none;
}
.link-underline::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 1px;
    bottom: -4px;
    left: 0;
    background-color: theme('colors.luxury-gold');
    transform-origin: bottom right;
    transition: transform 0.4s cubic-bezier(0.86, 0, 0.07, 1);
}
.link-underline:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}

/* Organic blobs and shapes */
.organic-blob {
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: morph 8s ease-in-out infinite;
}

@keyframes morph {
    0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; }
    34% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; }
    67% { border-radius: 100% 60% 60% 100% / 100% 100% 60% 60%; }
}

/* Section transitions - Wave cut */
.wave-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.wave-top svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 80px;
}
.wave-top .shape-fill {
    fill: theme('colors.luxury-ivory');
}

/* Woven Texture */
.woven-texture {
    background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px),
                      repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px);
}

/* Premium Lighting / Gradient */
.premium-gradient {
    background: radial-gradient(circle at center, rgba(212, 175, 55, 0.15) 0%, rgba(253, 251, 247, 0) 70%);
}

/* Image reveal mask */
.image-reveal-wrapper {
    overflow: hidden;
    position: relative;
}
.image-reveal-wrapper img {
    transform: scale(1.1);
    transition: transform 1.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.image-reveal-wrapper:hover img {
    transform: scale(1);
}

/* Lenis smooth scrolling requires html and body to have specific height/overflow properties, 
   but Lenis handles it mostly. Just preventing horizontal scroll globally */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* New Animations for Redesign */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slowPan {
    0% {
        transform: scale(1.05) translate(0, 0);
    }
    100% {
        transform: scale(1.1) translate(-2%, -2%);
    }
}

.fade-up {
    opacity: 0;
    animation: fadeInUp 1.2s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

/* Utility Delays */
.delay-100 { animation-delay: 100ms; }
.delay-200 { animation-delay: 200ms; }
.delay-300 { animation-delay: 300ms; }
.delay-400 { animation-delay: 400ms; }

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.delay-500 { animation-delay: 500ms; }