/* Spare Nova 会员卡：拉丝黑钛 + 镭射 + 烫金。用在购买页（首屏、开箱）和邮件动画头图（tools/render-mail-gif.py）。 */
.card3d{perspective:1400px;display:flex;justify-content:center}
.ncard{--mx:.5;--my:.3;position:relative;width:min(440px,100%);aspect-ratio:1.586;transform-style:preserve-3d;border-radius:24px;transition:transform .25s ease-out}
.face{position:absolute;inset:0;border-radius:24px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;isolation:isolate;
  box-shadow:0 50px 90px -40px #000,0 30px 80px -30px #6d4cff99,inset 0 1px 0 #ffffff2e,inset 0 0 0 1px #ffffff14}
/* 正面底材：深空渐变 + 拉丝 + 颗粒 */
.front{padding:7.2% 7.6%;color:#fff;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(92deg,#ffffff06 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 0% 0%,#3a4bd6 0%,transparent 55%),
    radial-gradient(90% 80% at 100% 100%,#7a2a6e 0%,transparent 60%),
    linear-gradient(135deg,#1a1d40 0%,#0a0b18 50%,#170d26 100%)}
/* 镭射膜：跟随倾斜移动 */
.holo{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:color-dodge;opacity:.55;
  background:linear-gradient(115deg,transparent 20%,#ff7ad940 32%,#7af0ff45 42%,#fff38a40 52%,#9b8bff45 62%,transparent 75%);
  background-size:250% 250%;background-position:calc(var(--mx)*100%) calc(var(--my)*100%)}
.front:before{content:"✦";position:absolute;right:-6%;top:-18%;font-size:clamp(200px,62vw,300px);line-height:1;z-index:0;
  color:transparent;-webkit-text-stroke:1px #ffffff12;text-shadow:0 0 60px #6c82ff22}
/* 扫光 */
.front:after{content:"";position:absolute;inset:-20%;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,#ffffff2a 48%,#ffffff55 50%,#ffffff2a 52%,transparent 60%);transform:translateX(-120%);animation:sweep 5.5s ease-in-out 1.2s infinite}
@keyframes sweep{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
.front>*{position:relative;z-index:2}
.c-top{display:flex;justify-content:space-between;align-items:center}
.foil{font-weight:800;letter-spacing:.26em;font-size:clamp(10px,2.9vw,13px);
  background:linear-gradient(180deg,#fff5d6 0%,#e7c77f 45%,#a8823e 60%,#f3dca0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 1px 0 #00000080)}
.c-badge{font-size:clamp(8px,2.3vw,10px);letter-spacing:.22em;font-weight:800;color:#2a1d06;padding:4px 10px;border-radius:999px;
  background:linear-gradient(180deg,#fff2c8,#d7b062 55%,#b38b44);box-shadow:inset 0 1px 0 #fff8,0 2px 8px #0006}
.c-mid{display:flex;align-items:center;gap:14px;margin-top:7%}
.c-chip{width:15%;aspect-ratio:1.3;border-radius:7px;position:relative;
  background:linear-gradient(135deg,#fbecc0 0%,#d8b46c 35%,#a9843f 60%,#f0d595 100%);box-shadow:inset 0 0 0 1px #0000002a,0 2px 6px #0007}
.c-chip:before{content:"";position:absolute;inset:22% 14%;border:1px solid #6b4e1a55;border-radius:3px;
  background:linear-gradient(90deg,transparent 32%,#6b4e1a55 32% 34%,transparent 34% 66%,#6b4e1a55 66% 68%,transparent 68%)}
.c-nfc{width:22px;height:22px;opacity:.7}
.c-code{font:700 clamp(13px,4.1vw,21px)/1.3 "SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.08em;white-space:nowrap;margin-top:6.5%;
  color:#eef0ff;text-shadow:0 1px 0 #ffffff40,0 -1px 0 #00000090,0 4px 14px #0009}
.c-bot{position:absolute;left:7.6%;right:7.6%;bottom:7%;display:flex;justify-content:space-between;align-items:flex-end;z-index:2}
.c-bot small{display:block;font-size:clamp(8px,2.2vw,10px);letter-spacing:.2em;color:#a9accbcc;margin-bottom:2px}
.c-bot b{font-size:clamp(14px,4.3vw,20px)}
.c-star{width:clamp(34px,10vw,46px);height:clamp(34px,10vw,46px);border-radius:50%;display:grid;place-items:center;font-size:clamp(18px,5vw,24px);color:#fff;
  background:radial-gradient(circle,#fff 0,#c9d4ff 20%,#6b7cff 52%,#26307a 78%);box-shadow:0 0 26px #7f93ffaa,inset 0 0 6px #fff8}
/* 背面 */
.back{transform:rotateY(180deg);display:grid;place-items:center;
  background:radial-gradient(70% 70% at 50% 45%,#2b3592 0%,#0d0f26 60%,#07080f 100%)}
.back:before{content:"";position:absolute;left:0;right:0;top:12%;height:17%;background:linear-gradient(180deg,#0b0b12,#1a1a24 50%,#0b0b12);opacity:.85}
.back .b-star{width:30%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-size:clamp(40px,12vw,64px);color:#fff;margin-top:8%;
  background:radial-gradient(circle,#fff 0,#d4ddff 18%,#6b7cff 48%,#26307a 72%,transparent 74%);filter:drop-shadow(0 0 30px #7f93ff)}
.back .b-name{position:absolute;bottom:9%;left:0;right:0;text-align:center}
/* 开箱：从远处旋转飞来 → 背面落定 → 翻到正面 */
.ncard.reveal{animation:cardIn 2.8s cubic-bezier(.2,.75,.2,1) both}
@keyframes cardIn{
  0%{transform:translateY(140px) translateZ(-500px) rotateY(-900deg) rotateX(30deg)}
  55%{transform:translateY(-8px) translateZ(40px) rotateY(-180deg) rotateX(-4deg)}
  68%{transform:translateY(0) translateZ(0) rotateY(-180deg) rotateX(0)}
  100%{transform:rotateY(0) rotateX(0)}}
.glow{position:absolute;left:50%;top:50%;width:120%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.2);border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(circle,#8b9bffaa 0%,#a78bfa55 30%,transparent 65%);opacity:0}
.reveal-wrap{position:relative}
/* fade on the wrapper: opacity on the 3D card itself would flatten it and show the front mirrored instead of the back */
.reveal-wrap.on .card3d{animation:fadeIn .35s ease-out both}
@keyframes fadeIn{from{opacity:0}}
.reveal-wrap.on .glow{animation:burst 1.4s ease-out 2.3s both}
@keyframes burst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(1.4)}}
@media (prefers-reduced-motion:reduce){.ncard.reveal,.front:after,.reveal-wrap.on .glow{animation:none!important}}