* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    height: 100%;
    touch-action: manipulation;
    -ms-touch-action: manipulation;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
}

body {
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #f7ece6;
    overflow: hidden;
}

/* 屏幕：占满整个视口 */
.screen {
    position: relative;
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    overflow: hidden;
    background: #f7ece6;
    display: flex;
    flex-direction: column;
}

/* ====== 第一阶段：黑场加载（0–1.6s） ====== */
.loader {
    position: absolute;
    inset: 0;
    z-index: 80;
    background: #0e0a0b;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f7ece6;
    animation: loaderOut .8s cubic-bezier(.7,0,.2,1) 1.6s forwards;
}
.loader .id {
    font-size: 11px;
    letter-spacing: 8px;
    color: #8a6f6f;
    margin-bottom: 24px;
    opacity: 0;
    animation: fade .5s ease .1s forwards;
}
.loader .wordrow {
    display: flex;
    align-items: center;
    gap: 4px;
}
.loader .word {
    font-size: 34px;
    font-weight: 900;
    letter-spacing: 8px;
    display: flex;
    gap: 4px;
    color: #f7ece6;
}
.loader .word span {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
    animation: charIn .55s cubic-bezier(.2,1,.3,1) forwards;
}
.loader .word span:nth-child(1) { animation-delay: .15s; }
.loader .word span:nth-child(2) { animation-delay: .27s; }
.loader .word span:nth-child(3) { animation-delay: .39s; }
.loader .word span:nth-child(4) { animation-delay: .51s; color: #e0506e; }
.loader .word-gif {
    width: 72px;
    height: 72px;
    display: block;
    object-fit: contain;
    border-radius: 50%;
    opacity: 0;
    transform: translateY(20px) scale(.7);
    animation: gifIn .55s cubic-bezier(.2,1.3,.3,1) .58s forwards,
               gifWiggle 2.4s ease-in-out 1.2s infinite;
}
.loader .bar {
    margin-top: 28px;
    width: 230px;
    height: 3px;
    border-radius: 3px;
    background: rgba(247,236,230,.18);
    overflow: hidden;
    opacity: 0;
    animation: fade .4s ease .65s forwards;
}
.loader .bar::after {
    content: "";
    display: block;
    height: 100%;
    width: 0%;
    background: #e0506e;
    animation: progress .9s cubic-bezier(.7,0,.2,1) .7s forwards;
}

/* ====== 第二阶段：横向幕布（1.6s–2.2s） ====== */
.curtain {
    position: absolute;
    inset: 0;
    z-index: 70;
    pointer-events: none;
    display: flex;
    flex-direction: column;
}
.curtain .top, .curtain .bot { flex: 1; background: #0e0a0b; }
.curtain .top { animation: cTop .9s cubic-bezier(.85,0,.15,1) 1.6s forwards; }
.curtain .bot { animation: cBot .9s cubic-bezier(.85,0,.15,1) 1.6s forwards; }
.curtain .line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 2px;
    background: #e0506e;
    transform: scaleX(0);
    transform-origin: left;
    animation: lineIn .7s cubic-bezier(.7,0,.2,1) 1.5s forwards,
               lineOut .4s ease 2.1s forwards;
}

/* ====== 顶部杂志刊头 ====== */
.masthead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 2px solid #2a1d20;
    font-size: 11px;
    letter-spacing: 2px;
    color: #2a1d20;
    font-weight: 700;
    opacity: 0;
    animation: fade .7s ease 2.3s forwards;
}
.masthead .dot {
    width: 7px;
    height: 7px;
    background: #e0506e;
    border-radius: 50%;
    display: inline-block;
    margin-right: 7px;
    vertical-align: middle;
}

