/* =========================================================
   TZ素材网 · 双十一弹窗（站内同源版）
   白底 / 品牌蓝 #3A5DFD / 红金优惠券 / 细网格
   ========================================================= */

.tz-d11,
.tz-d11 *,
.tz-d11 *::before,
.tz-d11 *::after { box-sizing: border-box; }

.tz-d11 {
  --tz-blue: #3a5dfd;
  --tz-blue-dark: #2f4edb;
  --tz-red: #e8232e;
  --tz-gold: #ffd167;
  --tz-gold-deep: #f5a623;
  --tz-ink: #111111;
  --tz-muted: #909399;
  --tz-line: #edf1f9;
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 16px;
  font-family: "Microsoft YaHei", "微软雅黑", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
  color: var(--tz-ink);
  -webkit-font-smoothing: antialiased;
}

.tz-d11[hidden] { display: none; }

/* ---------- 遮罩 ---------- */
.tz-d11__mask {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  opacity: 0;
  transition: opacity .22s ease;
}
.tz-d11.is-open .tz-d11__mask { opacity: 1; }

/* ---------- 卡片 ---------- */
.tz-d11__dialog {
  position: relative;
  width: min(420px, 100%);
  max-height: calc(100dvh - 32px);
  overflow: hidden auto;
  padding-bottom: 20px;
  border: 1px solid #e6ebf5;
  border-radius: 18px;
  background: #fff;
  box-shadow:
    0 28px 70px -18px rgba(23, 43, 99, .45),
    0 2px 8px rgba(23, 43, 99, .06);
  scrollbar-width: thin;
  scrollbar-color: #d7deec transparent;
}
.tz-d11__dialog::-webkit-scrollbar { width: 6px; }
.tz-d11__dialog::-webkit-scrollbar-thumb { background: #d7deec; border-radius: 3px; }
.tz-d11__dialog:focus { outline: none; }

/* 顶部红金促销细条 */
.tz-d11__dialog::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  height: 4px;
  background: linear-gradient(90deg, var(--tz-red), #ff8a3d 52%, var(--tz-gold));
}

/* ---------- 头部 ---------- */
.tz-d11__head {
  position: relative;
  z-index: 1;
  overflow: hidden;
  padding: 24px 64px 16px 24px;
  border-bottom: 1px solid var(--tz-line);
  background-color: #f8fafe;
  background-image:
    radial-gradient(70% 120% at 100% 0, rgba(58, 93, 253, .07), transparent 60%),
    linear-gradient(rgba(58, 93, 253, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 93, 253, .055) 1px, transparent 1px);
  background-size: auto, 22px 22px, 22px 22px;
}

.tz-d11__fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.tz-d11__watermark {
  position: absolute;
  right: -6px;
  bottom: -22px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 88px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  color: rgba(58, 93, 253, .07);
  pointer-events: none;
  white-space: nowrap;
}

.tz-d11__confetti {
  position: absolute;
  width: 4px;
  height: 8px;
  border-radius: 1px;
  background: var(--c, var(--tz-gold));
  opacity: .55;
  transform: rotate(var(--r, 0deg));
  animation: tz-d11-twinkle var(--t, 3.4s) ease-in-out infinite;
  animation-delay: var(--dl, 0s);
}

/* 开屏礼花（一次性） */
.tz-d11__burst {
  position: absolute;
  left: 62%;
  top: 52%;
  width: 0;
  height: 0;
}
.tz-d11__burst i {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 9px;
  border-radius: 1px;
  background: var(--c, var(--tz-gold));
  opacity: 0;
}

.tz-d11__eyebrow {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}

.tz-d11__brand {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--tz-blue);
}

.tz-d11__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border: 1px solid #ffd9d9;
  border-radius: 4px;
  background: #fff0f0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--tz-red);
}
.tz-d11__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tz-red);
  animation: tz-d11-pulse 1.8s ease-in-out infinite;
}

.tz-d11__title {
  position: relative;
  z-index: 1;
  margin: 12px 0 0;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .02em;
  color: var(--tz-ink);
}
.tz-d11__title span { color: var(--tz-red); }

.tz-d11__rule {
  position: relative;
  z-index: 1;
  display: block;
  width: 36px;
  height: 3px;
  margin-top: 12px;
  border-radius: 2px;
  background: var(--tz-blue);
  transform-origin: left center;
}

/* ---------- 优惠券 ---------- */
.tz-d11__tickets {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  padding: 18px 24px 0;
}

.tz-d11__ticket {
  --divider: 104px;
  --notch: 7px;
  filter: drop-shadow(0 8px 16px rgba(140, 95, 25, .12));
  transition: translate .22s ease, filter .22s ease;
}
.tz-d11__ticket:hover {
  translate: 0 -2px;
  filter: drop-shadow(0 14px 22px rgba(140, 95, 25, .18));
}

