/* ============================================================
   FUSION BRUSHWORK — Premium Animation Layer (Performance-Optimised)
   ============================================================ */

/* ── 1. Custom Cursor ──────────────────────────────────────── */
/* Hide cursor site-wide; custom cursor handles it */
*, *::before, *::after { cursor: none !important; }

#fb-cursor-ring {
    position: fixed;
    top: 0; left: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1.5px solid rgba(176, 52, 89, 0.6);
    pointer-events: none;
    z-index: 99999;
    will-change: transform;
    transition: width 0.35s ease, height 0.35s ease,
                border-color 0.35s ease, background 0.3s ease;
    mix-blend-mode: multiply;
}

#fb-cursor-dot {
    position: fixed;
    top: 0; left: 0;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #B03459;
    pointer-events: none;
    z-index: 100000;
    will-change: transform;
}

/* Hover state */
body.cursor-hover #fb-cursor-ring {
    width: 56px; height: 56px;
    border-color: #B03459;
    background: rgba(176, 52, 89, 0.08);
}
body.cursor-hover #fb-cursor-dot {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0.6;
}

/* Cursor on text */
body.cursor-text #fb-cursor-ring {
    width: 3px; height: 40px;
    border-radius: 2px;
    border-color: #B03459;
}

/* ── 2. Sparkle Particles ──────────────────────────────────── */
/* Sparkles are now rendered on a <canvas> in JS — zero DOM mutations.
   The old .fb-sparkle class is kept only as a fallback stub. */
#fb-spark-canvas {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 99998;
    will-change: transform;
    transform: translateZ(0);
}

/* ── 3. Text Reveal — Wipe from Left ──────────────────────── */
.reveal-text {
    overflow: hidden;
    display: inline-block;
}

.reveal-text .word-wrap {
    display: inline-block;
    overflow: hidden;
}

.reveal-text .word-inner {
    display: inline-block;
    transform: translateX(-110%);
    opacity: 0;
    transition: none; /* driven by JS / keyframe */
}

/* Activated state */
.reveal-text.is-visible .word-inner {
    animation: wordSlideIn 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes wordSlideIn {
    0%   { transform: translateX(-110%); opacity: 0; }
    60%  { opacity: 1; }
    100% { transform: translateX(0);     opacity: 1; }
}

/* Line-level reveal for headings */
.reveal-line {
    overflow: hidden;
    display: block;
}

.reveal-line-inner {
    display: block;
    transform: translateY(105%) skewY(4deg);
    opacity: 0;
    transition: none;
}

.is-visible .reveal-line-inner,
.reveal-line.is-visible .reveal-line-inner {
    animation: lineRiseIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lineRiseIn {
    0%   { transform: translateY(105%) skewY(4deg); opacity: 0; }
    100% { transform: translateY(0) skewY(0deg);   opacity: 1; }
}

/* Eyebrow character reveal */
.reveal-chars .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(12px);
    animation: charPop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes charPop {
    to { opacity: 1; transform: translateY(0); }
}

/* ── 4. Fade-in from directions ────────────────────────────── */
[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
    transition: opacity 0.85s cubic-bezier(0.22,1,0.36,1),
                transform 0.85s cubic-bezier(0.22,1,0.36,1);
}

[data-reveal="up"]    { transform: translateY(50px); }
[data-reveal="left"]  { transform: translateX(-50px); }
[data-reveal="right"] { transform: translateX(50px); }
[data-reveal="scale"] { transform: scale(0.88); }

[data-reveal].in-view {
    opacity: 1;
    transform: none;
}

/* Stagger delay helpers */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }

/* ── 5. Magnetic button glow pulse ─────────────────────────── */
.btn-gold {
    position: relative;
    overflow: hidden;
}

.btn-gold::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: conic-gradient(from 0deg, #e8637e, #B03459, #e8637e);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
    animation: goldRotate 3s linear infinite;
}

.btn-gold:hover::before { opacity: 0.35; }

@keyframes goldRotate {
    to { transform: rotate(360deg); }
}

/* ── 6. Section transition orb movement ────────────────────── */
.orb-animate-1 {
    animation: orbFloat1 12s ease-in-out infinite;
}
.orb-animate-2 {
    animation: orbFloat2 15s ease-in-out infinite;
}

@keyframes orbFloat1 {
    0%,100% { transform: translate(0,0) scale(1); }
    33%     { transform: translate(40px,-30px) scale(1.06); }
    66%     { transform: translate(-20px,20px) scale(0.96); }
}
@keyframes orbFloat2 {
    0%,100% { transform: translate(0,0) scale(1); }
    40%     { transform: translate(-35px,25px) scale(1.08); }
    70%     { transform: translate(25px,-15px) scale(0.94); }
}

/* ── 7. Page Enter Transition ──────────────────────────────── */
.page-shell {
    animation: pageEnter 0.9s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes pageEnter {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── 8. Floating number counter ────────────────────────────── */
.floating-stat strong {
    display: inline-block;
    animation: statPulse 3.5s ease-in-out infinite;
}

@keyframes statPulse {
    0%,100% { transform: scale(1); }
    50%     { transform: scale(1.06); }
}

/* ── 9. Hero image shimmer ─────────────────────────────────── */
.hero-card {
    position: relative;
    overflow: hidden;
}

.hero-card::after {
    content: "";
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        105deg,
        transparent 20%,
        rgba(255,255,255,0.18) 50%,
        transparent 80%
    );
    animation: heroShimmer 4.5s ease-in-out infinite;
    pointer-events: none;
    border-radius: inherit;
}

@keyframes heroShimmer {
    0%   { left: -100%; opacity: 0; }
    15%  { opacity: 1; }
    100% { left: 140%; opacity: 0; }
}

/* ── 10. Gold underline draw on nav links ───────────────────── */
.site-nav a {
    position: relative;
}

.site-nav a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    height: 1.5px;
    width: 0%;
    background: #B03459;
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.22,1,0.36,1);
}