/* ====== 标题 ====== */
.hero { padding: 22px 22px 0; }
.kicker {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 3px;
    color: #f7ece6;
    font-weight: 800;
    background: #e0506e;
    padding: 5px 12px;
    opacity: 0;
    animation: rise .7s cubic-bezier(.2,1,.3,1) 2.4s forwards;
}
.big {
    font-size: clamp(56px, 18vw, 78px);
    line-height: .9;
    font-weight: 900;
    color: #2a1d20;
    letter-spacing: -2px;
    margin-top: 12px;
}
.big span { display: block; overflow: hidden; }
.big span i {
    display: block;
    font-style: normal;
    transform: translateY(110%);
    animation: titleUp .8s cubic-bezier(.16,1.1,.3,1) forwards;
}
.big span:nth-child(1) i { animation-delay: 2.55s; }
.big span:nth-child(2) i { animation-delay: 2.7s; }
.big .accent { color: #e0506e; }
.subline {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    letter-spacing: 3px;
    color: #8a6f6f;
    opacity: 0;
    animation: rise .6s ease 2.95s forwards;
}
.subline .bar { flex: 0 0 30px; height: 2px; background: #2a1d20; }

/* ====== 主视觉 ====== */
.stage {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 18px 0;
    min-height: 0;
}
.rays {
    position: absolute;
    width: 120%;
    aspect-ratio: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(.4);
    z-index: 0;
    opacity: 0;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(224,80,110,.10) 0deg 8deg,
        transparent 8deg 16deg
    );
    border-radius: 50%;
    animation: raysIn .8s ease 2.8s forwards, spin 40s linear 3.6s infinite;
    -webkit-mask-image: radial-gradient(circle, #000 28%, transparent 66%);
    mask-image: radial-gradient(circle, #000 28%, transparent 66%);
}
.cup-wrap {
    position: relative;
    width: min(86%, 340px);
    z-index: 3;
    opacity: 0;
    transform: translateY(30px) scale(.92);
    animation: cupIn .9s cubic-bezier(.2,1,.3,1) 2.8s forwards;
}
.cup-wrap .floatwrap { animation: floaty 4s ease-in-out 3.8s infinite; }
.cup-wrap img.cup {
    width: 100%;
    display: block;
    border-radius: 12px;
    filter: drop-shadow(0 26px 30px rgba(42,29,32,.32));
}
.bubble {
    position: absolute;
    top: -10%;
    right: -12%;
    width: 66%;
    z-index: 4;
    opacity: 0;
    transform: scale(.5) rotate(10deg);
    animation: bubblePop .7s cubic-bezier(.34,1.6,.5,1) 3.1s forwards;
}
.bubble img {
    width: 100%;
    display: block;
    border-radius: 50%;
    filter: drop-shadow(0 8px 12px rgba(42,29,32,.22));
}
.price {
    position: absolute;
    bottom: 2%;
    left: -12%;
    z-index: 4;
    text-align: center;
    color: #2a1d20;
    background: #f7ece6;
    padding: 6px 10px 8px;
    border: 2px solid #2a1d20;
    box-shadow: 4px 4px 0 #e0506e;
    opacity: 0;
    transform: translateY(16px) rotate(-4deg);
    animation: priceIn .6s cubic-bezier(.34,1.56,.64,1) 3.25s forwards;
}
.price .amt { font-size: clamp(40px, 13vw, 52px); font-weight: 900; line-height: .85; }
.price .amt span { font-size: .42em; vertical-align: text-top; }
.price .tag { font-size: 11px; letter-spacing: 1px; color: #e0506e; font-weight: 700; margin-top: 2px; }
.price .tag s { color: #ad8f93; }

/* ====== 底部 ====== */
.footer {
    border-top: 2px solid #2a1d20;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    background: #2a1d20;
    opacity: 0;
    transform: translateY(100%);
    animation: footIn .7s cubic-bezier(.2,1,.3,1) 3s forwards;
}
.footer .meta { color: #c79ba0; font-size: 11px; letter-spacing: 2px; }
.footer .meta b { color: #f7ece6; display: block; font-size: 15px; margin-top: 3px; letter-spacing: 4px; }
.footer button {
    background: #e0506e;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 15px 32px;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 3px;
    border-radius: 2px;
    transition: background .2s ease, transform .15s ease;
}
.footer button:hover { background: #c94560; }
.footer button:active { transform: scale(.96); }

/* ====== 领取成功浮层 ====== */
.result {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(14, 10, 11, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #f7ece6;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
    cursor: pointer;
}
.result.show { opacity: 1; pointer-events: auto; }
.result::before {
    content: "";
    position: absolute;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(224,80,110,.22) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
}
.result .gif {
    width: 240px;
    height: 240px;
    object-fit: contain;
    border-radius: 50%;
    transform: scale(.5);
    opacity: 0;
    transition: transform .6s cubic-bezier(.2,1.4,.3,1) .1s, opacity .4s ease .1s;
    filter: drop-shadow(0 16px 30px rgba(0,0,0,.4));
    position: relative;
}
.result.show .gif {
    transform: scale(1);
    opacity: 1;
    animation: shake 1.4s ease-in-out 0.8s infinite;
}
.result .text {
    margin-top: 26px;
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 8px;
    color: #f7ece6;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .45s ease .35s, transform .45s ease .35s;
}
.result.show .text { opacity: 1; transform: translateY(0); }
.result .text b { color: #e0506e; }
.result .hint {
    margin-top: 14px;
    font-size: 11px;
    letter-spacing: 6px;
    color: #8a6f6f;
    opacity: 0;
    transition: opacity .5s ease .55s;
}
.result.show .hint { opacity: 1; }

@keyframes shake {
    0%, 100% { transform: scale(1) rotate(0); }
    20% { transform: scale(1) rotate(-12deg); }
    40% { transform: scale(1.05) rotate(10deg); }
    60% { transform: scale(1) rotate(-8deg); }
    80% { transform: scale(1.03) rotate(6deg); }
}

/* ====== 关键帧 ====== */
@keyframes fade { to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes charIn { to { opacity: 1; transform: translateY(0); } }
@keyframes gifIn  { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes gifWiggle {
    0%, 100% { transform: translateY(0) rotate(0); }
    25%      { transform: translateY(-3px) rotate(-6deg); }
    75%      { transform: translateY(-3px) rotate(6deg); }
}
@keyframes progress { to { width: 100%; } }
@keyframes loaderOut { to { opacity: 0; pointer-events: none; } }
@keyframes cTop { to { transform: translateY(-100%); } }
@keyframes cBot { to { transform: translateY(100%); } }
@keyframes lineIn { to { transform: scaleX(1); } }
@keyframes lineOut { to { transform: scaleX(0); transform-origin: right; opacity: 0; } }
@keyframes titleUp { to { transform: translateY(0); } }
@keyframes cupIn { to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes bubblePop { to { opacity: 1; transform: scale(1) rotate(5deg); } }
@keyframes priceIn { to { opacity: 1; transform: translateY(0) rotate(-4deg); } }
@keyframes footIn { to { opacity: 1; transform: translateY(0); } }
@keyframes raysIn { to { opacity: 1; transform: translate(-50%,-50%) scale(1); } }
@keyframes spin { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ====== 响应式 ====== */
@media (min-width: 520px) {
    .screen {
        max-width: 430px;
        box-shadow: 0 0 0 1px rgba(0,0,0,.05);
    }
}

@media (max-height: 740px) {
    .big { font-size: clamp(48px, 15vw, 66px); }
    .cup-wrap { width: min(72%, 290px); }
}