/* ==========================================================================
   v11_fx.css  花豆V1.1 大礼包抽奖视觉素材（纯CSS独立件 · 零JS依赖）
   产件：兰（F4素材） 2026-09-05
   用途：供电的 gacha_modal 直接 <link> 引用
   原则：所有类名 .v11fx- 前缀，作用域隔离，不命中任何现有选择器；
         无脚本注入、无 fetch、无外发请求；移动端 Webview 兼容
         （iOS Safari 10+ / Android Chrome 60+，conic-gradient 需 iOS 12.2+）。

   【用法1 · 三品质边框】给卡牌容器加边框类，内容放 __inner 里：
     <div class="v11fx-frame v11fx-frame--gold">
       <div class="v11fx-frame__inner"> …卡牌内容… </div>
     </div>
     品质修饰符：
       v11fx-frame--gold   黄金（金色渐变+金光呼吸）
       v11fx-frame--epic   稀有（紫色渐变+紫光呼吸）
       v11fx-frame--legend 传说（红橙渐变+红光呼吸）

   【用法2 · 全屏开奖特效】开奖时把节点挂到 body，播完移除：
     <div class="v11fx-burst v11fx-burst--gold">
       <span class="v11fx-burst__particle" style="left:8%;  --v11fx-dx:6vw;  animation-delay:.05s"></span>
       <span class="v11fx-burst__particle" style="left:16%; --v11fx-dx:-4vw; animation-delay:.15s"></span>
       <span class="v11fx-burst__particle" style="left:25%; --v11fx-dx:8vw;  animation-delay:.25s"></span>
       <span class="v11fx-burst__particle" style="left:34%; --v11fx-dx:-6vw; animation-delay:.10s"></span>
       <span class="v11fx-burst__particle" style="left:42%; --v11fx-dx:4vw;  animation-delay:.30s"></span>
       <span class="v11fx-burst__particle" style="left:50%; --v11fx-dx:-3vw; animation-delay:.00s"></span>
       <span class="v11fx-burst__particle" style="left:58%; --v11fx-dx:7vw;  animation-delay:.20s"></span>
       <span class="v11fx-burst__particle" style="left:66%; --v11fx-dx:-8vw; animation-delay:.12s"></span>
       <span class="v11fx-burst__particle" style="left:74%; --v11fx-dx:5vw;  animation-delay:.28s"></span>
       <span class="v11fx-burst__particle" style="left:82%; --v11fx-dx:-5vw; animation-delay:.08s"></span>
       <span class="v11fx-burst__particle" style="left:90%; --v11fx-dx:3vw;  animation-delay:.18s"></span>
       <span class="v11fx-burst__particle" style="left:95%; --v11fx-dx:-7vw; animation-delay:.35s"></span>
     </div>
     品质修饰符：v11fx-burst--gold（金光）/ --epic（紫光）/ --legend（红光）
     默认播放一轮 2.4s 后自动隐藏；如需循环再加 v11fx-burst--loop。
     电也可在 JS 里按上面模板动态生成 12 个 particle span。
   ========================================================================== */

/* ---------------- 关键帧 ---------------- */
@keyframes v11fx-shine {
  0%   { transform: translateX(-130%) rotate(20deg); opacity: 0; }
  18%  { opacity: 1; }
  45%  { opacity: 1; }
  100% { transform: translateX(260%) rotate(20deg); opacity: 0; }
}
@keyframes v11fx-border-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes v11fx-glow-pulse {
  0%, 100% { box-shadow: 0 0 10px 2px var(--v11fx-glow, rgba(255,200,60,.55)); }
  50%      { box-shadow: 0 0 26px 8px var(--v11fx-glow, rgba(255,200,60,.9)); }
}
@keyframes v11fx-ray-spin {
  from { transform: translate(-50%,-50%) rotate(0deg); }
  to   { transform: translate(-50%,-50%) rotate(360deg); }
}
@keyframes v11fx-rise {
  0%   { transform: translate3d(0,0,0) scale(.4); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translate3d(var(--v11fx-dx,0),-112vh,0) scale(1.05); opacity: 0; }
}
@keyframes v11fx-flash {
  0%   { opacity: 0; }
  15%  { opacity: .95; }
  100% { opacity: 0; }
}

