/* ==========================================================================
   ANIMATION SYSTEM — V5
   Cinematic, orchestrated, layered
   ========================================================================== */

/* -- Base Reveal -- */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity var(--dur-slow) var(--ease-dramatic),
                transform var(--dur-slow) var(--ease-dramatic);
    will-change: opacity, transform;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* -- Directional Reveals -- */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: opacity var(--dur-slow) var(--ease-dramatic),
                transform var(--dur-slow) var(--ease-dramatic);
    will-change: opacity, transform;
}

.reveal-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity var(--dur-slow) var(--ease-dramatic),
                transform var(--dur-slow) var(--ease-dramatic);
    will-change: opacity, transform;
}

.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* -- Scale Reveal -- */
.reveal-scale {
    opacity: 0;
    transform: scale(0.92);
    transition: opacity var(--dur-slow) var(--ease-dramatic),
                transform var(--dur-slow) var(--ease-dramatic);
    will-change: opacity, transform;
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* -- Fade Only -- */
.fade-in {
    opacity: 0;
    transition: opacity var(--dur-cinematic) var(--ease-out);
}

.fade-in.revealed {
    opacity: 1;
}

/* -- Stagger System (up to 12 children) -- */
.stagger-children .reveal:nth-child(1),
.stagger-children .reveal-left:nth-child(1),
.stagger-children .reveal-right:nth-child(1),
.stagger-children .reveal-scale:nth-child(1)  { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2),
.stagger-children .reveal-left:nth-child(2),
.stagger-children .reveal-right:nth-child(2),
.stagger-children .reveal-scale:nth-child(2)  { transition-delay: 100ms; }
.stagger-children .reveal:nth-child(3),
.stagger-children .reveal-left:nth-child(3),
.stagger-children .reveal-right:nth-child(3),
.stagger-children .reveal-scale:nth-child(3)  { transition-delay: 200ms; }
.stagger-children .reveal:nth-child(4),
.stagger-children .reveal-left:nth-child(4),
.stagger-children .reveal-right:nth-child(4),
.stagger-children .reveal-scale:nth-child(4)  { transition-delay: 300ms; }
.stagger-children .reveal:nth-child(5),
.stagger-children .reveal-left:nth-child(5),
.stagger-children .reveal-right:nth-child(5),
.stagger-children .reveal-scale:nth-child(5)  { transition-delay: 400ms; }
.stagger-children .reveal:nth-child(6),
.stagger-children .reveal-left:nth-child(6),
.stagger-children .reveal-right:nth-child(6),
.stagger-children .reveal-scale:nth-child(6)  { transition-delay: 500ms; }
.stagger-children .reveal:nth-child(7),
.stagger-children .reveal-left:nth-child(7),
.stagger-children .reveal-right:nth-child(7),
.stagger-children .reveal-scale:nth-child(7)  { transition-delay: 600ms; }
.stagger-children .reveal:nth-child(8),
.stagger-children .reveal-left:nth-child(8),
.stagger-children .reveal-right:nth-child(8),
.stagger-children .reveal-scale:nth-child(8)  { transition-delay: 700ms; }
.stagger-children .reveal:nth-child(9),
.stagger-children .reveal-left:nth-child(9),
.stagger-children .reveal-right:nth-child(9),
.stagger-children .reveal-scale:nth-child(9)  { transition-delay: 800ms; }
.stagger-children .reveal:nth-child(10),
.stagger-children .reveal-left:nth-child(10),
.stagger-children .reveal-right:nth-child(10),
.stagger-children .reveal-scale:nth-child(10) { transition-delay: 900ms; }
.stagger-children .reveal:nth-child(11),
.stagger-children .reveal-left:nth-child(11),
.stagger-children .reveal-right:nth-child(11),
.stagger-children .reveal-scale:nth-child(11) { transition-delay: 1000ms; }
.stagger-children .reveal:nth-child(12),
.stagger-children .reveal-left:nth-child(12),
.stagger-children .reveal-right:nth-child(12),
.stagger-children .reveal-scale:nth-child(12) { transition-delay: 1100ms; }

/* -- Gold Line Grow -- */
.gold-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--dur-cinematic) var(--ease-dramatic);
}
.revealed .gold-line,
.gold-line.revealed {
    transform: scaleX(1);
}

/* -- Counter Animation -- */
@keyframes count-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.count-up {
    animation: count-up 0.6s var(--ease-dramatic) both;
}

