/* ══════════════════════════════════════════════════════════════
   NEO MONEY TRANSFER — Main CSS
   Tailwind handles utilities; this file handles:
   - Custom keyframes
   - Glass card
   - Card 3D tilt utilities
   - Scroll reveal
   - Skew dividers
   - Reading progress
   - Misc theme utilities
══════════════════════════════════════════════════════════════ */

/* ── Custom text gradients ──────────────────────────────────── */
.text-gradient-neo {
    background: linear-gradient(135deg, #542f8d, #fea237);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-gradient-amber {
    background: linear-gradient(135deg, #fea237 0%, #f77f00 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Glass card ─────────────────────────────────────────────── */
.glass-card {
    background: rgba(255, 255, 255, .07);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .14);
}

/* ── Scroll reveal ──────────────────────────────────────────── */
.reveal         { opacity: 0; will-change: transform, opacity; }
.reveal.up      { transform: translateY(40px); }
.reveal.left    { transform: translateX(-50px); }
.reveal.right   { transform: translateX(50px); }
.reveal.scale   { transform: scale(.88); }
.reveal.in      { opacity: 1 !important; transform: none !important;
                  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.d1 { transition-delay: .06s !important }
.reveal.d2 { transition-delay: .12s !important }
.reveal.d3 { transition-delay: .18s !important }
.reveal.d4 { transition-delay: .24s !important }

/* Inner page banners — never trapped invisible */
.neo-page:not(#page-home) h1,
.page-template h1 { opacity: 1 !important; transform: none !important; }

/* ── 3D Card tilt ───────────────────────────────────────────── */
.card-3d {
    transform-style: preserve-3d;
    transition: transform .4s cubic-bezier(.23,1,.32,1), box-shadow .4s;
    will-change: transform;
}
.card-3d-shine {
    position: absolute; inset: 0; border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.18) 0%, transparent 58%);
    opacity: 0; transition: opacity .3s; z-index: 10;
}
.card-3d:hover .card-3d-shine { opacity: 1; }

/* ── Flying background icons ────────────────────────────────── */
.fly-icon {
    position: absolute; pointer-events: none;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
@keyframes fly1 { from { transform: translateY(0) rotate(0deg) } to { transform: translateY(-28px) rotate(8deg) } }
@keyframes fly2 { from { transform: translateY(0) rotate(0deg) } to { transform: translateY(-20px) rotate(-6deg) } }
@keyframes fly3 { from { transform: translate(0,0) rotate(-4deg) } to { transform: translate(18px,-24px) rotate(6deg) } }
@keyframes fly4 { from { transform: translateY(0) scale(1) } to { transform: translateY(-18px) scale(1.06) } }
@keyframes fly5 { from { transform: translateY(0) rotate(-8deg) } to { transform: translateY(-22px) rotate(4deg) } }
.fly1 { animation-name: fly1 }
.fly2 { animation-name: fly2 }
.fly3 { animation-name: fly3 }
.fly4 { animation-name: fly4 }
.fly5 { animation-name: fly5 }

/* ── Skew dividers ──────────────────────────────────────────── */
.skew-div { position: relative; z-index: 20; height: 0; pointer-events: none; overflow: visible; }
.skew-div::before { content: ''; position: absolute; left: 0; right: 0; top: -48px; height: 96px; pointer-events: none; }
.skew-div.d-right::before { clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); }
.skew-div.d-left::before  { clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%); }
.skew-div.d-flat::before  { height: 48px; top: -24px; clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); }
.skew-div.to-dark::before    { background: #1a0a2e; }
.skew-div.to-white::before   { background: #ffffff; }
.skew-div.to-lavender::before{ background: #f8f4ff; }
@media (max-width: 640px) {
    .skew-div::before { height: 52px; top: -26px; }
    .skew-div.d-flat::before { height: 28px; top: -14px; }
}

/* ── Counter bars ───────────────────────────────────────────── */
.ga-fill { width: 0; transition: width 1.4s cubic-bezier(.22,1,.36,1); }

/* ── Compliance accordion ───────────────────────────────────── */
.comp-item { transition: border-color .25s, box-shadow .25s; }
.comp-item:hover { box-shadow: 0 8px 28px rgba(84,47,141,.1); border-color: rgba(84,47,141,.3); }
.comp-chevron { transition: transform .25s; }

/* ── Scrollbar ──────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: #f5f0ff; }
::-webkit-scrollbar-thumb { background: linear-gradient(#542f8d, #fea237); border-radius: 3px; }

/* ── Hero canvas bg ─────────────────────────────────────────── */
@keyframes tagBlink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes fcFloat1 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes fcFloat2 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px) translateX(4px)} }

/* ── Footer marquee ─────────────────────────────────────────── */
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* ── Drag cursor ────────────────────────────────────────────── */
.cursor-grabbing { cursor: grabbing !important; }

/* ── Nav active state ───────────────────────────────────────── */
.nav-link.current-menu-item,
.nav-link.current-page-ancestor { color: #542f8d !important; background: #f8f4ff !important; }