/* Custom Styles for edge cases and animations */
::selection {
    background-color: #FFC107;
    color: #0a0a0a;
}

.clip-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
}

@media (min-width: 768px) {
    .clip-diagonal {
        clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%);
    }
}

.clip-diagonal-reverse {
    clip-path: polygon(0 6%, 100% 0, 100% 100%, 0 100%);
}

@media (min-width: 768px) {
    .clip-diagonal-reverse {
        clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    }
}

/* Scroll reveal classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }

/* Sharp button hover effect */
.btn-sharp {
    position: relative;
    overflow: hidden;
    z-index: 1;
}
.btn-sharp::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0a0a;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}
.btn-sharp:hover::after {
    transform: translateY(0);
}
.btn-sharp:hover {
    color: #FFC107;
}

.btn-sharp-dark::after {
    background-color: #FFC107;
}
.btn-sharp-dark:hover {
    color: #0a0a0a;
}