/* components.css — 视觉还原组件样式 */
/* 透明热区按钮：贴在设计图按钮位置，背景透明 */
.hotspot { position: absolute; background: transparent; border: none; cursor: pointer; border-radius: .12rem; }
.hotspot:active { background: rgba(255,255,255,.15); }

/* 9 宫格抽奖高亮格 - 旧版兼容（新版在 pages.css） */
.hit-cell { position: absolute; width: 1.6rem; height: 1.7rem; border-radius: .12rem; transition: transform .12s, box-shadow .12s, background .12s; pointer-events: none; }
.hit-cell.wheel-hit {
  box-shadow: 0 0 0 .06rem var(--c-warm), 0 0 .4rem rgba(240,216,120,.95);
  transform: scale(1.04);
  background: rgba(240,216,120,.22);
  z-index: 2;
}

/* 入场动效 */
.fade-in { animation: fadeIn .5s ease both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

/* 卡片模板背景（花边占位 - P2 旧版兼容） */
.card-template { background: linear-gradient(180deg, #FCFAEB 0%, #F0F0D8 100%); border-radius: .16rem; }

/* 通用胶囊按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; border: none; border-radius: .8rem; padding: .26rem .9rem; font-family: inherit; font-size: .32rem; font-weight: 700; color: #fff; cursor: pointer; box-shadow: 0 .08rem .16rem rgba(0,0,0,.18); }

/* 透明覆盖层（用于在背景图上"挖洞"显示前景） */
.overlay { position: absolute; pointer-events: none; }

/* ====== 雪碧图切片元素（metas.png 685×5000）======
 * 用法：<div class="sp" style="left/top; --pw; --sx; --sy; --sw; --sh">
 *   --pw  显示宽(rem, 750基准)；高度按切片比例自动算，不变形
 *   --sx/--sy  切片左上坐标(雪碧px)；--sw/--sh 切片宽高(雪碧px)
 */
.sp {
  position: absolute;
  background-image: url('../assets/metas.webp?v=4');
  background-repeat: no-repeat;
  width: var(--pw);
  height: calc(var(--pw) * var(--sh) / var(--sw));
  background-size: calc(var(--pw) * 685 / var(--sw)) calc(var(--pw) * 7500 / var(--sw));
  background-position: calc(var(--pw) / var(--sw) * var(--sx) * -1) calc(var(--pw) / var(--sw) * var(--sy) * -1);
}
.sp.is-btn { border: 0; padding: 0; cursor: pointer; background-color: transparent; display: block; }

/* slogan：默认展示，无光效 */
.sp-glow { }

/* 主标题光点（JS 动态生成随机点位）：出生→变大变亮→缩小变淡→消失 */
.spark-dot {
  position: absolute; width: var(--sz, .06rem); height: var(--sz, .06rem);
  border-radius: 50%; background: #fff;
  box-shadow: 0 0 .08rem .02rem rgba(255,248,210,.95), 0 0 .18rem .04rem rgba(255,228,150,.5);
  transform: translate(-50%, -50%) scale(0); opacity: 0;
  animation: sparkleLife 1.6s ease-in-out forwards;
  pointer-events: none; z-index: 2;
}
@keyframes sparkleLife {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0; }
  45%  { transform: translate(-50%, -50%) scale(1.4); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.2);  opacity: 0; }
}

/* 云朵装饰层：背景之上、内容之下，横向随机飘动 */
.cloud-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.cloud-layer .cloud { left: 0; animation-name: cloudDrift; animation-timing-function: linear; animation-iteration-count: infinite; }
@keyframes cloudDrift {
  from { transform: translateX(-60vw); }
  to   { transform: translateX(160vw); }
}
.cloud-layer .bird { left: 0; animation-timing-function: linear; animation-iteration-count: infinite; }
/* 鸟头朝飞行方向。--tilt=倾角(正上偏/负下偏)，--tiltTan=tan(tilt)（JS 算好，Y 沿斜线） */
@keyframes birdFlyR {
  from { transform: translate(-60vw, calc(60vw * var(--tiltTan, 0))) rotate(calc(90deg - var(--tilt, 0deg))); }
  to   { transform: translate(160vw, calc(-160vw * var(--tiltTan, 0))) rotate(calc(90deg - var(--tilt, 0deg))); }
}
@keyframes birdFlyL {
  from { transform: translate(160vw, calc(160vw * var(--tiltTan, 0))) rotate(calc(-90deg + var(--tilt, 0deg))); }
  to   { transform: translate(-60vw, calc(-60vw * var(--tiltTan, 0))) rotate(calc(-90deg + var(--tilt, 0deg))); }
}