/* =========================================================
   分歧入口页
   所有手部素材已经调好颜色，因此这里不再添加颜色滤镜。
   ========================================================= */

.entry-page {
  --ink: #151515;
  --quiet-ink: rgba(21, 21, 21, 0.52);
  /* 在body的class内部，自定义属性--ink，后续使用相同颜色可以直接调用 */
  min-width: 320px;
  min-height: 100vh;
  overflow: hidden;
  color: var(--ink);
  background: #111816;
}


.entry-stage {
  /* 给整个main class做的设定 */
  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 640px;
  padding-top: 60px;
  overflow: hidden;

  /* 视差效果 */
  --background-move-x: 0px;
  --background-move-y: 0px;
  --hand-move-x: 0px;
  --hand-move-y: 0px;
  /* 以上代码用于视差效果 */


  background-color: #111816;
}

/* 以下代码用于视差背景效果 */
.entry-stage::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -32px;
  /* inset：-32px代码是为了扩展背景区域，移动鼠标的时候不出黑边 */
  pointer-events: none;
  background-image:
    linear-gradient(rgba(17, 26, 23, 0.05), rgba(7, 11, 10, 0.24)),
    url("../asset/image/index/index-bg.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: translate3d(var(--background-move-x), var(--background-move-y), 0);
  will-change: transform;
}



/*
  高光色点阵配合 screen 混合模式：
  暗处能明显看到青绿色小点，亮处会自然接近消失。
  它根据下方画面的实际明暗产生差异，不再按照固定位置做蒙版。
*/
/* .entry-stage::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  opacity: 0.62;
  background-image:
    radial-gradient(circle, rgba(0, 84, 75, 0.906) 0 1px, transparent 0.78px);
  background-size: 4px 4px;
  mix-blend-mode:lighten;
} */

/* 这是覆盖整个路面的无边框按钮。 */
.scene-turn-area {
  position: absolute;
  z-index: 1;
  inset: 60px 0 0;
  display: block;
  width: 100%;
  height: calc(100% - 60px);
  padding: 0;
  background: transparent;
  border: 0;
}


/*
  整组素材共用 768:1200 的画布比例。
  大画布偏向右侧，故意让手腕略微超出屏幕，避免产品展示式的居中构图。
*/
.hand-card-scene {
  position: absolute;
  z-index: 2;
  
  left: 50%;
  transform: 
    translateX(-50%)
    translate3d(var(--hand-move-x), var(--hand-move-y), 0px);
    will-change: transform;
  
  bottom: calc(0px - clamp(34px, 5vh, 94px));
  /* buttom：基于父元素向下。clamp：（最小值，理想值，最大值） */
  height: min(1040px, calc(100svh - 28px));
  /* height：元素的高度。min：选择括号里最小的数值 */
  aspect-ratio: 768 / 1200;
  perspective: 5000px;
  /* 旋转时候的透视感强度，数值越大透视感越弱 */
  pointer-events: none;
}

.hand-card-flipper {
  /* 内含正面和反面的图片，以及扑克牌内容 */
  position: absolute;
  inset: 0;
  /* inset:0 = top right bottom left都是0 */
  transform: rotateY(0deg);
  /* 绕Y旋转0的状态 */
  transform-style: preserve-3d;
  /* 让里面的元素按照三维方式存在，不要压缩成2d */
  -webkit-transform-style: preserve-3d;
  /* 这个写法是为了safari */
  transform-origin: 53% 38%;
  /* 设置旋转轴 */
  transition: transform 760ms cubic-bezier(0.48, 0.06, 0.18, 1);
  /* transition：給哪个属性制造动画 速率 曲线（先慢后快的具体安排） */
  will-change: transform;
  /* 告知浏览器这个要素会经常动画，提前做好渲染准备 */
}

.hand-card-scene.is-back .hand-card-flipper {
  /* 在js添加is-back之后，父元素变为isback，这个时候flipper翻180度 */
  transform: rotateY(180deg);
}

.entry-face {
  position: absolute;
  inset: 0;
  /* 四条边贴紧父元素top right bottom left都是0 */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* 在三维情况下隐藏背面 */
  transform-style: flat;
  -webkit-transform-style: flat;
  /* 内容作为2d存在，因为内部的素材组成一个完整手部握牌平面
  并不需要全都分别作为3d素材旋转 */
}

/*
  卡片悬停时的白色光晕。
  光位于卡片 PNG 后、后方手部前，不会变成普通网页按钮的黑色方块。
*/
.entry-face::before {
  content: "";
  position: absolute;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse, rgba(255, 255, 0, 0.94) 0 22%, rgba(244, 244, 244, 0.58) 46%, transparent 72%);
    /* 上一行代码意思是创建一个椭圆形的径向渐变 */
  filter: blur(18px);
  transform: scale(0.82);
  transition:
    opacity 260ms ease,
    transform 420ms cubic-bezier(0.22, 0.7, 0.2, 1);
  mix-blend-mode: screen;
}

