/* ============================================
   WEDDING CLUB - Scroll & Entrance Animations
   ============================================ */

/* ---- Animation Keyframes ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes zoomIn {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(60px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleUp {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes revealRight {
    from { clip-path: inset(0 100% 0 0); }
    to { clip-path: inset(0 0 0 0); }
}

@keyframes shimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

@keyframes countUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll-Triggered Animation Classes ---- */
.animate-on-scroll {
    opacity: 0;
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-on-scroll.animated {
    opacity: 1;
}

/* Specific animation directions */
.animate-on-scroll[data-animation="fadeInUp"] {
    transform: translateY(40px);
}
.animate-on-scroll[data-animation="fadeInUp"].animated {
    transform: translateY(0);
}

.animate-on-scroll[data-animation="fadeInDown"] {
    transform: translateY(-40px);
}
.animate-on-scroll[data-animation="fadeInDown"].animated {
    transform: translateY(0);
}

.animate-on-scroll[data-animation="fadeInLeft"] {
    transform: translateX(-40px);
}
.animate-on-scroll[data-animation="fadeInLeft"].animated {
    transform: translateX(0);
}

.animate-on-scroll[data-animation="fadeInRight"] {
    transform: translateX(40px);
}
.animate-on-scroll[data-animation="fadeInRight"].animated {
    transform: translateX(0);
}

.animate-on-scroll[data-animation="zoomIn"] {
    transform: scale(0.85);
}
.animate-on-scroll[data-animation="zoomIn"].animated {
    transform: scale(1);
}

.animate-on-scroll[data-animation="fadeIn"] {
    transform: none;
}
.animate-on-scroll[data-animation="fadeIn"].animated {
    transform: none;
}

/* Delay classes */
.animate-on-scroll[data-delay="100"] { transition-delay: 0.1s; }
.animate-on-scroll[data-delay="200"] { transition-delay: 0.2s; }
.animate-on-scroll[data-delay="300"] { transition-delay: 0.3s; }
.animate-on-scroll[data-delay="400"] { transition-delay: 0.4s; }
.animate-on-scroll[data-delay="500"] { transition-delay: 0.5s; }
.animate-on-scroll[data-delay="600"] { transition-delay: 0.6s; }

/* ---- Hero Entrance Animations ---- */
.hero-label {
    animation: fadeInDown 0.8s ease 0.3s both;
}

.hero h1 {
    animation: fadeInUp 1s ease 0.5s both;
}

.hero-desc {
    animation: fadeInUp 1s ease 0.7s both;
}

.hero-buttons {
    animation: fadeInUp 1s ease 0.9s both;
}

.hero-stats-float {
    animation: fadeInRight 1s ease 1.1s both;
}

.hero-decor-1 {
    animation: fadeIn 1.5s ease 1.3s both;
}

.hero-decor-2 {
    animation: fadeIn 1.5s ease 1.5s both;
}

/* ---- Counter Animation ---- */
.counter-animated {
    animation: countUp 0.8s ease both;
}

/* ---- Staggered Grid Animations ---- */
.stagger-animation > *:nth-child(1) { transition-delay: 0s; }
.stagger-animation > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-animation > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-animation > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-animation > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-animation > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-animation > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-animation > *:nth-child(8) { transition-delay: 0.7s; }

/* ---- Parallax Effect Classes ---- */
.parallax-bg {
    transition: transform 0.1s linear;
    will-change: transform;
}

/* ---- Hover Micro-animations ---- */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

.hover-glow {
    transition: box-shadow 0.3s ease;
}
.hover-glow:hover {
    box-shadow: 0 0 30px rgba(184, 134, 11, 0.3);
}

/* ---- Loading Skeleton ---- */
.skeleton {
    background: linear-gradient(90deg, 
        var(--beige) 25%, 
        rgba(184,134,11,0.08) 50%, 
        var(--beige) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}

/* ---- Page Transition ---- */
.page-transition-enter {
    opacity: 0;
    transform: translateY(20px);
}

.page-transition-active {
    animation: fadeInUp 0.6s ease forwards;
}

/* ---- Magnetic Button Effect ---- */
.magnetic-btn {
    transition: transform 0.2s ease;
}

/* ---- Image Reveal Animation ---- */
.image-reveal {
    position: relative;
    overflow: hidden;
}

.image-reveal::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: var(--gold);
    z-index: 2;
    transform: scaleX(1);
    transform-origin: right;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.image-reveal.revealed::before {
    transform: scaleX(0);
}

/* ---- Text Split Animation ---- */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

.text-reveal.animated span {
    transform: translateY(0);
}

/* ---- Marquee Animation ---- */
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.marquee {
    overflow: hidden;
    white-space: nowrap;
}

.marquee-content {
    display: inline-block;
    animation: marquee 30s linear infinite;
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}