/* 3Dカードビューア — カード鑑賞専用の空間。説明文は出さない。 */

.viewer3d{
  position:fixed;inset:0;z-index:70;
  background:radial-gradient(120% 90% at 50% 35%, #2a2724 0%, #141312 70%, #0d0c0b 100%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  touch-action:none;overscroll-behavior:contain;
}
.viewer3d__close{
  position:absolute;right:10px;top:calc(10px + env(safe-area-inset-top));
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;
  z-index:4;   /* カード名の帯より前に出す */
}
.viewer3d__close svg{width:20px;height:20px}
.viewer3d__nav{
  position:absolute;bottom:calc(18px + env(safe-area-inset-bottom));left:0;right:0;
  display:flex;align-items:center;justify-content:center;gap:14px;
}
.viewer3d__nav button{
  background:rgba(255,255,255,.1);border:0;color:#fff;border-radius:999px;
  padding:9px 16px;font-size:12.5px;cursor:pointer;
}
.viewer3d__nav button[disabled]{opacity:.3;pointer-events:none}
/* 全幅に広がるので、タップを吸わないようにする */
.viewer3d__hint{
  position:absolute;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));
  text-align:center;color:rgba(255,255,255,.6);font-size:11.5px;letter-spacing:.04em;
  pointer-events:none;
}

/* カードの大きさはここ1か所で決める。高さでも頭打ちにして、
   低い画面でも上下の帯やボタンにぶつからないようにする。 */
.stage3d{ --c3w:min(88vw, 54vh, 420px); perspective:1400px; width:var(--c3w); }
.stage3d__shadow{
  position:absolute;left:50%;top:50%;width:calc(var(--c3w) * .93);height:26px;
  transform:translate(-50%, calc(var(--c3w) * 0.66));
  background:radial-gradient(ellipse at center, rgba(0,0,0,.55), rgba(0,0,0,0) 70%);
  filter:blur(2px);pointer-events:none;transition:transform .1s linear, opacity .1s linear;
}

.card3d{
  position:relative;width:100%;aspect-ratio:4/5;
  -webkit-transform-style:preserve-3d;transform-style:preserve-3d;
  transform:rotateX(0deg) rotateY(0deg);
  will-change:transform;
}
.card3d.is-easing{ transition:transform .55s cubic-bezier(.22,.9,.28,1) }

.card3d__side{
  position:absolute;inset:0;border-radius:14px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5);
}
.card3d__side--front{ transform:translateZ(1.2px) }
.card3d__side--back{ transform:rotateY(180deg) translateZ(1.2px) }
/* 厚み（実物より少しだけ強調） */
.card3d__edge{
  position:absolute;inset:0;border-radius:14px;
  transform:translateZ(-1.2px);
  background:linear-gradient(90deg,#cfc7b8,#efeae0 30%,#d8d0c1 70%,#bfb7a8);
  box-shadow:0 0 0 1px rgba(0,0,0,.12);
}

/* 光沢レイヤー（画像そのものは加工しない・独立レイヤーで重ねる） */
.card3d__sheen{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,
    rgba(255,255,255,0) 34%,
    rgba(255,255,255,.34) 48%,
    rgba(255,255,255,.06) 60%,
    rgba(255,255,255,0) 72%);
  background-size:260% 100%;
  background-position:var(--sheen, 50%) 0;
  opacity:0;              /* 傾けたときだけ js/card-3d.js が濃くする */
}

/* きらっと走る光。左端から右端まで0.7秒、少し間を置いてまた左から。
   指で回したときの光（--sheen）とは別の層にして、互いに邪魔しないようにする。 */
.card3d__glint{
  position:absolute; top:-15%; bottom:-15%; left:-45%; width:30%;
  pointer-events:none; z-index:3; opacity:0;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.85) 50%, transparent);
  transform:translateX(0) skewX(-14deg);
  animation:cardGlint 2.6s ease-in-out infinite;
}
@keyframes cardGlint{
  0%  { opacity:0; transform:translateX(0) skewX(-14deg) }
  3%  { opacity:1 }
  24% { opacity:1 }
  27% { opacity:0; transform:translateX(520%) skewX(-14deg) }   /* 2.6s × 27% ≒ 0.7秒 */
  100%{ opacity:0; transform:translateX(520%) skewX(-14deg) }
}
@media (prefers-reduced-motion: reduce){ .card3d__glint{ display:none } }

/* 全幅に広がるので、閉じるボタンのタップを奪わないようにする */
.viewer3d__caption{
  position:absolute;left:56px;right:56px;top:calc(20px + env(safe-area-inset-top));
  text-align:center;color:rgba(255,255,255,.85);font-size:13px;font-weight:700;letter-spacing:.06em;
  pointer-events:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* 初回の操作案内。カードを隠さないよう下寄せにする */
.tut3d{
  position:absolute;inset:auto 0 0;display:grid;justify-items:center;
  padding:0 24px calc(112px + env(safe-area-inset-bottom));
  color:#fff;text-align:center;font-size:14px;line-height:1.8;z-index:5;
  background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  padding-top:60px;pointer-events:auto;
}
.tut3d__demo{
  width:44px;height:44px;margin:0 auto 10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.6);
  animation:tutSwing 1.8s ease-in-out infinite;
}
@keyframes tutSwing{
  0%,100%{ transform:translateX(-14px) }
  50%{ transform:translateX(14px) }
}