/*!
 * 五味医学后台 - 登录页动效样式
 * 独立于 FastAdmin 框架，升级时不受影响
 * 载入位置：application/admin/view/index/login.html 的 </head> 前
 */

/* ================= 基础舞台 ================= */
html,
body {
    height: 100%;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

.login-stage {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: #02083a;
}

/* 底部压暗，突出登录面板 */
.login-stage::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top, rgba(2, 8, 58, .72), rgba(2, 8, 58, 0));
}

/* ================= three.js 动态背景 ================= */
.fx-stage-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
    background:
        radial-gradient(circle at 33% 52%, rgba(18, 62, 140, .42), rgba(2, 8, 58, 0) 58%),
        radial-gradient(circle at 78% 18%, rgba(12, 48, 118, .28), rgba(2, 8, 58, 0) 46%),
        #02083a;
}

#fx-scene {
    display: block;
    width: 100%;
    height: 100%;
}

/* WebGL 不可用时的纯 CSS 兜底 */
.fx-stage-bg.no-webgl::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 33%;
    width: 58vmin;
    height: 58vmin;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(60, 160, 255, .28);
    box-shadow: inset 0 0 80px rgba(30, 120, 255, .35), 0 0 120px rgba(20, 90, 220, .28);
    background: radial-gradient(circle at 38% 34%, rgba(90, 190, 255, .28), rgba(8, 30, 90, .1) 62%, rgba(2, 8, 58, 0) 72%);
}

/* 光带扫描 */
.fx-scan {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
}

.fx-scan::before {
    content: '';
    position: absolute;
    top: -70%;
    left: -45%;
    width: 26%;
    height: 240%;
    background: linear-gradient(90deg, rgba(94, 200, 255, 0), rgba(94, 200, 255, .09) 45%, rgba(160, 230, 255, .15) 50%, rgba(94, 200, 255, .09) 55%, rgba(94, 200, 255, 0));
    transform: rotate(16deg);
    animation: scan-sweep 11s ease-in-out infinite;
}

@keyframes scan-sweep {
    0% {
        transform: translate3d(0, 0, 0) rotate(16deg);
        opacity: 0;
    }
    12% {
        opacity: 1;
    }
    78% {
        opacity: 1;
    }
    100% {
        transform: translate3d(560%, 0, 0) rotate(16deg);
        opacity: 0;
    }
}

/* ================= 顶部标题 ================= */
.top-bg {
    background-size: 100% 100%;
    animation: title-drop 1s cubic-bezier(.22, 1, .36, 1) backwards;
}

.top-bg span {
    display: inline-block;
    letter-spacing: 4px;
    text-shadow: 0 0 18px rgba(120, 205, 255, .55), 0 2px 10px rgba(0, 30, 90, .6);
    animation: title-glow 4.5s ease-in-out infinite;
}

.top-bg::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 14px;
    width: 0;
    height: 2px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, #5ec8ff, transparent);
    box-shadow: 0 0 12px #5ec8ff;
    animation: title-line 1.6s .35s cubic-bezier(.22, 1, .36, 1) forwards, title-line-pulse 3s 1.9s ease-in-out infinite;
}

