神秘卡 MysteryCard

import { MysteryCard } from './components/v4/MysteryCard.jsx'

export default function MysteryCardDemo() {
  return (
    <div style={{ width: 266, maxWidth: '100%' }}>
      <MysteryCard />
    </div>
  )
}

<div style="width: 266px; max-width: 100%">
  <div
    role="img"
    aria-label="敬请期待：一门尚未揭晓的课程"
    style="
      position: relative;
      width: 100%;
      aspect-ratio: 266 / 316;
      border-radius: 16px;
      transform: none;
      transition:
        transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1),
        box-shadow 0.5s;
      box-shadow:
        0 30px 48px -26px rgba(6, 6, 12, 0.55),
        0 5px 14px rgba(0, 0, 0, 0.3);
    "
  >
    <style>
      @keyframes zzmMysterySheen {
        0% {
          transform: translateX(-46%);
        }
        58% {
          transform: translateX(135%);
        }
        100% {
          transform: translateX(135%);
        }
      }
    </style>
    <div
      style="
        position: absolute;
        inset: 0;
        border-radius: 16px;
        overflow: hidden;
        background:
          radial-gradient(150% 92% at 50% 30%, rgba(255, 255, 255, 0.1), transparent 50%),
          linear-gradient(
            101deg,
            transparent 0 5%,
            rgba(255, 255, 255, 0.05) 10%,
            transparent 18%,
            rgba(0, 0, 0, 0.24) 28%,
            transparent 38%,
            rgba(255, 255, 255, 0.055) 50%,
            transparent 60%,
            rgba(0, 0, 0, 0.22) 70%,
            transparent 79%,
            rgba(255, 255, 255, 0.04) 88%,
            transparent 100%
          ),
          linear-gradient(159deg, #28282f 0%, #16161c 47%, #0a0a0e 100%);
      "
    >
      <div
        style="
          position: absolute;
          inset: -24% -46%;
          pointer-events: none;
          background: linear-gradient(
            112deg,
            transparent 36%,
            rgba(214, 218, 238, 0.19) 46%,
            rgba(255, 255, 255, 0.06) 51%,
            transparent 64%
          );
          animation: zzmMysterySheen 6.8s ease-in-out infinite;
        "
      ></div>
      <div
        style="
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 58px;
          background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
        "
      ></div>
    </div>
    <div
      style="
        position: absolute;
        top: 15px;
        left: 15px;
        font-family: var(--zzm-mono);
        font-size: 9.5px;
        letter-spacing: 0.26em;
        color: rgba(232, 228, 220, 0.5);
      "
    >
      即将揭晓
    </div>
    <div
      style="
        position: absolute;
        left: 50%;
        top: 41%;
        transform: translate(-50%, -50%);
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: radial-gradient(circle at 37% 30%, #c25642, #93382a 60%, #6d2519);
        box-shadow:
          inset 0 2px 5px rgba(255, 222, 210, 0.32),
          inset 0 -5px 10px rgba(0, 0, 0, 0.42),
          0 7px 16px rgba(0, 0, 0, 0.4);
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <svg width="34" height="34" viewBox="0 0 40 40" aria-hidden="true">
        <path
          d="M20 3 L23.4 16.6 L37 20 L23.4 23.4 L20 37 L16.6 23.4 L3 20 L16.6 16.6 Z"
          fill="#ede7dc"
          opacity=".92"
        ></path>
      </svg>
    </div>
    <div
      style="
        position: absolute;
        left: 0;
        right: 0;
        top: calc(41% + 56px);
        text-align: center;
        color: rgba(237, 231, 220, 0.9);
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.44em;
        padding-left: 0.44em;
      "
    >
      敬请期待
    </div>
    <div
      style="
        position: absolute;
        left: 14%;
        right: 14%;
        bottom: 20px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, transparent, var(--zzm-accent, #a6402f), transparent);
        opacity: 0;
        transition: opacity 0.5s;
      "
    ></div>
  </div>
</div>

/* tokens.css · 用到的令牌 */
:root {
  --zzm-mono: ui-monospace, "SF Mono", Menlo, monospace;
  --zzm-accent: #A6402F;
}