:root {
    --animation-duration-fast: 0.3s;
    --animation-duration-normal: 0.5s;
    --animation-duration-slow: 0.8s;
    --animation-duration-slower: 1.2s;
    --animation-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
    --animation-easing-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------
   Keyframe Animations
   -------------------------------------------- */

/* Fade In Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade In */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Fade In Down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Subtle Scale */
@keyframes subtleScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Gentle Pulse */
@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 4px 15px rgba(212, 168, 67, 0.3);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 6px 25px rgba(212, 168, 67, 0.45);
    }
}

/* Soft Glow */
@keyframes softGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px rgba(212, 168, 67, 0.15),
            0 0 40px rgba(212, 168, 67, 0.1),
            inset 0 0 60px rgba(212, 168, 67, 0.03);
    }
    50% {
        box-shadow: 
            0 0 30px rgba(212, 168, 67, 0.2),
            0 0 60px rgba(212, 168, 67, 0.15),
            inset 0 0 80px rgba(212, 168, 67, 0.05);
    }
}

/* Underline Grow */
@keyframes underlineGrow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* --------------------------------------------
   Scroll-Triggered Animations
   -------------------------------------------- */

/* Base state: hidden, slightly below position */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: 
        opacity var(--animation-duration-slow) var(--animation-easing),
        transform var(--animation-duration-slow) var(--animation-easing);
}

/* Visible state: shown, in position */
.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for sequential reveals */
.animate-on-scroll.delay-1 {
    transition-delay: 0.1s;
}

.animate-on-scroll.delay-2 {
    transition-delay: 0.2s;
}

.animate-on-scroll.delay-3 {
    transition-delay: 0.3s;
}

.animate-on-scroll.delay-4 {
    transition-delay: 0.4s;
}

.animate-on-scroll.delay-5 {
    transition-delay: 0.5s;
}

/* Variant: Fade in from left */
.animate-on-scroll.from-left {
    transform: translateX(-30px);
}

.animate-on-scroll.from-left.is-visible {
    transform: translateX(0);
}

/* Variant: Fade in from right */
.animate-on-scroll.from-right {
    transform: translateX(30px);
}

.animate-on-scroll.from-right.is-visible {
    transform: translateX(0);
}

/* Variant: Scale up */
.animate-on-scroll.scale-up {
    transform: scale(0.9);
}

.animate-on-scroll.scale-up.is-visible {
    transform: scale(1);
}

/* --------------------------------------------
   Hero Animations (Auto-play on load)
   -------------------------------------------- */
.hero-title {
    animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) 0.2s both;
}

.hero-verse {
    animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) 0.4s both;
}

.hero-cta {
    animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) 0.5s both;
}

.hero-text {
    animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) 0.6s both;
}

.hero-buttons {
    animation: fadeInUp var(--animation-duration-slow) var(--animation-easing) 0.7s both;
}

/* --------------------------------------------
   Button Animations
   -------------------------------------------- */

/* Subtle pulse on primary buttons */
.btn-primary:hover {
    animation: gentlePulse 1.5s ease-in-out infinite;
}

.btn-primary:focus,
.btn-primary:active {
    animation: none;
}

/* Smooth lift and glow for all buttons */
.btn {
    transition: 
        transform var(--animation-duration-fast) var(--animation-easing),
        box-shadow var(--animation-duration-fast) var(--animation-easing),
        background-color var(--animation-duration-fast) var(--animation-easing),
        border-color var(--animation-duration-fast) var(--animation-easing);
}

/* --------------------------------------------
   Navigation Link Animations
   -------------------------------------------- */

/* Smooth underline animation */
.navbar-link {
    position: relative;
    overflow: hidden;
}

.navbar-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--color-accent-gold);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.navbar-link:hover::after,
.navbar-link.active::after {
    transform: scaleX(1);
}

/* Nav link color transition */
.navbar-link {
    transition: color var(--animation-duration-fast) var(--animation-easing);
}

/* --------------------------------------------
   Prayer Section Glow
   -------------------------------------------- */
.prayer-card {
    animation: softGlow 4s ease-in-out infinite;
}

/* Reduce motion version */
@media (prefers-reduced-motion: reduce) {
    .prayer-card {
        animation: none;
        box-shadow: 
            0 0 25px rgba(212, 168, 67, 0.15),
            0 0 50px rgba(212, 168, 67, 0.1);
    }
}

/* --------------------------------------------
   Card Hover Animations
   -------------------------------------------- */
.step-card,
.testimony-card,
.strategy-card {
    transition: 
        transform var(--animation-duration-normal) var(--animation-easing),
        box-shadow var(--animation-duration-normal) var(--animation-easing);
}