.site-nav a:hover::after,
.site-nav a.active::after {
    width: 100%;
}

/* ── 11. Card tilt glow spot ────────────────────────────────── */
.service-card,
.blog-card,
.testimonial-card,
.gallery-card {
    position: relative;
    isolation: isolate;
}

/* ── 12. Scroll progress bar ────────────────────────────────── */
#fb-progress {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: linear-gradient(90deg, var(--primary-lite, #e8637e), #B03459);
    z-index: 99997;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px rgba(176, 52, 89, 0.45);
    will-change: transform;
}

/* ── 13. Brand mark spin-on-load ────────────────────────────── */
.brand-mark {
    animation: brandAppear 1.1s cubic-bezier(0.22,1,0.36,1) both;
}

@keyframes brandAppear {
    from { opacity: 0; transform: scale(0.6) rotate(-20deg); }
    to   { opacity: 1; transform: scale(1)   rotate(0deg); }
}

/* ── 14. Section heading accent line draw ───────────────────── */
.section-head h2::after,
.page-hero h1::after {
    content: "";
    display: block;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #B03459, transparent);
    border-radius: 2px;
    margin-top: 8px;
    transition: width 1.2s cubic-bezier(0.22,1,0.36,1);
}

.section-head.drawn h2::after,
.page-hero.drawn h1::after {
    width: 64px;
}

/* ── 15. Card Tilt via CSS custom properties ────────────────── */
/* JS writes --tilt-x / --tilt-y; CSS applies them.
   This pattern keeps JS in the 'write CSS var' lane,
   never triggering layout. */
.service-card,
.blog-card,
.testimonial-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.35s ease;
}

.service-card.is-tilting,
.blog-card.is-tilting,
.testimonial-card.is-tilting {
    transform: perspective(800px)
               rotateX(var(--tilt-x, 0deg))
               rotateY(var(--tilt-y, 0deg))
               scale(1.025);
    transition: none; /* instant during active tilt */
}

/* ── 16. Reduced-motion override ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    #fb-cursor-ring, #fb-cursor-dot, #fb-spark-canvas { display: none !important; }
    *, *::before, *::after { cursor: auto !important; }
}