/* -- Shimmer Effect (for loading / emphasis) -- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(184, 149, 106, 0.06) 40%,
        rgba(184, 149, 106, 0.12) 50%,
        rgba(184, 149, 106, 0.06) 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s var(--ease-smooth) infinite;
}

/* -- Parallax Layer (controlled via JS scroll) -- */
.parallax-slow  { will-change: transform; }
.parallax-fast  { will-change: transform; }

/* -- Image Reveal with Clip -- */
.img-reveal {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s var(--ease-dramatic);
}

.img-reveal.revealed {
    clip-path: inset(0 0 0 0);
}

/* -- Text Split Reveal (char-by-char via JS) -- */
.split-char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.5s var(--ease-dramatic),
                transform 0.5s var(--ease-dramatic);
}

.split-char.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* -- Hero-Specific Entrance -- */
@keyframes hero-title-in {
    from {
        opacity: 0;
        transform: translateY(40px);
        filter: blur(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes hero-desc-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes hero-image-in {
    from { opacity: 0; transform: scale(1.05); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes hero-trust-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hero__title     { animation: hero-title-in 1s var(--ease-dramatic) 0.2s both; }
.hero__desc      { animation: hero-desc-in 0.8s var(--ease-dramatic) 0.6s both; }
.hero__actions   { animation: hero-desc-in 0.8s var(--ease-dramatic) 0.8s both; }
.hero__image-wrap { animation: hero-image-in 1.4s var(--ease-dramatic) 0.1s both; }
.trust-band      { animation: hero-trust-in 0.6s var(--ease-dramatic) 1.2s both; }
.trust-item:nth-child(1) { animation: hero-trust-in 0.5s var(--ease-dramatic) 1.3s both; }
.trust-item:nth-child(2) { animation: hero-trust-in 0.5s var(--ease-dramatic) 1.45s both; }
.trust-item:nth-child(3) { animation: hero-trust-in 0.5s var(--ease-dramatic) 1.6s both; }

/* -- Page Hero Entrance -- */
@keyframes page-hero-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.page-hero__label    { animation: page-hero-in 0.7s var(--ease-dramatic) 0.1s both; }
.page-hero__title    { animation: page-hero-in 0.8s var(--ease-dramatic) 0.25s both; }
.page-hero__subtitle { animation: page-hero-in 0.7s var(--ease-dramatic) 0.45s both; }
.breadcrumb          { animation: page-hero-in 0.5s var(--ease-dramatic) 0.05s both; }

/* -- Section Header Entrance -- */
.section-header .gold-line { transition-delay: 0ms; }
.section-header__title     { transition-delay: 100ms; }
.section-header__subtitle  { transition-delay: 200ms; }

/* -- Card Hover Micro-interactions -- */
@keyframes card-shine {
    0%   { left: -100%; }
    100% { left: 200%; }
}

.service-card:hover::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.04), transparent);
    animation: card-shine 0.6s var(--ease-out);
    pointer-events: none;
    z-index: 3;
}

/* -- Floating Pulse (WhatsApp, CTA) -- */
@keyframes float-pulse {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

.float-pulse {
    animation: float-pulse 3s var(--ease-smooth) infinite;
}

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

/* -- Smooth Collapse/Expand -- */
.collapse {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--dur-slow) var(--ease-dramatic),
                padding var(--dur-slow) var(--ease-dramatic);
}

.collapse.open {
    max-height: 1000px;
}

/* -- Skeleton Loading -- */
@keyframes skeleton {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton {
    background: linear-gradient(
        90deg,
        var(--color-ink-05) 25%,
        var(--color-ink-10) 37%,
        var(--color-ink-05) 63%
    );
    background-size: 200% 100%;
    animation: skeleton 1.5s var(--ease-smooth) infinite;
    border-radius: var(--radius);
}

/* -- Subtle Ambient Glow -- */
@keyframes glow-breathe {
    0%, 100% { opacity: 0.04; transform: scale(1); }
    50%      { opacity: 0.08; transform: scale(1.02); }
}

.ambient-glow {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, var(--color-gold) 0%, transparent 70%);
    animation: glow-breathe 6s var(--ease-smooth) infinite;
    pointer-events: none;
    z-index: 0;
}

/* -- Smooth Page Transition -- */
@keyframes page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body {
    animation: page-enter 0.4s var(--ease-out) both;
}

/* ==========================================================================
   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;
    }

    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .fade-in,
    .gold-line,
    .img-reveal,
    .split-char {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
        filter: none !important;
        transition: none !important;
    }

    body {
        animation: none !important;
    }
}

html.no-js .reveal,
html.no-js .reveal-left,
html.no-js .reveal-right,
html.no-js .reveal-scale,
html.no-js .fade-in,
html.no-js .gold-line,
html.no-js .img-reveal,
html.no-js .split-char {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
}