/* ============================================================
   m00nshots.site — Frontend UI animations & transitions
   Smooth hover, motion and polish for the public theme.
   Loaded AFTER the compiled Tailwind build.
   ============================================================ */

/* --- Base link/button transitions --- */
a, button {
    transition: color 0.2s ease, background-color 0.2s ease,
        border-color 0.2s ease, box-shadow 0.2s ease,
        transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
}

/* --- Tabs (Email | SMS switcher) --- */
.tabs-switch a {
    position: relative;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.tabs-switch a:hover { transform: translateY(-1px); }
.tabs-switch a:active { transform: translateY(0) scale(0.98); }
.tabs-switch a.bg-white { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); }

/* --- Action tiles (Copy / Refresh / New / Delete) --- */
.sms-tile {
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    will-change: transform;
}
.sms-tile:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.sms-tile:active {
    transform: translateY(-1px) scale(0.98);
}
.sms-tile i { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sms-tile:hover i { transform: scale(1.15) rotate(-4deg); }

/* --- SMS message rows --- */
.sms-message-row {
    transition: all 0.2s ease;
    position: relative;
    animation: smsRowIn 0.35s ease both;
}
.sms-message-row:hover {
    transform: translateX(4px);
    background: rgba(255, 255, 255, 0.06) !important;
}
.dark .sms-message-row:hover,
html[data-mode="dark"] .sms-message-row:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}
.sms-message-row:active { transform: translateX(2px) scale(0.995); }

/* staggered entrance for message list */
.sms-list .sms-message-row:nth-child(1) { animation-delay: 0.03s; }
.sms-list .sms-message-row:nth-child(2) { animation-delay: 0.06s; }
.sms-list .sms-message-row:nth-child(3) { animation-delay: 0.09s; }
.sms-list .sms-message-row:nth-child(4) { animation-delay: 0.12s; }
.sms-list .sms-message-row:nth-child(5) { animation-delay: 0.15s; }
.sms-list .sms-message-row:nth-child(6) { animation-delay: 0.18s; }

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

/* --- OTP highlight --- */
.sms-otp-code {
    display: inline-block;
    animation: otpPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes otpPop {
    0%   { opacity: 0; transform: scale(0.8); }
    60%  { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

/* --- Copy / refresh buttons in detail pane --- */
.sms-detail-btn { transition: all 0.2s ease; }
.sms-detail-btn:hover { transform: translateY(-2px); filter: brightness(1.1); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
.sms-detail-btn:active { transform: translateY(0) scale(0.97); }

/* --- Redeem / locked card --- */
.sms-redeem-card { animation: cardIn 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both; }
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.sms-redeem-card .sms-lock-icon { animation: lockPulse 2s ease-in-out infinite; }
@keyframes lockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* --- Number display box --- */
#sms_number_id { transition: all 0.25s ease; }
#sms_number_id:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

/* --- Nav links (frontend.nav) --- */
.default-theme nav a {
    position: relative;
}
.default-theme nav a::after {
    content: '';
    position: absolute;
    left: 0; right: 100%;
    bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    opacity: 0.6;
    transition: right 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.default-theme nav a:hover::after { right: 0; }

/* --- Waiting / empty states --- */
.sms-waiting i { animation: spinSlow 2s linear infinite; }
@keyframes spinSlow { to { transform: rotate(360deg); } }

/* --- Generic card hover (mailbox-style pages) --- */
.hover-lift { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hover-lift:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }

/* --- Reduced motion: disable animations --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}