﻿/* ═══════════════════════════════════════════════════════════════════════
   RR Interiors — Scroll Animation System
   Premium reveal · stagger · counter · parallax · hover micro-interactions
   Easing: cubic-bezier(0.16, 1, 0.3, 1)  — expo-out, feels physical
═══════════════════════════════════════════════════════════════════════ */

/* ── Reveal: individual elements ── */
.rr-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.rr-reveal--left  { transform: translateX(-30px); }
.rr-reveal--right { transform: translateX(30px);  }
.rr-reveal--scale { transform: scale(0.92) translateY(16px); }
.rr-reveal.rr-in,
.rr-reveal--left.rr-in,
.rr-reveal--right.rr-in,
.rr-reveal--scale.rr-in {
    opacity: 1;
    transform: none;
}

/* ── Stagger children ── */
.rr-stagger-item {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}
.rr-stagger-item.rr-in {
    opacity: 1;
    transform: none;
}

/* ── Section gold hairline ── */
.section-tittle .rr-gold-line {
    display: block;
    width: 36px;
    height: 1px;
    background: #C8A040;
    margin: 0 auto 22px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.9s 0.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.rr-reveal.rr-in .rr-gold-line,
.section-tittle.rr-in .rr-gold-line {
    transform: scaleX(1);
}

/* ── Stats band: entry sequence ── */
@keyframes rr-stat-pop {
    0%   { opacity: 0; transform: scale(0.80) translateY(10px); }
    65%  { transform: scale(1.05) translateY(-3px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes rr-fade-right-sm {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes rr-fade-up-sm {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rr-stagger-item.rr-in .rr-stat-num {
    animation: rr-stat-pop 0.75s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.rr-stagger-item.rr-in .rr-stat-label {
    animation: rr-fade-right-sm 0.55s 0.18s ease both;
}
.rr-stagger-item.rr-in .rr-stat-desc {
    animation: rr-fade-up-sm 0.55s 0.32s ease both;
}

/* ── Gallery zoom on hover ── */
.single-gallery {
    overflow: hidden !important;
    cursor: pointer;
}
.gallery-img {
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
    transform: scale(1);
}
.single-gallery:hover .gallery-img {
    transform: scale(1.07);
}

/* ── Service card lift ── */
.rr-svc-card {
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s ease !important;
    cursor: default;
}
.rr-svc-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.32) !important;
}

/* ── Testimonial micro-lift ── */
.rr-testi-card {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s ease !important;
}
.rr-testi-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.28) !important;
}

/* ── Team placeholder hover ── */
.single-team {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.single-team:hover {
    transform: translateY(-5px);
}

/* ── Blog post card hover ── */
.blog-caption {
    transition: transform 0.3s ease;
}
.single-blog:hover .blog-caption {
    transform: translateY(-3px);
}

/* ── Diff items: stagger from left ── */
.rr-diff-item.rr-stagger-item {
    transform: translateX(-20px) translateY(0);
}
.rr-diff-item.rr-stagger-item.rr-in {
    transform: none;
}

/* ── Want To Work CTA ── */
.wantToWork-caption {
    overflow: hidden;
}

/* ── Scroll progress indicator ── */
#rr-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, #C8A040, #E8C96C, #9B5B3A);
    z-index: 99999;
    transition: width 0.1s linear;
    pointer-events: none;
}

/* ── Header logo smooth scale on sticky ── */
.main-header .logo img {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.3s ease;
}
.header-sticky.sticky-bar .logo img {
    transform: scale(0.88);
}

/* ── Nav link underline slide-in ── */
.main-menu ul#navigation > li > a {
    position: relative;
}
.main-menu ul#navigation > li > a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #C8A040;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-menu ul#navigation > li > a:hover::after,
.main-menu ul#navigation > li.active > a::after {
    width: 100%;
}

/* ── Parallax host (CSS fallback, JS will override) ── */
.rr-parallax {
    background-position: center 50%;
    background-size: cover;
}

/* ── Animate.css override: use our easing ── */
.animated {
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
    .rr-reveal,
    .rr-stagger-item {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
    .gallery-img { transition: none !important; }
    .rr-svc-card { transition: none !important; }
}
