/* ============================================================
   班级照片：影院级影集（第二刻度）
   ------------------------------------------------------------
   左边是画面（Ken Burns 缓推 + 交叉溶解 + 背景景深 + 光束扫过），
   右边是一块信息牌：编号 / 名字 / 时间 / 地点 / 地图缩略图，
   随照片一起淡入淡出。
   现在只有 1 张真照片，其余自动补占位画面。
   ============================================================ */

.carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(1120px, 100%);
  margin: 0 auto;
  padding-bottom: 28px;
}

/* ---------- 左画面 + 右信息牌 ---------- */
.car-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(230px, .88fr);
  gap: 18px;
  align-items: stretch;
}

.car-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 62vh;
  border-radius: 20px;
  overflow: hidden;
  background: #040d1c;
  border: 1px solid rgba(120, 185, 240, .28);
  box-shadow:
    0 26px 70px rgba(0, 6, 20, .68),
    0 0 0 1px rgba(255, 255, 255, .04) inset;
  isolation: isolate;
}
.car-stage::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: 0 0 60px rgba(90, 170, 255, .18) inset;
}

/* ---------- 单张画面 ---------- */
.car-stage .slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  z-index: 1;
  
  will-change: opacity, transform;
}
.car-stage .slide.on { opacity: 1; z-index: 3; }
.car-stage .slide.was { z-index: 2; }

.car-stage .s-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;          /* 完整显示，不裁切 */
  transform: none;
  transition: none;
}


/* 4:3 的框里用纯色底托住照片，不再做模糊景深 */
.car-stage .s-blur { display: none; }

/* ---------- 占位画面 ---------- */
.car-stage .ph-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 22% 18%, rgba(80, 150, 240, .38), transparent 58%),
    radial-gradient(120% 90% at 82% 82%, rgba(255, 190, 90, .20), transparent 60%),
    linear-gradient(150deg, #0d2b4e, #05142a 62%, #030c1c);
  
  
}

.car-stage .ph-lines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to bottom,
    rgba(255, 255, 255, .045) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
  opacity: .7;
}
.car-stage .ph-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 clamp(64px, 11vw, 140px)/1 "Songti SC", "STSong", serif;
  letter-spacing: .04em;
  color: rgba(178, 221, 255, .16);
  text-shadow: 0 0 48px rgba(120, 190, 255, .22);
  user-select: none;
}

/* ---------- 转场光束 ---------- */


/* 照片下方那行小字（可选） */
.car-stage figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 5;
  padding: 46px 18px 14px;
  font-size: 13px;
  letter-spacing: .05em;
  color: #eef7ff;
  text-align: center;
  text-shadow: 0 2px 12px rgba(0, 8, 22, .9);
  background: linear-gradient(transparent, rgba(3, 11, 24, .8));
  opacity: 0;
  transition: opacity .35s var(--ease);
}
.car-stage .slide.on figcaption { opacity: 1; }

.car-vig {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: radial-gradient(112% 84% at 50% 46%,
    transparent 54%, rgba(2, 8, 18, .58) 100%);
}

/* ============================================================
   右侧信息牌
   ============================================================ */
.car-side {
  position: relative;
  min-height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(158deg, rgba(14, 42, 82, .72), rgba(5, 16, 34, .88));
  border: 1px solid rgba(120, 185, 240, .22);
}

/* 所有信息牌叠在一起，靠 .on 淡入 */
.car-side .ph-info {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 20px 20px 18px;
  opacity: 0;
  
  transition: opacity .35s var(--ease);
  pointer-events: none;
}
.car-side .ph-info.on {
  display: flex;
  opacity: 1;
  pointer-events: auto;
}

/* 编号 */
.pi-no {
  font: 700 26px/1 "Songti SC", "STSong", serif;
  letter-spacing: .06em;
  color: #ffd977;
}
.pi-no i {
  font: 400 11px/1 inherit;
  font-style: normal;
  color: rgba(178, 210, 235, .6);
  margin-left: 5px;
}

/* 名字 */
.pi-name {
  margin: 12px 0 0;
  font: 700 clamp(20px, 2.1vw, 27px)/1.35 "Songti SC", "STSong", serif;
  letter-spacing: .03em;
  color: #f2f9ff;
}

/* 分隔：一条细线 + 一个小方块，做点秩序感 */
.pi-rule {
  position: relative;
  height: 1px;
  margin: 14px 0 0;
  background: linear-gradient(90deg, rgba(255, 217, 119, .8), rgba(120, 185, 240, .12));
}
.pi-rule::after {
  content: '';
  position: absolute;
  right: 0; top: -2px;
  width: 5px; height: 5px;
  background: #ffd977;
  transform: rotate(45deg);
}

/* 时间 / 地点：一条精致的信息行，左边一个小图标 */
.pi-line {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 9px 12px;
  border-radius: 11px;
  background: rgba(120, 185, 240, .07);
  border: 1px solid rgba(120, 185, 240, .14);
}
.pi-line .pi-ico {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  color: #ffd977;
  opacity: .95;
}
.pi-line .pi-ico svg { display: block; width: 100%; height: 100%; }
.pi-line .pi-v {
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: .01em;
  color: #dfeefc;
}
.pi-place .pi-v { color: #cfe6ff; }

.pi-hint {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.9;
  color: rgba(150, 190, 220, .8);
}
.pi-hint code {
  padding: 1px 5px;
  font-size: 11.5px;
  color: #cfe6ff;
  background: rgba(120, 185, 240, .14);
  border-radius: 5px;
}

/* ============================================================
   底部：圆点 + 进度条 + 说明
   ============================================================ */
.car-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.car-dots { display: flex; gap: 9px; }
.car-dots .dot {
  width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(150, 200, 240, .28);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.car-dots .dot:hover { background: rgba(190, 226, 255, .62); transform: scale(1.22); }
.car-dots .dot.on { background: #ffd977; transform: scale(1.4); }

.car-track {
  position: relative;
  flex: 1 1 140px;
  height: 3px;
  border-radius: 3px;
  background: rgba(150, 200, 240, .16);
  overflow: hidden;
}
.car-track > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #6fc0f0, #ffd977);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}
.car-note {
  font-size: 12px;
  letter-spacing: .04em;
  color: rgba(150, 190, 220, .72);
}

/* ============================================================
   窄屏：信息牌挪到画面下面
   ============================================================ */
@media (max-width: 860px) {
  .car-wrap { grid-template-columns: 1fr; gap: 12px; }
  .car-side { min-height: 0; }
  /* 窄屏时信息牌改成「按顺序流式排布」，只显示当前那张 */
  .car-side .ph-info { position: relative; opacity: 0; display: none; }
  .car-side .ph-info.on { display: flex; opacity: 1; }
  .car-stage { aspect-ratio: 4 / 3; max-height: 46vh; }
}
@media (max-width: 560px) {
  .car-note { display: none; }
  .car-stage { border-radius: 15px; }
  .pi-name { font-size: 20px; }
  .car-side .ph-info { padding: 16px 16px 14px; }
}