/* ============================================================
   keaibanner.css  ——  广告模块样式（方案二·八种不同特效）
   作者：keai.cn
   特点：8 组独立 keyframes + delay 全 0
        每张广告的进入/退出/节奏/颜色都不同
   ============================================================ */

/* ============================================================
   一、容器
   ============================================================ */
.keai-ad-module {
    position: relative;
    width: 250px;                     /* 原 288 → 250，配合图片框 222 缩小 */
    height: 290px;                    /* 原 340 → 290，配合图片框 222 缩小 */
    background: #fafafa;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* ============================================================
   二、每个广告项
   ============================================================ */
.keai-ad-module .ad-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 12px 12px 12px;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ============================================================
   三、图片框
   ============================================================ */
.keai-ad-module .ad-image-wrapper {
    width: 222px;                     /* 原 256 → 222 */
    height: 222px;                    /* 原 256 → 222 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
    border: 2px solid #e8e8e8;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
.keai-ad-module .ad-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.keai-ad-module .ad-image-wrapper a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 0;
}
.keai-ad-module .ad-image-wrapper::after {
    content: '';
    position: absolute;
    top: -2px; left: -2px; right: -2px; bottom: -2px;
    border-radius: 14px;
    pointer-events: none;
    opacity: 0;
    z-index: 1;
    background: linear-gradient(135deg, rgba(255,193,7,0.0), rgba(255,87,34,0.0));
}

/* ============================================================
   四、文字
   ============================================================ */
.keai-ad-module .ad-text {
    margin-top: 10px;
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    white-space: nowrap;
    flex-shrink: 0;
}
.keai-ad-module .ad-text a {
    color: #333;
    text-decoration: none;
    background: linear-gradient(90deg, #8800EE, #FF6600);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: textGradientFlow 4s linear infinite;
}
.keai-ad-module .ad-text a:hover { text-decoration: underline; }
@keyframes textGradientFlow {
    0%   { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}


/* ============================================================
   五、8 组独立关键帧（每张特效不同）
   ============================================================ */

/* ==========================================================
   广告 0：横向拉扯（快进快出）
   窗口 0% ~ 12.5%
   ========================================================== */
@keyframes keai_ad_anim_0 {
    0%          { opacity:0; transform: scaleX(0.6) scaleY(1.4); pointer-events:none; z-index:1; }
    0.625%      { opacity:1; transform: scaleX(1.15) scaleY(0.82); pointer-events:auto; z-index:2; }
    1.5625%     { opacity:1; transform: scaleX(1) scaleY(1); pointer-events:auto; z-index:2; }
    1.5625%, 10.9375% { opacity:1; transform: scaleX(1) scaleY(1); pointer-events:auto; z-index:2; }
    10.9375%    { opacity:1; transform: scaleX(1) scaleY(1); pointer-events:auto; z-index:2; }
    11.71875%   { opacity:0.8; transform: scaleX(1.45) scaleY(0.55); pointer-events:none; z-index:2; }
    12.5%       { opacity:0; transform: scaleX(1.8) scaleY(0.2); pointer-events:none; z-index:1; }
    12.5%, 100% { opacity:0; transform: scaleX(0.6) scaleY(1.4); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_0 {
    0%, 0%      { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    0.625%      { border-color:#ff8a65; box-shadow:0 8px 30px rgba(255,138,101,0.35); border-radius:16px; }
    1.5625%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    10.9375%    { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    11.71875%   { border-color:#ef5350; box-shadow:0 12px 40px rgba(239,83,80,0.40); border-radius:8px; }
    12.5%, 100% { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_0 {
    0%          { opacity:0; transform: translateX(60px) scale(0.9); }
    0.625%      { opacity:1; transform: translateX(-8px) scale(1.08); }
    1.5625%     { opacity:1; transform: translateX(0) scale(1); }
    10.9375%    { opacity:1; transform: translateX(0) scale(1); }
    11.71875%   { opacity:0.6; transform: translateX(-40px) scale(0.9); }
    12.5%       { opacity:0; transform: translateX(-80px) scale(0.85); }
    12.5%, 100% { opacity:0; transform: translateX(60px) scale(0.9); }
}
@keyframes keai_ad_glow_0 {
    0%, 0%      { opacity:0; background: linear-gradient(135deg, rgba(255,193,7,0.0), rgba(255,87,34,0.0)); }
    0.625%      { opacity:0.5; background: linear-gradient(135deg, rgba(255,193,7,0.3), rgba(255,87,34,0.3)); }
    1.5625%     { opacity:0; background: linear-gradient(135deg, rgba(255,193,7,0.0), rgba(255,87,34,0.0)); }
    10.9375%    { opacity:0; background: linear-gradient(135deg, rgba(255,193,7,0.0), rgba(255,87,34,0.0)); }
    11.71875%   { opacity:0.6; background: linear-gradient(135deg, rgba(255,193,7,0.4), rgba(255,87,34,0.4)); }
    12.5%, 100% { opacity:0; background: linear-gradient(135deg, rgba(255,193,7,0.0), rgba(255,87,34,0.0)); }
}

/* ==========================================================
   广告 1：从下向上滑入（慢进快出）
   窗口 12.5% ~ 25%
   ========================================================== */
@keyframes keai_ad_anim_1 {
    0%, 12.5%   { opacity:0; transform: translateY(120px) scale(0.9); pointer-events:none; z-index:1; }
    14.0625%    { opacity:1; transform: translateY(-12px) scale(1.03); pointer-events:auto; z-index:2; }
    15.625%     { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    15.625%, 23.4375% { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    23.4375%    { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    24.21875%   { opacity:0.8; transform: translateY(-40px) scale(0.9); pointer-events:none; z-index:2; }
    25%         { opacity:0; transform: translateY(-120px) scale(0.85); pointer-events:none; z-index:1; }
    25%, 100%   { opacity:0; transform: translateY(120px) scale(0.9); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_1 {
    0%, 12.5%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    14.0625%    { border-color:#64b5f6; box-shadow:0 8px 30px rgba(100,181,246,0.4); border-radius:16px; }
    15.625%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    23.4375%    { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    24.21875%   { border-color:#1976d2; box-shadow:0 12px 40px rgba(25,118,210,0.5); border-radius:8px; }
    25%, 100%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_1 {
    0%, 12.5%   { opacity:0; transform: translateY(40px) scale(0.9); }
    14.0625%    { opacity:1; transform: translateY(-6px) scale(1.06); }
    15.625%     { opacity:1; transform: translateY(0) scale(1); }
    23.4375%    { opacity:1; transform: translateY(0) scale(1); }
    24.21875%   { opacity:0.6; transform: translateY(-30px) scale(0.9); }
    25%         { opacity:0; transform: translateY(-60px) scale(0.85); }
    25%, 100%   { opacity:0; transform: translateY(40px) scale(0.9); }
}
@keyframes keai_ad_glow_1 {
    0%, 12.5%   { opacity:0; background: linear-gradient(135deg, rgba(100,181,246,0.0), rgba(25,118,210,0.0)); }
    14.0625%    { opacity:0.5; background: linear-gradient(135deg, rgba(100,181,246,0.3), rgba(25,118,210,0.3)); }
    15.625%     { opacity:0; background: linear-gradient(135deg, rgba(100,181,246,0.0), rgba(25,118,210,0.0)); }
    23.4375%    { opacity:0; background: linear-gradient(135deg, rgba(100,181,246,0.0), rgba(25,118,210,0.0)); }
    24.21875%   { opacity:0.6; background: linear-gradient(135deg, rgba(100,181,246,0.4), rgba(25,118,210,0.4)); }
    25%, 100%   { opacity:0; background: linear-gradient(135deg, rgba(100,181,246,0.0), rgba(25,118,210,0.0)); }
}

/* ==========================================================
   广告 2：旋转进入（中速）
   窗口 25% ~ 37.5%
   ========================================================== */
@keyframes keai_ad_anim_2 {
    0%, 25%     { opacity:0; transform: rotate(-180deg) scale(0.4); pointer-events:none; z-index:1; }
    26.171875%  { opacity:1; transform: rotate(-60deg) scale(0.92); pointer-events:auto; z-index:2; }
    27.34375%   { opacity:1; transform: rotate(0deg) scale(1); pointer-events:auto; z-index:2; }
    27.34375%, 35.15625% { opacity:1; transform: rotate(0deg) scale(1); pointer-events:auto; z-index:2; }
    35.15625%   { opacity:1; transform: rotate(0deg) scale(1); pointer-events:auto; z-index:2; }
    36.328125%  { opacity:0.7; transform: rotate(60deg) scale(0.8); pointer-events:none; z-index:2; }
    37.5%       { opacity:0; transform: rotate(120deg) scale(0.4); pointer-events:none; z-index:1; }
    37.5%, 100% { opacity:0; transform: rotate(-180deg) scale(0.4); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_2 {
    0%, 25%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    26.171875%  { border-color:#81c784; box-shadow:0 8px 30px rgba(129,199,132,0.4); border-radius:16px; }
    27.34375%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    35.15625%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    36.328125%  { border-color:#388e3c; box-shadow:0 12px 40px rgba(56,142,60,0.5); border-radius:8px; }
    37.5%, 100% { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_2 {
    0%, 25%     { opacity:0; transform: rotate(-30deg) scale(0.7); }
    26.171875%  { opacity:1; transform: rotate(5deg) scale(1.05); }
    27.34375%   { opacity:1; transform: rotate(0deg) scale(1); }
    35.15625%   { opacity:1; transform: rotate(0deg) scale(1); }
    36.328125%  { opacity:0.6; transform: rotate(15deg) scale(0.9); }
    37.5%       { opacity:0; transform: rotate(30deg) scale(0.7); }
    37.5%, 100% { opacity:0; transform: rotate(-30deg) scale(0.7); }
}
@keyframes keai_ad_glow_2 {
    0%, 25%     { opacity:0; background: linear-gradient(135deg, rgba(129,199,132,0.0), rgba(56,142,60,0.0)); }
    26.171875%  { opacity:0.5; background: linear-gradient(135deg, rgba(129,199,132,0.3), rgba(56,142,60,0.3)); }
    27.34375%   { opacity:0; background: linear-gradient(135deg, rgba(129,199,132,0.0), rgba(56,142,60,0.0)); }
    35.15625%   { opacity:0; background: linear-gradient(135deg, rgba(129,199,132,0.0), rgba(56,142,60,0.0)); }
    36.328125%  { opacity:0.6; background: linear-gradient(135deg, rgba(129,199,132,0.4), rgba(56,142,60,0.4)); }
    37.5%, 100% { opacity:0; background: linear-gradient(135deg, rgba(129,199,132,0.0), rgba(56,142,60,0.0)); }
}

/* ==========================================================
   广告 3：从上方滑入（中速）
   窗口 37.5% ~ 50%
   ========================================================== */
@keyframes keai_ad_anim_3 {
    0%, 37.5%   { opacity:0; transform: translateY(-120px) scale(0.9); pointer-events:none; z-index:1; }
    38.28125%   { opacity:1; transform: translateY(8px) scale(1.02); pointer-events:auto; z-index:2; }
    39.0625%    { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    39.0625%, 46.875% { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    46.875%     { opacity:1; transform: translateY(0) scale(1); pointer-events:auto; z-index:2; }
    48.4375%    { opacity:0.7; transform: translateY(40px) scale(0.9); pointer-events:none; z-index:2; }
    50%         { opacity:0; transform: translateY(120px) scale(0.85); pointer-events:none; z-index:1; }
    50%, 100%   { opacity:0; transform: translateY(-120px) scale(0.9); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_3 {
    0%, 37.5%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    38.28125%   { border-color:#ba68c8; box-shadow:0 8px 30px rgba(186,104,200,0.4); border-radius:16px; }
    39.0625%    { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    46.875%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    48.4375%    { border-color:#7b1fa2; box-shadow:0 12px 40px rgba(123,31,162,0.5); border-radius:8px; }
    50%, 100%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_3 {
    0%, 37.5%   { opacity:0; transform: translateY(-40px) scale(0.9); }
    38.28125%   { opacity:1; transform: translateY(6px) scale(1.05); }
    39.0625%    { opacity:1; transform: translateY(0) scale(1); }
    46.875%     { opacity:1; transform: translateY(0) scale(1); }
    48.4375%    { opacity:0.6; transform: translateY(30px) scale(0.9); }
    50%         { opacity:0; transform: translateY(60px) scale(0.85); }
    50%, 100%   { opacity:0; transform: translateY(-40px) scale(0.9); }
}
@keyframes keai_ad_glow_3 {
    0%, 37.5%   { opacity:0; background: linear-gradient(135deg, rgba(186,104,200,0.0), rgba(123,31,162,0.0)); }
    38.28125%   { opacity:0.5; background: linear-gradient(135deg, rgba(186,104,200,0.3), rgba(123,31,162,0.3)); }
    39.0625%    { opacity:0; background: linear-gradient(135deg, rgba(186,104,200,0.0), rgba(123,31,162,0.0)); }
    46.875%     { opacity:0; background: linear-gradient(135deg, rgba(186,104,200,0.0), rgba(123,31,162,0.0)); }
    48.4375%    { opacity:0.6; background: linear-gradient(135deg, rgba(186,104,200,0.4), rgba(123,31,162,0.4)); }
    50%, 100%   { opacity:0; background: linear-gradient(135deg, rgba(186,104,200,0.0), rgba(123,31,162,0.0)); }
}

/* ==========================================================
   广告 4：缩放弹入（快进慢出）
   窗口 50% ~ 62.5%
   ========================================================== */
@keyframes keai_ad_anim_4 {
    0%, 50%     { opacity:0; transform: scale(0.2); pointer-events:none; z-index:1; }
    51.171875%  { opacity:1; transform: scale(1.18); pointer-events:auto; z-index:2; }
    52.34375%   { opacity:1; transform: scale(1); pointer-events:auto; z-index:2; }
    52.34375%, 60.15625% { opacity:1; transform: scale(1); pointer-events:auto; z-index:2; }
    60.15625%   { opacity:1; transform: scale(1); pointer-events:auto; z-index:2; }
    61.328125%  { opacity:0.7; transform: scale(0.7); pointer-events:none; z-index:2; }
    62.5%       { opacity:0; transform: scale(0.2); pointer-events:none; z-index:1; }
    62.5%, 100% { opacity:0; transform: scale(0.2); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_4 {
    0%, 50%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    51.171875%  { border-color:#ffd54f; box-shadow:0 8px 30px rgba(255,213,79,0.5); border-radius:16px; }
    52.34375%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    60.15625%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    61.328125%  { border-color:#ffa000; box-shadow:0 12px 40px rgba(255,160,0,0.5); border-radius:8px; }
    62.5%, 100% { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_4 {
    0%, 50%     { opacity:0; transform: scale(0.4); }
    51.171875%  { opacity:1; transform: scale(1.15); }
    52.34375%   { opacity:1; transform: scale(1); }
    60.15625%   { opacity:1; transform: scale(1); }
    61.328125%  { opacity:0.6; transform: scale(0.85); }
    62.5%       { opacity:0; transform: scale(0.4); }
    62.5%, 100% { opacity:0; transform: scale(0.4); }
}
@keyframes keai_ad_glow_4 {
    0%, 50%     { opacity:0; background: linear-gradient(135deg, rgba(255,213,79,0.0), rgba(255,160,0,0.0)); }
    51.171875%  { opacity:0.6; background: linear-gradient(135deg, rgba(255,213,79,0.4), rgba(255,160,0,0.4)); }
    52.34375%   { opacity:0; background: linear-gradient(135deg, rgba(255,213,79,0.0), rgba(255,160,0,0.0)); }
    60.15625%   { opacity:0; background: linear-gradient(135deg, rgba(255,213,79,0.0), rgba(255,160,0,0.0)); }
    61.328125%  { opacity:0.6; background: linear-gradient(135deg, rgba(255,213,79,0.4), rgba(255,160,0,0.4)); }
    62.5%, 100% { opacity:0; background: linear-gradient(135deg, rgba(255,213,79,0.0), rgba(255,160,0,0.0)); }
}

/* ==========================================================
   广告 5：从右滑入 + 模糊（慢进慢出）
   窗口 62.5% ~ 75%
   ========================================================== */
@keyframes keai_ad_anim_5 {
    0%, 62.5%   { opacity:0; transform: translateX(140%) scale(0.85); filter: blur(8px); pointer-events:none; z-index:1; }
    64.0625%    { opacity:1; transform: translateX(-10px) scale(1); filter: blur(0); pointer-events:auto; z-index:2; }
    65.625%     { opacity:1; transform: translateX(0) scale(1); filter: blur(0); pointer-events:auto; z-index:2; }
    65.625%, 71.875% { opacity:1; transform: translateX(0) scale(1); filter: blur(0); pointer-events:auto; z-index:2; }
    71.875%     { opacity:1; transform: translateX(0) scale(1); filter: blur(0); pointer-events:auto; z-index:2; }
    73.4375%    { opacity:0.7; transform: translateX(-40px) scale(0.9); filter: blur(2px); pointer-events:none; z-index:2; }
    75%         { opacity:0; transform: translateX(-140%) scale(0.85); filter: blur(8px); pointer-events:none; z-index:1; }
    75%, 100%   { opacity:0; transform: translateX(140%) scale(0.85); filter: blur(8px); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_5 {
    0%, 62.5%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    64.0625%    { border-color:#4dd0e1; box-shadow:0 8px 30px rgba(77,208,225,0.45); border-radius:16px; }
    65.625%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    71.875%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    73.4375%    { border-color:#00838f; box-shadow:0 12px 40px rgba(0,136,143,0.5); border-radius:8px; }
    75%, 100%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_5 {
    0%, 62.5%   { opacity:0; transform: translateX(60px); filter: blur(4px); }
    64.0625%    { opacity:1; transform: translateX(-8px); filter: blur(0); }
    65.625%     { opacity:1; transform: translateX(0); filter: blur(0); }
    71.875%     { opacity:1; transform: translateX(0); filter: blur(0); }
    73.4375%    { opacity:0.6; transform: translateX(-30px); filter: blur(1px); }
    75%         { opacity:0; transform: translateX(-60px); filter: blur(4px); }
    75%, 100%   { opacity:0; transform: translateX(60px); filter: blur(4px); }
}
@keyframes keai_ad_glow_5 {
    0%, 62.5%   { opacity:0; background: linear-gradient(135deg, rgba(77,208,225,0.0), rgba(0,131,143,0.0)); }
    64.0625%    { opacity:0.55; background: linear-gradient(135deg, rgba(77,208,225,0.35), rgba(0,131,143,0.35)); }
    65.625%     { opacity:0; background: linear-gradient(135deg, rgba(77,208,225,0.0), rgba(0,131,143,0.0)); }
    71.875%     { opacity:0; background: linear-gradient(135deg, rgba(77,208,225,0.0), rgba(0,131,143,0.0)); }
    73.4375%    { opacity:0.6; background: linear-gradient(135deg, rgba(77,208,225,0.4), rgba(0,131,143,0.4)); }
    75%, 100%   { opacity:0; background: linear-gradient(135deg, rgba(77,208,225,0.0), rgba(0,131,143,0.0)); }
}

/* ==========================================================
   广告 6：斜切进入（快进快出）
   窗口 75% ~ 87.5%
   ========================================================== */
@keyframes keai_ad_anim_6 {
    0%, 75%     { opacity:0; transform: skewX(30deg) scale(0.6); pointer-events:none; z-index:1; }
    75.78125%   { opacity:1; transform: skewX(-8deg) scale(1.05); pointer-events:auto; z-index:2; }
    76.5625%    { opacity:1; transform: skewX(0deg) scale(1); pointer-events:auto; z-index:2; }
    76.5625%, 85.9375% { opacity:1; transform: skewX(0deg) scale(1); pointer-events:auto; z-index:2; }
    85.9375%    { opacity:1; transform: skewX(0deg) scale(1); pointer-events:auto; z-index:2; }
    86.71875%   { opacity:0.7; transform: skewX(-20deg) scale(0.85); pointer-events:none; z-index:2; }
    87.5%       { opacity:0; transform: skewX(-40deg) scale(0.6); pointer-events:none; z-index:1; }
    87.5%, 100% { opacity:0; transform: skewX(30deg) scale(0.6); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_6 {
    0%, 75%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    75.78125%   { border-color:#f06292; box-shadow:0 8px 30px rgba(240,98,146,0.45); border-radius:16px; }
    76.5625%    { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    85.9375%    { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    86.71875%   { border-color:#c2185b; box-shadow:0 12px 40px rgba(194,24,91,0.5); border-radius:8px; }
    87.5%, 100% { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_6 {
    0%, 75%     { opacity:0; transform: skewX(20deg) translateX(30px); }
    75.78125%   { opacity:1; transform: skewX(-6deg) translateX(-4px); }
    76.5625%    { opacity:1; transform: skewX(0) translateX(0); }
    85.9375%    { opacity:1; transform: skewX(0) translateX(0); }
    86.71875%   { opacity:0.6; transform: skewX(-10deg) translateX(-20px); }
    87.5%       { opacity:0; transform: skewX(-20deg) translateX(-40px); }
    87.5%, 100% { opacity:0; transform: skewX(20deg) translateX(30px); }
}
@keyframes keai_ad_glow_6 {
    0%, 75%     { opacity:0; background: linear-gradient(135deg, rgba(240,98,146,0.0), rgba(194,24,91,0.0)); }
    75.78125%   { opacity:0.55; background: linear-gradient(135deg, rgba(240,98,146,0.35), rgba(194,24,91,0.35)); }
    76.5625%    { opacity:0; background: linear-gradient(135deg, rgba(240,98,146,0.0), rgba(194,24,91,0.0)); }
    85.9375%    { opacity:0; background: linear-gradient(135deg, rgba(240,98,146,0.0), rgba(194,24,91,0.0)); }
    86.71875%   { opacity:0.6; background: linear-gradient(135deg, rgba(240,98,146,0.4), rgba(194,24,91,0.4)); }
    87.5%, 100% { opacity:0; background: linear-gradient(135deg, rgba(240,98,146,0.0), rgba(194,24,91,0.0)); }
}

/* ==========================================================
   广告 7：3D 透视翻转（慢进慢出）
   窗口 87.5% ~ 100%
   ========================================================== */
@keyframes keai_ad_anim_7 {
    0%, 87.5%   { opacity:0; transform: perspective(600px) rotateY(90deg) scale(0.8); pointer-events:none; z-index:1; }
    89.0625%    { opacity:1; transform: perspective(600px) rotateY(-15deg) scale(1); pointer-events:auto; z-index:2; }
    90.625%     { opacity:1; transform: perspective(600px) rotateY(0deg) scale(1); pointer-events:auto; z-index:2; }
    90.625%, 96.875% { opacity:1; transform: perspective(600px) rotateY(0deg) scale(1); pointer-events:auto; z-index:2; }
    96.875%     { opacity:1; transform: perspective(600px) rotateY(0deg) scale(1); pointer-events:auto; z-index:2; }
    98.4375%    { opacity:0.7; transform: perspective(600px) rotateY(30deg) scale(0.9); pointer-events:none; z-index:2; }
    100%        { opacity:0; transform: perspective(600px) rotateY(-90deg) scale(0.8); pointer-events:none; z-index:1; }
    100%, 100%  { opacity:0; transform: perspective(600px) rotateY(90deg) scale(0.8); pointer-events:none; z-index:0; }
}
@keyframes keai_ad_img_effect_7 {
    0%, 87.5%   { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    89.0625%    { border-color:#ffb74d; box-shadow:0 8px 30px rgba(255,183,77,0.5); border-radius:16px; }
    90.625%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    96.875%     { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
    98.4375%    { border-color:#e65100; box-shadow:0 12px 40px rgba(230,81,0,0.5); border-radius:8px; }
    100%, 100%  { border-color:#e8e8e8; box-shadow:0 2px 12px rgba(0,0,0,0.10); border-radius:12px; }
}
@keyframes keai_ad_text_effect_7 {
    0%, 87.5%   { opacity:0; transform: perspective(400px) rotateX(-90deg); }
    89.0625%    { opacity:1; transform: perspective(400px) rotateX(10deg); }
    90.625%     { opacity:1; transform: perspective(400px) rotateX(0); }
    96.875%     { opacity:1; transform: perspective(400px) rotateX(0); }
    98.4375%    { opacity:0.6; transform: perspective(400px) rotateX(30deg); }
    100%        { opacity:0; transform: perspective(400px) rotateX(90deg); }
    100%, 100%  { opacity:0; transform: perspective(400px) rotateX(-90deg); }
}
@keyframes keai_ad_glow_7 {
    0%, 87.5%   { opacity:0; background: linear-gradient(135deg, rgba(255,183,77,0.0), rgba(230,81,0,0.0)); }
    89.0625%    { opacity:0.55; background: linear-gradient(135deg, rgba(255,183,77,0.35), rgba(230,81,0,0.35)); }
    90.625%     { opacity:0; background: linear-gradient(135deg, rgba(255,183,77,0.0), rgba(230,81,0,0.0)); }
    96.875%     { opacity:0; background: linear-gradient(135deg, rgba(255,183,77,0.0), rgba(230,81,0,0.0)); }
    98.4375%    { opacity:0.6; background: linear-gradient(135deg, rgba(255,183,77,0.4), rgba(230,81,0,0.4)); }
    100%, 100%  { opacity:0; background: linear-gradient(135deg, rgba(255,183,77,0.0), rgba(230,81,0,0.0)); }
}

/* ============================================================
   六、绑定动画（delay 全部 0）
   ============================================================ */
.keai-ad-module .ad-item-0 { animation: keai_ad_anim_0 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-1 { animation: keai_ad_anim_1 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-2 { animation: keai_ad_anim_2 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-3 { animation: keai_ad_anim_3 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-4 { animation: keai_ad_anim_4 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-5 { animation: keai_ad_anim_5 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-6 { animation: keai_ad_anim_6 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-7 { animation: keai_ad_anim_7 32s ease-in-out infinite; animation-delay: 0s; }

.keai-ad-module .ad-item-0 .ad-image-wrapper { animation: keai_ad_img_effect_0 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-1 .ad-image-wrapper { animation: keai_ad_img_effect_1 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-2 .ad-image-wrapper { animation: keai_ad_img_effect_2 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-3 .ad-image-wrapper { animation: keai_ad_img_effect_3 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-4 .ad-image-wrapper { animation: keai_ad_img_effect_4 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-5 .ad-image-wrapper { animation: keai_ad_img_effect_5 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-6 .ad-image-wrapper { animation: keai_ad_img_effect_6 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-7 .ad-image-wrapper { animation: keai_ad_img_effect_7 32s ease-in-out infinite; animation-delay: 0s; }

.keai-ad-module .ad-item-0 .ad-text { animation: keai_ad_text_effect_0 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-1 .ad-text { animation: keai_ad_text_effect_1 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-2 .ad-text { animation: keai_ad_text_effect_2 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-3 .ad-text { animation: keai_ad_text_effect_3 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-4 .ad-text { animation: keai_ad_text_effect_4 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-5 .ad-text { animation: keai_ad_text_effect_5 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-6 .ad-text { animation: keai_ad_text_effect_6 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-7 .ad-text { animation: keai_ad_text_effect_7 32s ease-in-out infinite; animation-delay: 0s; }

.keai-ad-module .ad-item-0 .ad-image-wrapper::after { animation: keai_ad_glow_0 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-1 .ad-image-wrapper::after { animation: keai_ad_glow_1 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-2 .ad-image-wrapper::after { animation: keai_ad_glow_2 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-3 .ad-image-wrapper::after { animation: keai_ad_glow_3 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-4 .ad-image-wrapper::after { animation: keai_ad_glow_4 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-5 .ad-image-wrapper::after { animation: keai_ad_glow_5 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-6 .ad-image-wrapper::after { animation: keai_ad_glow_6 32s ease-in-out infinite; animation-delay: 0s; }
.keai-ad-module .ad-item-7 .ad-image-wrapper::after { animation: keai_ad_glow_7 32s ease-in-out infinite; animation-delay: 0s; }

/* ============================================================
   说明：
   1. 所有设备统一尺寸，已移除手机端缩放规则
   2. 本方案广告数固定 8 条；改条数需重写全部 keyframes
   3. 尺寸调整记录：
      - 容器：288×340 → 250×290
      - 图片框：256×256 → 222×222
      调整原因：图片实际需求 222×222，容器等比例缩小
   ============================================================ */