.tz-d11__ticket-surface {
  position: relative;
  display: grid;
  grid-template-columns: var(--divider) 1fr;
  min-height: 72px;
  border: 1px solid #f1dfbb;
  border-radius: 10px;
  background: #fff9ec;
  -webkit-mask-image:
    radial-gradient(circle var(--notch) at var(--divider) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at var(--divider) 100%, transparent 98%, #000 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(circle var(--notch) at var(--divider) 0, transparent 98%, #000 100%),
    radial-gradient(circle var(--notch) at var(--divider) 100%, transparent 98%, #000 100%);
  mask-composite: intersect;
}

/* 券面流光 */
.tz-d11__ticket-surface::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  filter: blur(1.5px);
  background: linear-gradient(102deg,
    transparent 40%,
    rgba(255, 255, 255, .38) 46%,
    rgba(255, 243, 214, .85) 50%,
    rgba(255, 255, 255, .38) 54%,
    transparent 60%);
  transform: translateX(-130%);
}
.tz-d11.is-open .tz-d11__ticket-surface::after {
  animation: tz-d11-sheen 5.4s ease-in-out 1.3s infinite;
}
.tz-d11__ticket + .tz-d11__ticket .tz-d11__ticket-surface::after {
  animation-delay: 3.4s;
}

.tz-d11__value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 10px 8px;
  border-right: 1px dashed rgba(255, 255, 255, .6);
  border-radius: 9px 0 0 9px;
  background: linear-gradient(135deg, #ff6a5b, var(--tz-red) 58%, #d81b26);
  color: #fff;
  font-weight: 900;
  text-align: center;
}
.tz-d11__value b {
  font-size: 32px;
  line-height: 1;
  letter-spacing: -.01em;
}
.tz-d11__value b i {
  font-style: normal;
  font-size: 14px;
  margin-left: 1px;
}
.tz-d11__value--gold {
  background: linear-gradient(135deg, #ffe29a, var(--tz-gold) 45%, var(--tz-gold-deep));
  color: #8a4b00;
}
.tz-d11__value--gold b { font-size: 24px; letter-spacing: .02em; }

.tz-d11__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 10px 16px;
}
.tz-d11__body strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--tz-ink);
}
.tz-d11__body em {
  font-style: normal;
  font-size: 12px;
  letter-spacing: .02em;
  color: var(--tz-muted);
}

/* ---------- 主按钮 ---------- */
.tz-d11__cta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  margin: 20px 24px 0;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(180deg, #4e6bff, var(--tz-blue));
  box-shadow: 0 10px 20px -8px rgba(58, 93, 253, .55);
  transition: translate .18s ease, scale .18s ease, filter .18s ease;
}
.tz-d11__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, .28) 46%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .6s ease;
}
.tz-d11__cta:hover {
  translate: 0 -1px;
  filter: brightness(1.06);
}
.tz-d11__cta:hover::before { transform: translateX(120%); }
.tz-d11__cta:active { translate: 0 1px; scale: .997; }
.tz-d11__cta:focus-visible { outline: 2px solid rgba(58, 93, 253, .45); outline-offset: 3px; }
.tz-d11__cta svg { flex: none; }
.tz-d11__arrow {
  display: grid;
  place-items: center;
  transition: transform .22s ease;
}
.tz-d11__cta:hover .tz-d11__arrow { transform: translateX(3px); }

/* ---------- 活动时间 ---------- */
.tz-d11__time {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 24px 0;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--tz-muted);
}
.tz-d11__time b {
  font-weight: 600;
  color: #4b5563;
}
.tz-d11__time svg { opacity: .8; }

/* ---------- 关闭按钮 ---------- */
.tz-d11__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid #e6ebf5;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: #7b8291;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(17, 24, 39, .06);
  transition: color .2s ease, border-color .2s ease, background .2s ease, transform .25s ease;
}
.tz-d11__close:hover {
  color: var(--tz-ink);
  border-color: #c9d4ea;
  background: #fff;
  transform: rotate(90deg);
}
.tz-d11__close:focus-visible {
  outline: 2px solid rgba(58, 93, 253, .45);
  outline-offset: 2px;
}