/* ---------------- 三品质边框 ---------------- */
.v11fx-frame {
  position: relative;
  box-sizing: border-box;
  border-radius: 16px;
  padding: 6px;                              /* 边框厚度 */
  background-color: #f2e8d5;
  background-size: 200% 200%;
  --v11fx-glow: rgba(255,200,60,.55);
  animation: v11fx-border-flow 3s ease-in-out infinite,
             v11fx-glow-pulse  2.2s ease-in-out infinite;
  overflow: hidden;
}
.v11fx-frame--gold {
  background-image: linear-gradient(120deg,#b8860b,#ffd700,#fff6c0,#ffcc33,#b8860b);
  --v11fx-glow: rgba(255,200,60,.60);
}
.v11fx-frame--epic {
  background-image: linear-gradient(120deg,#5b2a86,#a855f7,#e9d5ff,#c084fc,#5b2a86);
  --v11fx-glow: rgba(168,85,247,.60);
}
.v11fx-frame--legend {
  background-image: linear-gradient(120deg,#7f1d1d,#ef4444,#fecaca,#f97316,#7f1d1d);
  --v11fx-glow: rgba(239,68,68,.65);
}
/* 内层卡牌内容区 */
.v11fx-frame__inner {
  position: relative;
  z-index: 1;
  border-radius: 11px;
  background: #fffdf7;
  overflow: hidden;
}
/* 斜向扫光微光 */
.v11fx-frame::after {
  content: "";
  position: absolute;
  top: -30%;
  left: 0;
  z-index: 2;
  width: 45%;
  height: 160%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
  transform: translateX(-130%) rotate(20deg);
  animation: v11fx-shine 2.6s ease-in-out infinite;
  pointer-events: none;
}

/* ---------------- 全屏开奖特效 ---------------- */
.v11fx-burst {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  --v11fx-c1: #ffd700;
  --v11fx-c2: #fff3b0;
  animation: v11fx-flash 2.4s ease-out forwards;
}
.v11fx-burst--gold   { --v11fx-c1: #ffd700; --v11fx-c2: #fff3b0; }
.v11fx-burst--epic   { --v11fx-c1: #a855f7; --v11fx-c2: #e9d5ff; }
.v11fx-burst--legend { --v11fx-c1: #ef4444; --v11fx-c2: #fdba74; }
.v11fx-burst--loop   { animation: v11fx-flash 2.4s ease-out infinite; }

/* 中心大闪光 */
.v11fx-burst::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 60vmin;
  height: 60vmin;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle, var(--v11fx-c2) 0%, var(--v11fx-c1) 38%, transparent 72%);
  opacity: 0;
  animation: v11fx-flash 2.4s ease-out forwards;
}
/* 旋转放射光芒（conic-gradient，iOS 12.2+；低版本降级为无光芒，不影响粒子） */
.v11fx-burst::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 180vmax;
  height: 180vmax;
  background: repeating-conic-gradient(
    from 0deg,
    transparent 0deg 8deg,
    var(--v11fx-c1) 8deg 10deg,
    transparent 10deg 20deg);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 62%);
          mask-image: radial-gradient(circle, rgba(0,0,0,.9) 0%, transparent 62%);
  opacity: 0;
  animation: v11fx-flash 2.4s ease-out forwards,
             v11fx-ray-spin 6s linear infinite;
}
.v11fx-burst--loop::before,
.v11fx-burst--loop::after { animation: v11fx-flash 2.4s ease-out infinite, v11fx-ray-spin 6s linear infinite; }

/* 上升粒子（12颗，HTML 模板见文件头注释） */
.v11fx-burst__particle {
  position: absolute;
  bottom: -6vmin;
  width: 1.6vmin;
  height: 1.6vmin;
  border-radius: 50%;
  background: var(--v11fx-c1);
  box-shadow: 0 0 8px 2px var(--v11fx-c2);
  opacity: 0;
  animation: v11fx-rise 2.2s ease-out forwards;
}
.v11fx-burst--loop .v11fx-burst__particle { animation: v11fx-rise 2.2s ease-out infinite; }