/* ============================================================
   开场动画 - 新野兽派 (Neo-Brutalist)
   纸白底 + 粗网格 + 黑边硬投影色块 + 荧光黄
   字符砸落(微弹) → 标签章弹出 → 斜纹进度条 → 色块幕布收场
   ============================================================ */

:root {
    --in-bg: #FDFDFB;
    --in-ink: #111111;
    --in-acid: #D9F24F;
    --in-purple: #7C5CFF;
    --in-cyan: #00C2D9;
    --in-pink: #FF5CA8;
}

.intro-curtain {
    position: fixed; inset: 0;
    background: var(--in-bg);
    /* 粗网格图纸底纹 */
    background-image:
        linear-gradient(rgba(17,17,17,.07) 2px, transparent 2px),
        linear-gradient(90deg, rgba(17,17,17,.07) 2px, transparent 2px);
    background-size: 44px 44px;
    z-index: 9999;
    overflow: hidden;
    display: grid; place-items: center;
    cursor: pointer;
}
/* 收场: 整块向上拍飞 (干脆, 不 morph) */
.intro-curtain.dismiss {
    animation: intro-slam .55s cubic-bezier(.6, 0, .8, .4) forwards;
}
@keyframes intro-slam {
    0%   { transform: translateY(0); }
    100% { transform: translateY(-100%); }
}

/* ---------- 背景滚动斜纹带 ---------- */
.intro-stripe {
    position: absolute; left: -10%;
    width: 120%; height: 46px;
    background: repeating-linear-gradient(-45deg, var(--in-ink) 0 16px, transparent 16px 32px);
    opacity: .08;
    animation: stripe-scroll 9s linear infinite;
}
.intro-stripe.s1 { top: 16%; }
.intro-stripe.s2 { bottom: 18%; animation-direction: reverse; animation-duration: 12s; }
@keyframes stripe-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(90px); }
}

/* ---------- 漂浮几何色块 (黑边硬投影, 野兽派拼贴) ---------- */
.intro-shape {
    position: absolute;
    border: 3px solid var(--in-ink);
    animation: shape-drift 6s ease-in-out infinite alternate, shape-pop .7s cubic-bezier(.2,.7,.3,1) backwards;
    will-change: transform;
}
.intro-shape.sq { border-radius: 6px; }
.intro-shape.ci { border-radius: 50%; }
.intro-shape.tr {
    width: 0; height: 0; border: none;
    border-left: 26px solid transparent;
    border-right: 26px solid transparent;
    border-bottom: 44px solid var(--in-ink);
    animation: shape-drift 7s ease-in-out infinite alternate, shape-pop .8s cubic-bezier(.2,.7,.3,1) .15s backwards;
}
.intro-shape.y  { width: 64px; height: 64px; background: var(--in-acid);  top: 18%; left: 12%; box-shadow: 6px 6px 0 var(--in-ink); }
.intro-shape.p  { width: 84px; height: 84px; background: var(--in-purple); top: 64%; left: 8%;  box-shadow: 6px 6px 0 var(--in-ink); animation-delay: -2s, .05s; }
.intro-shape.b  { width: 52px; height: 52px; background: var(--in-cyan);   top: 70%; right: 14%; box-shadow: 6px 6px 0 var(--in-ink); animation-delay: -4s, .1s; }
.intro-shape.c  { width: 70px; height: 70px; background: var(--in-acid);   top: 14%; right: 10%; box-shadow: 6px 6px 0 var(--in-ink); animation-delay: -1s, .12s; }
.intro-shape.w  { top: 34%; right: 26%; opacity: .9; animation-delay: -3s, .18s; }
@keyframes shape-drift {
    from { transform: translateY(0) rotate(0deg); }
    to   { transform: translateY(-26px) rotate(10deg); }
}
@keyframes shape-pop {
    from { opacity: 0; transform: scale(.4) rotate(-20deg); }
    to   { opacity: 1; }
}

/* ---------- 中央舞台 ---------- */
.intro-center {
    position: relative;
    display: flex; flex-direction: column;
    align-items: center; gap: 22px;
    z-index: 2;
    padding: 0 20px;
}

/* 顶部小标 /// PRIVATE AI HUB /// */
.intro-kicker {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 4px;
    color: var(--in-ink);
    background: var(--in-acid);
    border: 3px solid var(--in-ink);
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--in-ink);
    padding: 5px 14px;
    animation: chip-in .4s cubic-bezier(.2,.7,.3,1) .1s backwards;
    animation-iteration-count: 1, 1;
}
@keyframes chip-in {
    from { opacity: 0; transform: translateY(-18px) rotate(-4deg); }
    to   { opacity: 1; }
}