/* ---------- 动画 ---------- */
@keyframes tz-d11-dialog-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.94); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes tz-d11-dialog-out {
  to { opacity: 0; transform: translate3d(0, 12px, 0) scale(.97); }
}
@keyframes tz-d11-pop {
  from { opacity: 0; transform: translate3d(0, 14px, 0); }
  to { opacity: 1; transform: none; }
}
@keyframes tz-d11-title-in {
  0% { opacity: 0; transform: translate3d(0, 16px, 0); filter: blur(5px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; filter: blur(0); }
}
@keyframes tz-d11-rule-in {
  from { opacity: 0; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}
@keyframes tz-d11-ticket-in {
  from {
    opacity: 0;
    transform: translate3d(var(--tx, -20px), 12px, 0) rotate(var(--rot, -1.2deg));
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}
@keyframes tz-d11-value-in {
  0% { opacity: 0; transform: scale(.55); }
  65% { opacity: 1; transform: scale(1.09); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes tz-d11-sheen {
  0%, 60% { transform: translateX(-130%); }
  82%, 100% { transform: translateX(130%); }
}
@keyframes tz-d11-cta-glow {
  0%, 100% { box-shadow: 0 10px 20px -8px rgba(58, 93, 253, .42); }
  50% { box-shadow: 0 16px 30px -8px rgba(58, 93, 253, .74); }
}
@keyframes tz-d11-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 35, 46, .35); opacity: 1; }
  50% { box-shadow: 0 0 0 4px rgba(232, 35, 46, 0); opacity: .7; }
}
@keyframes tz-d11-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-10px, -5px, 0); }
}
@keyframes tz-d11-burst {
  0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.7); }
  65% { opacity: 1; }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--tx, 0px)), calc(-50% + var(--ty, 0px))) rotate(var(--rot, 90deg)) scale(1);
  }
}
@keyframes tz-d11-twinkle {
  0%, 100% { opacity: .15; transform: rotate(var(--r, 0deg)) scale(.8); }
  50% { opacity: .6; transform: rotate(calc(var(--r, 0deg) + 30deg)) scale(1); }
}

.tz-d11.is-open .tz-d11__dialog {
  animation: tz-d11-dialog-in .42s cubic-bezier(.2, .9, .3, 1.06) both;
}
.tz-d11.is-closing .tz-d11__dialog {
  animation: tz-d11-dialog-out .18s ease-in both;
}

/* 头部：文字与短线依次入场 */
.tz-d11.is-open .tz-d11__eyebrow {
  animation: tz-d11-pop .4s ease .04s both;
}
.tz-d11.is-open .tz-d11__title {
  animation: tz-d11-title-in .55s cubic-bezier(.2, .9, .25, 1.05) .09s both;
}
.tz-d11.is-open .tz-d11__rule {
  animation: tz-d11-rule-in .5s cubic-bezier(.2, .9, .3, 1.1) .22s both;
}

/* 优惠券：左右错位滑入 + 面额弹跳 */
.tz-d11.is-open .tz-d11__ticket {
  animation: tz-d11-ticket-in .52s cubic-bezier(.2, .9, .3, 1.12) var(--pop-delay, .1s) both;
}
.tz-d11.is-open .tz-d11__value b {
  animation: tz-d11-value-in .55s cubic-bezier(.2, .9, .3, 1.35) calc(var(--pop-delay, .1s) + .14s) both;
}

/* 按钮：入场 + 呼吸光晕；活动时间收尾 */
.tz-d11.is-open .tz-d11__cta {
  animation:
    tz-d11-pop .45s cubic-bezier(.2, .9, .3, 1.05) .28s both,
    tz-d11-cta-glow 3.6s ease-in-out 1.6s infinite;
}
.tz-d11.is-open .tz-d11__time {
  animation: tz-d11-pop .45s cubic-bezier(.2, .9, .3, 1.05) .34s both;
}

/* 环境动效：水印漂移 / 开屏礼花 */
.tz-d11.is-open .tz-d11__watermark {
  animation: tz-d11-drift 8s ease-in-out infinite alternate;
}
.tz-d11.is-open .tz-d11__burst i {
  animation: tz-d11-burst .95s cubic-bezier(.15, .65, .3, 1) var(--bd, .12s) both;
}

.tz-d11.is-closing .tz-d11__mask { opacity: 0; }

/* ---------- 移动端 ---------- */
@media (max-width: 420px) {
  .tz-d11 { padding: 12px; }
  .tz-d11__dialog { border-radius: 16px; padding-bottom: 16px; }
  .tz-d11__head { padding: 20px 56px 14px 18px; }
  .tz-d11__title { font-size: 28px; }
  .tz-d11__watermark { font-size: 72px; bottom: -18px; }
  .tz-d11__tickets { padding: 16px 18px 0; gap: 10px; }
  .tz-d11__ticket { --divider: 92px; }
  .tz-d11__value b { font-size: 29px; }
  .tz-d11__value--gold b { font-size: 22px; }
  .tz-d11__body { padding: 10px 13px; }
  .tz-d11__cta { height: 44px; margin: 16px 18px 0; font-size: 15px; }
  .tz-d11__time { margin: 10px 18px 0; }
  .tz-d11__close { top: 12px; right: 12px; }
}

/* ---------- 减弱动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .tz-d11 *,
  .tz-d11 *::before,
  .tz-d11 *::after {
    animation: none !important;
    transition: none !important;
  }
  .tz-d11__cta::before { display: none; }
  .tz-d11__ticket-surface::after { display: none; }
}