/* =============================================
   GOLDMIND — Smooth Scroll Transition Effects
   Inspired by AdobeStock Smooth Simple Text Template
   Applied to existing site sections
   ============================================= */

/* --- SECTION-LEVEL TRANSITIONS --- */

/* Each major section starts invisible and transitions in */
.sfx-section {
    opacity: 0;
    transition: opacity 1s var(--ease);
}

.sfx-section.sfx-visible {
    opacity: 1;
}

/* --- EFFECT: SUBTLE GLOW BACKDROP for Stats --- */
/* Dark gold-tinted background fades in behind counters */
.sfx-glow {
    position: relative;
    overflow: hidden;
}

.sfx-glow::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(
        135deg,
        rgba(200, 152, 46, 0.03) 0%,
        rgba(200, 152, 46, 0.015) 50%,
        rgba(200, 152, 46, 0.03) 100%
    );
    z-index: 0;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    pointer-events: none;
}

.sfx-glow.sfx-glow-go::before {
    opacity: 1;
}

/* --- EFFECT: STAGGER TEXT REVEAL --- */
/* Headings/lines appear one by one with slide-up */
.sfx-stagger-line {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-stagger-line.sfx-line-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.sfx-stagger-line:nth-child(1) { transition-delay: 0s; }
.sfx-stagger-line:nth-child(2) { transition-delay: 0.12s; }
.sfx-stagger-line:nth-child(3) { transition-delay: 0.24s; }
.sfx-stagger-line:nth-child(4) { transition-delay: 0.36s; }
.sfx-stagger-line:nth-child(5) { transition-delay: 0.48s; }
.sfx-stagger-line:nth-child(6) { transition-delay: 0.60s; }

/* --- EFFECT: CLIP-PATH REVEAL --- */
/* Images/sections reveal with crop animation */
.sfx-clip-up {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-clip-right {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-clip-left {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-clip-center {
    clip-path: inset(50% 50% 50% 50%);
    transition: clip-path 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-clip-up.sfx-clip-visible,
.sfx-clip-right.sfx-clip-visible,
.sfx-clip-left.sfx-clip-visible,
.sfx-clip-center.sfx-clip-visible {
    clip-path: inset(0 0 0 0);
}

/* --- EFFECT: SOFT IMAGE REVEAL (scale + fade) --- */
.sfx-img-reveal {
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 1.4s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 2s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-img-reveal.sfx-img-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- EFFECT: HORIZONTAL LINE EXPAND --- */
.sfx-line {
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-line.sfx-line-visible {
    transform: scaleX(1);
}

/* --- EFFECT: FADE SLIDE UP (enhanced) --- */
.sfx-fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.9s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-fade-up.sfx-fade-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay variants */
.sfx-delay-1 { transition-delay: 0.1s !important; }
.sfx-delay-2 { transition-delay: 0.2s !important; }
.sfx-delay-3 { transition-delay: 0.3s !important; }
.sfx-delay-4 { transition-delay: 0.4s !important; }
.sfx-delay-5 { transition-delay: 0.5s !important; }

/* --- EFFECT: SCALE IN --- */
.sfx-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.sfx-scale.sfx-scale-visible {
    opacity: 1;
    transform: scale(1);
}

/* --- SCROLL PROGRESS BAR --- */
.sfx-progress {
    position: fixed;
    top: 0; left: 0;
    width: 0%;
    height: 2px;
    background: var(--gold);
    z-index: 10000;
    pointer-events: none;
    transition: width 0.1s linear;
}