/* ============================================================
   煜璟城（厦门）建设有限公司 - 全站通用样式
   依赖：Tailwind CSS Play CDN（主题色由 js/tailwind-config.js 提供）
   ============================================================ */

/* ---------- 通用动画 ---------- */
.fade-in { animation: fadeIn 0.3s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.animate-shake { animation: shake 0.5s ease-in-out; }
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* ---------- 登录页（index.php 分栏卡片） ---------- */
.login-overlay {
    background: linear-gradient(135deg, #EEF2FF 0%, #F3F4F6 50%, #FDF2F8 100%);
}
.login-card { border-radius: 24px; box-shadow: 0 24px 60px rgba(30, 41, 59, 0.16); }
.login-stage {
    position: relative;
    width: 100%;
    height: 170px;
    background: linear-gradient(160deg, #EEF2FF 0%, #FDF2F8 55%, #FFF7ED 100%);
    overflow: hidden;
}
.login-form-side { width: 100%; }
@media (min-width: 768px) {
    .login-stage { width: 44%; height: auto; }
    .login-form-side { width: 56%; }
}

/* 登录按钮悬停动画 */
.login-submit-btn {
    position: relative;
    overflow: hidden;
    box-shadow: 0 3px 10px rgba(78, 110, 242, 0.22);
    transition: all 0.3s ease;
}
.login-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(78, 110, 242, 0.38); }
.login-submit-btn:active { transform: translateY(0) scale(0.98); box-shadow: 0 3px 8px rgba(78, 110, 242, 0.25); }
.login-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: skewX(-20deg);
    transition: left 0.55s ease;
}
.login-submit-btn:hover::after { left: 160%; }

/* ---------- 跟随鼠标的橘猫（8 帧贴图，index.php 登录页） ---------- */
.pets-stage { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pet {
    position: absolute;
    width: 200px;
    height: 240px;
    pointer-events: none;
    will-change: transform;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    margin-top: -120px;
}
.cat-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.pet.avoid .cat-img { transform: none; }
.pet.peeking .cat-img { transform: translateX(10px) scale(1.05); }
.pet.happy .cat-img { transform: scale(1.06); }
.pet.sad .cat-img { transform: rotate(4deg) scale(0.96); filter: brightness(0.95); }
.pet.surprise .cat-img { transform: scale(1.1) rotate(-3deg); }
@media (max-width: 767px) {
    .login-card { flex-direction: column; }
    .pet { width: 126px; height: 152px; margin-left: -63px; margin-top: -76px; }
}

/* ---------- 搜索框（index.php / jixie.php） ---------- */
.search-container { position: relative; width: 100%; max-width: 800px; }
.search-btn {
    position: absolute !important;
    right: 8px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 20px !important;
    border-radius: 22px !important;
}
.clear-btn {
    position: absolute !important;
    right: 140px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 30px !important;
    height: 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
@media (max-width: 768px) {
    .search-btn { right: 5px !important; padding: 0 15px !important; font-size: 14px !important; }
    .clear-btn { right: 110px !important; }
}

/* ---------- 表单 ---------- */
button:disabled { opacity: 0.5; cursor: not-allowed; }