/* Site-wide motion, paired with assets/js/rhc-motion.js */

/* Scroll reveal: hidden until the script marks it visible. The keyframes end at the element's
   natural state and are not kept afterwards, so existing hover transforms keep working. */
.rhc-reveal:not(.is-visible) {
    opacity: 0;
}

.rhc-reveal.is-visible {
    animation: rhc-reveal-up .75s cubic-bezier(.2, .7, .2, 1) backwards;
    animation-delay: var(--rhc-delay, 0s);
}

.rhc-reveal-zoom.is-visible {
    animation-name: rhc-reveal-zoom;
}

@keyframes rhc-reveal-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
}

@keyframes rhc-reveal-zoom {
    from {
        opacity: 0;
        transform: scale(.92);
    }
}

/* Reading progress bar */
.rhc-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 2000;
    background: var(--royal-gold-grad);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}

/* Page headers: slow gold shimmer behind the title */
.rhc-page-header {
    position: relative;
    overflow: hidden;
}

.rhc-page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 120%, rgba(197, 160, 89, .22), transparent 60%);
    animation: rhc-glow 6s ease-in-out infinite alternate;
    pointer-events: none;
}

.rhc-page-header .container {
    position: relative;
}

@keyframes rhc-glow {
    from { opacity: .4; transform: scale(1); }
    to { opacity: 1; transform: scale(1.15); }
}

/* Section titles: a small gold bar grows under the heading */
.rhc-section-title h2::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: var(--royal-gold-grad);
    transform: scaleX(0);
    transition: transform .8s cubic-bezier(.2, .7, .2, 1) .35s;
}

.rhc-section-title.is-visible h2::after,
.rhc-section-title.animated h2::after,
.rhc-section-title:not(.rhc-reveal):not(.wow) h2::after {
    transform: scaleX(1);
}

/* Gold buttons: a light sweep on hover */
.btn-primary {
    position: relative;
    overflow: hidden;
}

.btn-primary::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
}

.btn-primary:hover::after {
    animation: rhc-shine .8s ease;
}

@keyframes rhc-shine {
    to { left: 125%; }
}

/* WhatsApp button: soft pulse ring */
.rhc-whatsapp::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid #25D366;
    animation: rhc-pulse 2.4s ease-out infinite;
    pointer-events: none;
}

@keyframes rhc-pulse {
    from { transform: scale(1); opacity: .8; }
    to { transform: scale(1.6); opacity: 0; }
}

/* Category cards: the caption lifts slightly on hover */
.rhc-category-card .overlay {
    transition: padding-bottom .35s ease;
}

.rhc-category-card:hover .overlay {
    padding-bottom: 28px;
}

@media (prefers-reduced-motion: reduce) {
    .rhc-reveal:not(.is-visible) {
        opacity: 1;
    }

    .rhc-page-header::before,
    .rhc-whatsapp::before,
    .btn-primary:hover::after {
        animation: none;
    }
}