/* 大标题: 字符砸落 + 荧光垫片 */
.intro-title {
    display: flex; gap: 8px;
    perspective: 600px;
}
.intro-title .ch {
    display: inline-block;
    font-size: clamp(52px, 11vw, 96px);
    font-weight: 900;
    line-height: 1.1;
    animation: ch-slam .5s cubic-bezier(.2,.7,.3,1) backwards;
}
.intro-title .ch i {
    font-style: normal;
    display: inline-block;
    position: relative;
    color: var(--in-ink);
    /* 荧光错位垫片: 野兽派套印效果 */
    text-shadow: 5px 5px 0 var(--in-acid);
}
.intro-title .ch:nth-child(2) i { text-shadow: 5px 5px 0 var(--in-purple); color: #fff; -webkit-text-stroke: 3px var(--in-ink); }
.intro-title .ch:nth-child(4) i { text-shadow: 5px 5px 0 var(--in-cyan); }
.intro-title .ch:nth-child(1) { animation-delay: .30s; }
.intro-title .ch:nth-child(2) { animation-delay: .40s; }
.intro-title .ch:nth-child(3) { animation-delay: .50s; }
.intro-title .ch:nth-child(4) { animation-delay: .60s; }
.intro-title .ch:nth-child(5) { animation-delay: .70s; }
@keyframes ch-slam {
    0%   { opacity: 0; transform: translateY(-70px) rotate(-8deg) scale(1.3); }
    70%  { opacity: 1; transform: translateY(4px) rotate(1deg) scale(.98); }
    100% { opacity: 1; transform: none; }
}
/* 第2/4字下坠闪烁点缀 */
.intro-title .ch:nth-child(2) { animation-duration: .55s; }

/* 标签章行 */
.intro-tagline {
    display: flex; gap: 10px;
    animation: chip-in .4s cubic-bezier(.2,.7,.3,1) 1.0s backwards;
}
.tag-chip {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
    padding: 3px 12px;
    border: 2.5px solid var(--in-ink);
    border-radius: 6px;
    background: #fff;
    box-shadow: 3px 3px 0 var(--in-ink);
    animation: chip-wiggle 2.6s ease-in-out infinite;
}
.tag-chip.t1 { background: var(--in-acid);   animation-delay: 1.0s, 0s; }
.tag-chip.t2 { background: var(--in-cyan);   animation-delay: 1.1s, .3s; }
.tag-chip.t3 { background: var(--in-pink);   animation-delay: 1.2s, .6s; }
.tag-chip.t4 { background: var(--in-purple); color: #fff; animation-delay: 1.3s, .9s; }
@keyframes chip-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg) translateY(-2px); }
    75% { transform: rotate(3deg) translateY(1px); }
}

/* ---------- 进度条 (黑框 + 荧光斜纹 + 百分比) ---------- */
.intro-bar {
    position: relative;
    width: min(320px, 70vw);
    height: 30px;
    border: 3px solid var(--in-ink);
    border-radius: 6px;
    background: #fff;
    box-shadow: 5px 5px 0 var(--in-ink);
    overflow: hidden;
    animation: chip-in .4s cubic-bezier(.2,.7,.3,1) 1.15s backwards;
}
.intro-bar > i {
    display: block; height: 100%;
    width: 0;
    background: repeating-linear-gradient(-55deg, var(--in-acid) 0 14px, var(--in-ink) 14px 18px);
    transition: width .18s linear;
}
.intro-bar-pct {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-size: 13px;
    font-weight: 900;
    font-style: normal;
    color: var(--in-ink);
    font-variant-numeric: tabular-nums;
    mix-blend-mode: normal;
}

/* ---------- 状态行 ---------- */
.intro-done {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--in-ink);
    background: #fff;
    border: 2.5px solid var(--in-ink);
    border-radius: 6px;
    box-shadow: 4px 4px 0 var(--in-ink);
    padding: 7px 16px;
    animation: chip-in .4s cubic-bezier(.2,.7,.3,1) 1.3s backwards;
}
.intro-dot {
    width: 11px; height: 11px;
    background: var(--in-acid);
    border: 2.5px solid var(--in-ink);
    border-radius: 50%;
    animation: dot-blink .9s steps(2) infinite;
}
@keyframes dot-blink { 50% { opacity: .25; } }

/* ---------- 右下角印章 ---------- */
.intro-stamp {
    position: absolute;
    right: 5%; bottom: 8%;
    font-size: clamp(28px, 5vw, 52px);
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--in-purple);
    -webkit-text-stroke: 2.5px var(--in-ink);
    transform: rotate(-8deg);
    opacity: 0;
    animation: stamp-hit .45s cubic-bezier(.2,.7,.3,1) 1.55s forwards;
}
@keyframes stamp-hit {
    0%   { opacity: 0; transform: rotate(-8deg) scale(2.4); }
    70%  { opacity: 1; transform: rotate(-8deg) scale(.95); }
    100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* ---------- 手机端 ---------- */
@media (max-width: 640px) {
    .intro-shape { transform: scale(.6); }
    .intro-stamp { right: 8%; bottom: 5%; }
    .intro-title { gap: 4px; }
}

/* 减少动态效果 */
@media (prefers-reduced-motion: reduce) {
    .intro-shape, .tag-chip, .intro-stripe, .intro-dot { animation: none !important; }
}