.step-card:hover,
.testimony-card:hover,
.strategy-card:hover {
    transform: translateY(-6px);
}

/* Step number subtle bounce on card hover */
.step-card:hover .step-number {
    animation: subtleScale var(--animation-duration-fast) var(--animation-easing-bounce);
}

/* --------------------------------------------
   Verse Block Animations
   -------------------------------------------- */
.verse-block {
    transition: 
        border-color var(--animation-duration-normal) var(--animation-easing),
        background-color var(--animation-duration-normal) var(--animation-easing);
}

.verse-block:hover {
    border-left-color: var(--color-accent-gold-light);
}

.verse-highlight:hover {
    background-color: rgba(212, 168, 67, 0.15);
}

/* --------------------------------------------
   Accordion Animations
   -------------------------------------------- */
.accordion-content {
    transition: max-height var(--animation-duration-slow) var(--animation-easing);
}

.accordion-icon {
    transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.accordion-header {
    transition: background-color var(--animation-duration-fast) var(--animation-easing);
}

/* --------------------------------------------
   Form Input Animations
   -------------------------------------------- */
.form-group input,
.form-group textarea {
    transition: 
        border-color var(--animation-duration-fast) var(--animation-easing),
        box-shadow var(--animation-duration-fast) var(--animation-easing);
}

/* Subtle focus ring animation */
.form-group input:focus,
.form-group textarea:focus {
    animation: subtleScale var(--animation-duration-fast) var(--animation-easing);
}

/* --------------------------------------------
   Romans Road Item Animations
   -------------------------------------------- */
.romans-road-item {
    transition: 
        transform var(--animation-duration-normal) var(--animation-easing),
        box-shadow var(--animation-duration-normal) var(--animation-easing);
}

.romans-road-item:hover {
    transform: translateX(6px);
}

.romans-road-item::before {
    transition: 
        background-color var(--animation-duration-fast) var(--animation-easing),
        transform var(--animation-duration-fast) var(--animation-easing-bounce);
}

.romans-road-item:hover::before {
    background-color: var(--color-accent-gold-light);
    transform: translateY(-50%) scale(1.1);
}

/* --------------------------------------------
   Share Button Animations
   -------------------------------------------- */
.btn-facebook,
.btn-email {
    transition: 
        transform var(--animation-duration-fast) var(--animation-easing),
        box-shadow var(--animation-duration-fast) var(--animation-easing),
        background-color var(--animation-duration-fast) var(--animation-easing);
}

.btn-facebook i,
.btn-email i {
    transition: transform var(--animation-duration-fast) var(--animation-easing);
}

.btn-facebook:hover i,
.btn-email:hover i {
    transform: scale(1.15);
}

/* --------------------------------------------
   Footer Animations
   -------------------------------------------- */
.footer-email a {
    position: relative;
}

.footer-email a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: var(--color-accent-gold-light);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.footer-email a:hover::after {
    transform: scaleX(1);
}

/* --------------------------------------------
   Mobile Menu Animation
   -------------------------------------------- */
.navbar-menu {
    transition: right var(--animation-duration-normal) var(--animation-easing);
}

.navbar-overlay {
    opacity: 0;
    transition: opacity var(--animation-duration-normal) var(--animation-easing);
    pointer-events: none;
}

.navbar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

/* Hamburger icon rotation */
.navbar-toggle i {
    transition: transform var(--animation-duration-normal) var(--animation-easing);
}

.navbar-toggle.active i {
    transform: rotate(90deg);
}

/* --------------------------------------------
   Load More Button Animation
   -------------------------------------------- */
#load-more-testimonies {
    transition: 
        transform var(--animation-duration-fast) var(--animation-easing),
        background-color var(--animation-duration-fast) var(--animation-easing),
        border-color var(--animation-duration-fast) var(--animation-easing);
}

#load-more-testimonies:hover {
    transform: translateY(-2px);
}

#load-more-testimonies:active {
    transform: translateY(0);
}

/* --------------------------------------------
   Accessibility: 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;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* --------------------------------------------
   Loading State Animation
   -------------------------------------------- */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.loading {
    background: linear-gradient(
        90deg,
        var(--color-gray-light) 25%,
        var(--color-gray-warm) 50%,
        var(--color-gray-light) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* --------------------------------------------
   Focus Visible Styles (Accessibility)
   -------------------------------------------- */
.btn:focus-visible,
.navbar-link:focus-visible,
.accordion-header:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}

/* Remove default focus outline since we have custom */
.btn:focus,
.navbar-link:focus,
.accordion-header:focus {
    outline: none;
}

/* Keep focus visible for keyboard navigation */
.btn:focus-visible,
.navbar-link:focus-visible {
    outline: 2px solid var(--color-accent-gold);
    outline-offset: 2px;
}