@keyframes title-drop {
    from {
        opacity: 0;
        transform: translateY(-26px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes title-glow {
    0%, 100% {
        text-shadow: 0 0 14px rgba(120, 205, 255, .35), 0 2px 10px rgba(0, 30, 90, .6);
    }
    50% {
        text-shadow: 0 0 26px rgba(140, 220, 255, .85), 0 2px 10px rgba(0, 30, 90, .6);
    }
}

@keyframes title-line {
    to {
        width: 320px;
    }
}

@keyframes title-line-pulse {
    0%, 100% {
        opacity: .5;
    }
    50% {
        opacity: 1;
    }
}

/* ================= 场景切换标签 ================= */
/* 沿用模板里的 .swiper-pagination 类名，避免改动模板内联样式 */
.swiper-pagination {
    top: 12%;
    z-index: 10;
}

.pagination_elem {
    margin-right: 26px;
    color: rgba(255, 255, 255, .62);
    letter-spacing: 1px;
    transition: color .4s ease, text-shadow .4s ease;
}

.pagination_elem:hover {
    color: #fff;
}

.pagination_elem > span {
    margin-top: 7px;
    border-radius: 2px;
    transition: width .5s cubic-bezier(.22, 1, .36, 1), background .4s ease, box-shadow .4s ease;
}

.pagination_elem.on {
    color: #fff;
    text-shadow: 0 0 14px rgba(94, 200, 255, .85);
}

.pagination_elem.on > span {
    background: #1a90fe;
    width: 34px;
    box-shadow: 0 0 12px rgba(26, 144, 254, .9);
}

/* ================= 登录面板 ================= */
/* 覆盖 bootstrap 固定宽度容器，否则百分比定位基准会错位 */
.container {
    z-index: 4;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

/* 右锚定，不依赖容器宽度；left:auto 覆盖模板里的 left:80% */
.login-screen {
    left: auto !important;
    right: 6%;
    top: 55%;
    max-width: 486px;
    min-width: 486px;
    margin: 0;
    transform: translateY(-50%);
    pointer-events: auto;
}

.login-screen .well {
    background-color: rgba(4, 18, 52, .34);
    -webkit-backdrop-filter: blur(9px) saturate(1.15);
    backdrop-filter: blur(9px) saturate(1.15);
    background-size: 100% 100%;
    height: 561px;
    position: relative;
    border-radius: 6px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(120, 200, 255, .18);
    animation: panel-in .95s cubic-bezier(.22, 1, .36, 1) backwards, panel-glow 6s 1s ease-in-out infinite;
}

/* 面板斜向流光 */
.login-screen .well::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -70%;
    width: 45%;
    height: 220%;
    z-index: 50;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(160, 225, 255, .55), rgba(255, 255, 255, 0));
    transform: rotate(18deg);
    filter: blur(2px);
    animation: panel-shine 7.5s 1.6s ease-in-out infinite;
}

/* 面板左上角品牌徽标
   login-2.png 里原来烘焙了一个蓝色图标，已在底图上擦除，
   这里按底图里的原始位置（149,48 / 51px，画布 486x561）用百分比重新摆一个真图 */
.fx-brand {
    position: absolute;
    left: 30.66%;
    top: 8.56%;
    width: 10.7%;
    z-index: 6;
    pointer-events: none;
    animation: brand-in .9s .3s cubic-bezier(.22, 1, .36, 1) backwards;
}

.fx-brand img {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 9px rgba(34, 190, 165, .5));
}

@keyframes brand-in {
    from {
        opacity: 0;
        transform: scale(.55) rotate(-14deg);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes panel-in {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes panel-glow {
    0%, 100% {
        box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(120, 200, 255, .16), 0 0 30px rgba(26, 144, 254, .12);
    }
    50% {
        box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 0 1px rgba(120, 200, 255, .42), 0 0 46px rgba(26, 144, 254, .34);
    }
}

@keyframes panel-shine {
    0%, 58% {
        left: -70%;
        opacity: 0;
    }
    62% {
        opacity: 1;
    }
    82% {
        left: 125%;
        opacity: 1;
    }
    88%, 100% {
        left: 125%;
        opacity: 0;
    }
}

/* ================= 表单 ================= */
/* 逐项入场 */
.login-form .input-group,
.login-form .form-group.checkbox,
.login-form .form-group .btn {
    animation: field-in .7s cubic-bezier(.22, 1, .36, 1) backwards;
}

/* 表单子元素顺序：errtips / token / 用户名 / 密码 / 验证码 / 记住 / 按钮 */
#login-form > .input-group:nth-child(3) {
    animation-delay: .34s;
}

#login-form > .input-group:nth-child(4) {
    animation-delay: .44s;
}

#login-form > .input-group:nth-child(5) {
    animation-delay: .54s;
}

#login-form > .form-group.checkbox {
    animation-delay: .64s;
}

#login-form > .form-group:last-child .btn {
    animation-delay: .74s;
}

@keyframes field-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#login-form .input-group {
    position: relative;
    transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}

#login-form .input-group:focus-within {
    transform: translateX(4px);
}

#login-form .form-control {
    color: #7cc8ff;
    text-shadow: 0 0 10px rgba(70, 170, 255, .35);
    letter-spacing: .5px;
    transition: box-shadow .35s ease, border-color .35s ease, background-color .35s ease;
}

#login-form .form-control:focus {
    border-color: #3aa6ff !important;
    background-color: rgba(26, 144, 254, .04) !important;
    box-shadow: inset 0 0 16px rgba(26, 144, 254, .16), 0 0 0 3px rgba(26, 144, 254, .12);
    outline: none;
}

#login-form .form-control::placeholder {
    color: rgba(150, 205, 255, .66);
    transition: color .3s ease;
}

#login-form .form-control:focus::placeholder {
    color: rgba(150, 205, 255, .4);
}

/* 输入框底部流动光条 */
#login-form .input-group::after {
    content: '';
    position: absolute;
    left: 42px;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, #5ec8ff, transparent);
    opacity: 0;
    transform: scaleX(.2);
    transform-origin: left center;
    transition: opacity .4s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

#login-form .input-group:focus-within::after {
    opacity: 1;
    transform: scaleX(1);
}

/* 左侧图标 */
.input-group-addon {
    transition: color .35s ease, box-shadow .35s ease;
}

.input-group:focus-within .input-group-addon {
    color: #4fb6ff;
    box-shadow: inset 0 0 14px rgba(26, 144, 254, .18);
}

.input-group-addon .glyphicon {
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.input-group:focus-within .input-group-addon .glyphicon {
    transform: scale(1.18) rotate(-6deg);
}

/* 密码显隐 */
.pwd-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    color: #1a90fe;
    opacity: .55;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 6px;
    transition: opacity .3s ease, transform .3s ease;
}

.pwd-toggle:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.12);
}

#pd-form-password {
    padding-right: 38px;
}

