/* ═══════════════════════════════════════════════════════════
   SMOOTH.CSS — Global polish for all UI interactions
   ═══════════════════════════════════════════════════════════ */

/* ── GPU acceleration for the entire app ── */
* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* ── Splash screen: smooth fade-in ── */
#splash-screen {
    opacity: 1;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

/* Splash image scales in gently */
#splash-screen img {
    animation: splashZoomIn 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes splashZoomIn {
    from { transform: scale(1.08); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

/* Progress bar with smooth shimmer */
.splash-progress-fill {
    background: linear-gradient(90deg, #3390ec 0%, #5cb8ff 50%, #3390ec 100%);
    background-size: 200% 100%;
    animation: fillProgress 2.5s cubic-bezier(0.4, 0, 0.6, 1) forwards,
               shimmer 1.6s linear 0.5s infinite;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Main screen: fade + slide up on appear ── */
#main-screen {
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

/* ── Bottom sheets: smoother spring curve ── */
.bottom-sheet {
    transition: bottom 0.52s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform, bottom;
}

.bottom-sheet-overlay {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity;
}

/* Deposit & Withdraw sheets (inline-styled) */
#usdt-deposit-sheet,
#withdraw-sheet {
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}

/* Overlay for deposit/withdraw */
#usdt-deposit-overlay,
#withdraw-overlay {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: opacity;
}

/* RWA bottom sheet */
.rwa-bottom-sheet {
    transition: transform 0.52s cubic-bezier(0.22, 1, 0.36, 1) !important;
    will-change: transform;
}
.rwa-bottom-sheet-overlay {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ── All buttons: smooth press feedback ── */
button,
.tg-button,
.btn-deposit,
.btn-withdraw,
.connect-btn,
.nav-item,
.invite-card,
.balance-pill,
.sheet-btn-primary,
.sheet-btn-secondary,
.sheet-collect-btn,
.icon-btn,
[id$="-btn"],
[class*="-btn"] {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity   0.18s ease,
                background-color 0.2s ease,
                box-shadow 0.2s ease !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    will-change: transform;
}

button:active,
.tg-button:active,
.btn-deposit:active,
.btn-withdraw:active,
.connect-btn:active,
.nav-item:active,
.invite-card:active,
.balance-pill:active,
.sheet-btn-primary:active,
.sheet-btn-secondary:active,
.sheet-collect-btn:active,
.icon-btn:active {
    transform: scale(0.94) !important;
    opacity: 0.85 !important;
}

/* Nav items: lighter press since they're icons */
.nav-item:active {
    transform: scale(0.88) !important;
    opacity: 0.7 !important;
}

/* ── Nav tab highlight: smooth color change ── */
.nav-item {
    transition: color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Screen transitions: screens fade in/out ── */
.screen {
    transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
}

/* ── Transaction rows: subtle fade in ── */
.tx-item {
    animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Stagger each transaction row */
.tx-item:nth-child(1)  { animation-delay: 0.04s; }
.tx-item:nth-child(2)  { animation-delay: 0.08s; }
.tx-item:nth-child(3)  { animation-delay: 0.12s; }
.tx-item:nth-child(4)  { animation-delay: 0.16s; }
.tx-item:nth-child(5)  { animation-delay: 0.20s; }
.tx-item:nth-child(6)  { animation-delay: 0.24s; }
.tx-item:nth-child(7)  { animation-delay: 0.28s; }
.tx-item:nth-child(8)  { animation-delay: 0.32s; }

/* ── Game cards: smooth hover/press ── */
.billboard,
.game-card,
[class*="game"],
[class*="card"] {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease !important;
    will-change: transform;
}
.billboard:active,
.game-card:active {
    transform: scale(0.97) !important;
}

/* ── Balance pill: smooth pop ── */
.balance-pill {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.2s ease !important;
}

/* ── Invite sheet button bounce ── */
.sheet-btn-primary {
    transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.2s ease !important;
}
.sheet-btn-primary:active {
    transform: scale(0.92) !important;
}

/* ── Sheet handle bar ── */
.sheet-handle,
.rwa-sheet-handle {
    transition: background-color 0.2s ease;
}

/* ── Smooth scroll inside sheets ── */
#usdt-deposit-sheet,
#withdraw-sheet,
.rwa-bottom-sheet,
.bottom-sheet.full-height-sheet {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ── Loading skeleton pulse ── */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.5; }
}

/* ── Wallet balance: number count-up animation ── */
.balance-title {
    transition: opacity 0.3s ease;
}

/* ── Copy link button flash ── */
#btn-copy-ref {
    transition: background-color 0.25s ease,
                transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* ── Withdraw/Deposit action buttons ── */
.btn-deposit,
.btn-withdraw {
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
                opacity 0.18s ease,
                background-color 0.2s ease !important;
}

/* ── Input fields: smooth focus border ── */
input, textarea, select {
    transition: border-color 0.25s ease,
                box-shadow 0.25s ease;
    outline: none;
}
input:focus, textarea:focus {
    box-shadow: 0 0 0 2px rgba(51, 144, 236, 0.35);
}

/* ── Smooth opacity for overlays ── */
[id$="-overlay"] {
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}