/* --------------- Base reveal classes for clip path -------- */
/* Base reveal classes */
.reveal-section {
    opacity: 0;
    position: relative;
    overflow: hidden;
}

/* Direction-based reveal classes */
.reveal-right {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.reveal-left {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.reveal-top {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}

.reveal-bottom {
    clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
}

/* New shape-based reveals */
.reveal-diamond {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

.reveal-circle {
    clip-path: circle(0% at 50% 50%);
}

.reveal-triangle {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%);
}

.reveal-star {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 50%);
}

/* Scale reveals */
.reveal-scale {
    transform: scale(0.8);
}

.reveal-scale-up {
    transform: scale(0.5);
}

.reveal-scale-down {
    transform: scale(1.2);
}

/* Fade reveals */
.reveal-fade {
    opacity: 0;
}

.reveal-fade-up {
    opacity: 0;
    transform: translateY(50px);
}

.reveal-fade-down {
    opacity: 0;
    transform: translateY(-50px);
}

.reveal-fade-left {
    opacity: 0;
    transform: translateX(-50px);
}

.reveal-fade-right {
    opacity: 0;
    transform: translateX(50px);
}

/* Rotate reveals */
.reveal-rotate {
    transform: rotate(180deg);
}

.reveal-rotate-left {
    transform: rotate(-180deg);
}

.reveal-rotate-right {
    transform: rotate(180deg);
}

/* Flip reveals */
.reveal-flip-x {
    transform: rotateX(180deg);
}

.reveal-flip-y {
    transform: rotateY(180deg);
}

/* Special effects */
.reveal-blur {
    opacity: 0;
    filter: blur(10px);
}

.reveal-zoom {
    transform: scale(0) rotate(360deg);
}

/* Stagger reveal */
.reveal-stagger > * {
    opacity: 0;
}

/* Grain effect overlay */
.grain-overlay {
    position: absolute;
    top: -150%;
    left: -150%;
    right: -150%;
    bottom: -150%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
    background-size: 150px;
    opacity: 0.15;
    pointer-events: none;
    z-index: 1;
    mix-blend-mode: overlay;
}

/* Gradient overlay effect */
.reveal-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0.2) 0%, transparent 50%, rgba(255,255,255,0.2) 100%);
    z-index: 1;
    opacity: 0;
    pointer-events: none;
}