/* 验证码：保留原图白底（不做反相，否则底色会变黑） */
.captcha-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer;
    overflow: hidden;
    border-radius: 3px;
}

.captcha-box img {
    display: block;
    border-radius: 3px;
    background: #fff;
    /* 服务端按 config.php 的 imageW/imageH 出图（130x40），
       HTML 上的 width="98" 会把它横向压扁，这里用 CSS 覆盖回原始比例 */
    width: auto;
    height: 40px;
    opacity: 1;
    transition: transform .45s cubic-bezier(.22, 1, .36, 1), opacity .45s ease, filter .45s ease;
}

.captcha-box:hover img {
    transform: scale(1.04);
    filter: brightness(1.04);
}

/* 保持会话 */
.login-form .form-group.checkbox label {
    color: rgba(170, 212, 255, .82);
    font-weight: 400;
    cursor: pointer;
    user-select: none;
    transition: color .3s ease;
}

.login-form .form-group.checkbox label:hover {
    color: #8fd0ff;
}

.login-form .form-group.checkbox input[type=checkbox] {
    position: relative;
    top: 2px;
    margin-right: 6px;
    accent-color: #1a90fe;
    cursor: pointer;
}

/* 登录按钮 */
.btn-block {
    position: relative;
    overflow: hidden;
    background-image: linear-gradient(100deg, #1a90fe, #4bb4ff 55%, #1a90fe) !important;
    background-size: 200% 100% !important;
    border: none !important;
    color: #fff !important;
    font-size: 16px;
    letter-spacing: 6px;
    text-indent: 6px;
    border-radius: 2px;
    box-shadow: 0 8px 24px rgba(26, 144, 254, .35);
    transition: background-position .8s ease, box-shadow .4s ease, transform .18s ease;
}

.btn-block:hover,
.btn-block:focus {
    background-position: 100% 0 !important;
    box-shadow: 0 10px 32px rgba(26, 144, 254, .55);
    color: #fff !important;
}

.btn-block:active {
    transform: translateY(1px) scale(.995);
}

.btn-block::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -60%;
    width: 40%;
    height: 220%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    transform: rotate(20deg);
    animation: btn-shine 3.4s 1.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes btn-shine {
    0%, 60% {
        left: -60%;
        opacity: 0;
    }
    66% {
        opacity: 1;
    }
    88% {
        left: 130%;
        opacity: 1;
    }
    94%, 100% {
        left: 130%;
        opacity: 0;
    }
}

.btn-block.loading {
    pointer-events: none;
    opacity: .85;
    letter-spacing: 2px;
    text-indent: 2px;
}

.btn-block.loading::before {
    content: '';
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 9px;
    vertical-align: -1px;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: fx-spin .7s linear infinite;
}

@keyframes fx-spin {
    to {
        transform: rotate(360deg);
    }
}

/* 错误提示 */
#errtips {
    margin: 0 0 12px;
    padding: 9px 12px;
    font-size: 13px;
    line-height: 1.5;
    color: #ff8b80;
    background: rgba(231, 76, 60, .1);
    border-left: 3px solid #e74c3c;
    border-radius: 2px;
}

#errtips:empty {
    display: none;
}

/* ================= 响应式 ================= */
@media (max-width: 1600px) {
    .login-screen {
        right: 5%;
    }
}

@media (max-width: 1200px) {
    .login-screen {
        left: auto !important;
        right: 50%;
        top: 52%;
        min-width: 0;
        width: 100%;
        max-width: 486px;
        padding: 0 16px;
        transform: translate(50%, -50%);
    }

    .login-form {
        min-width: 0;
    }

    .swiper-pagination {
        top: 88px;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        text-align: center;
        transform: none !important;
    }

    .pagination_elem {
        font-size: 15px;
        margin-right: 18px;
    }

    html,
    body {
        overflow-y: auto;
    }

    .fx-stage-bg {
        background:
            radial-gradient(circle at 50% 46%, rgba(18, 62, 140, .5), rgba(2, 8, 58, 0) 60%),
            #02083a;
    }

    .fx-stage-bg.no-webgl::after {
        left: 50%;
        opacity: .55;
    }
}

@media (max-width: 767px) {
    .top-bg {
        height: 64px;
        padding: 16px;
    }

    .top-bg span {
        font-size: 20px;
        letter-spacing: 2px;
    }

    .swiper-pagination {
        top: 72px;
    }

    .login-screen {
        top: 54%;
    }

    .login-screen .well {
        height: auto;
        min-height: 520px;
    }

    .login-form {
        margin-top: 96px;
        padding: 30px 22px;
    }
}

/* 尊重系统「减少动效」设置 */
@media (prefers-reduced-motion: reduce) {
    .fx-scan::before,
    .top-bg,
    .top-bg span,
    .top-bg::after,
    .login-screen .well,
    .login-screen .well::after,
    .fx-brand,
    .login-form .input-group,
    .login-form .form-group.checkbox,
    .login-form .form-group .btn,
    .btn-block::after {
        animation: none !important;
    }
}