.entry-face-front::before {
  top: 1%;
  left: 33%;
  width: 27.5%;
  height: 46%;
}

.entry-face-back::before {
  top: 1%;
  left: 33%;
  width: 27.5%;
  height: 46%;
}
/* 上面代码的意思是确定上下左右位置 */

.entry-face:has(.card-action:hover)::before,
.entry-face:has(.card-action:focus-visible)::before {
  /* ::before表示伪元素，临时图层。上面的代码意思是，子元素hover或focus时显示光晕 */
  opacity: 1;
  transform: scale(1);
}

/*
  0.01deg 避免部分 WebKit 浏览器在恰好 0° / 180°时产生像素闪烁。
  两面之间没有 JavaScript 换图，也没有 display/hidden 的瞬间切换。
*/
.entry-face-front {
  transform: rotateY(0.01deg);
}

.entry-face-back {
  transform: rotateY(180.01deg);
}

.asset-layer {
  position: absolute;
  inset: 0;
  /* 使用绝对位置并四边紧贴父项 */
  display: block;
  width: 100%;
  height: 100%;
  /* 图片宽高等于父项 */
  max-width: none;
  object-fit: contain;
  /* 完整显示图片，不会裁切 */
  pointer-events: none;
  /* 素材不接收鼠标事件 */
  user-select: none;
  /* 素材无法被选中 */
}

.asset-hand {
  z-index: 1;
}

.asset-card {
  z-index: 2;
}

.asset-fingers {
  z-index: 4;
}

/*
  保护手和牌的可见区域。
  父容器不接收点击，只有这个多边形和卡片链接接收点击，
  因此其余透明区域仍然属于可翻牌的路面。
*/
.hand-interaction-shield {
  position: absolute;
  z-index: 2;
  inset: 0;
  /* 覆盖满整个父容器 */
  pointer-events: auto;
  clip-path: polygon(
    26% 5%,
    73% 5%,
    95% 30%,
    100% 100%,
    28% 100%,
    20% 50%
  );
  /* 定义一个不规则的裁剪路径 */
}

/*
  卡片仍然可以点击，但视觉轮廓来自你制作的 PNG。
  文字层位于卡片和前景手指之间，所以手指会自然压住文字与牌面。
*/
.card-action {
  position: absolute;
  z-index: 3;
  display: flex;
  /* 进入flexbox后，方便控制内部要素排列 */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* 设置内部要素间距 */
  color: #151515;
  text-align: center;
  pointer-events: auto;
  /* border: 1px solid rgba(20, 20, 20, 0.18); */
  transition:
    color 160ms steps(2, end),
    background-color 160ms steps(2, end);
}

/* 强行计算图片中可以点击的区域，到边缘的距离百分比 */
.card-action-front {
  /* 定义正面卡片的点击区域,html文件中为a要素 */
  top: 1%;
  left: 33%;
  width: 27.5%;
  height: 46%;
}

.card-action-back {
  /* 定义背面卡片的点击区域,html文件中为a要素 */
  top: 1%;
  left: 33%;
  width: 27.5%;
  height: 46%;
}


.card-action:hover,
.card-action:focus-visible {
  
  background: rgba(255, 255, 248, 0.24);
  /* 设置背景颜色 */
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.92),
    0 0 18px rgba(255, 255, 235, 0.88);
  box-shadow:
    inset 0 0 24px rgba(255, 255, 255, 0.34),
    0 0 18px rgba(255, 255, 238, 0.64);
  /* outline: 1px solid rgba(255, 255, 255, 0.78); */
  /* outline-offset: 3px; */
}

/* 只让正在朝向用户的卡片入口接收鼠标与键盘操作。 */
.entry-face-back .card-action {
  pointer-events: none;
}

.entry-face-back .hand-interaction-shield {
  pointer-events: none;
}

.hand-card-scene.is-back .entry-face-front .card-action {
  pointer-events: none;
}

.hand-card-scene.is-back .entry-face-front .hand-interaction-shield {
  pointer-events: none;
}

.hand-card-scene.is-back .entry-face-back .card-action {
  pointer-events: auto;
}

.hand-card-scene.is-back .entry-face-back .hand-interaction-shield {
  pointer-events: auto;
}

@media (max-width: 760px) {
  .entry-stage {
    min-height: 560px;
  }

  .hand-card-scene {
    bottom: -38px;
    height: calc(100svh - 54px);
    min-height: 610px;
  }

  .scene-turn-area span {
    bottom: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hand-card-flipper {
    transition-duration: 1ms;
  }
}