/* =============================================
   style.css - 吴树旸个人展示
   玻璃拟态背景 + 光影流动 + 照片墙
   ============================================= */

/* ---------- Reset & Base ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- 玻璃拟态背景 + 光影流动 (深紫色系) ---------- */
body {
  position: relative;
  background: linear-gradient(135deg, #d1c4e9 0%, #b39ddb 20%, #ce93d8 40%, #b39ddb 60%, #d1c4e9 80%, #e1bee7 100%);
  background-size: 400% 400%;
  animation: auroraFlow 18s ease-in-out infinite alternate;
}

@keyframes auroraFlow {
  0%   { background-position: 0% 50%; }
  20%  { background-position: 30% 10%; }
  40%  { background-position: 70% 20%; }
  60%  { background-position: 100% 50%; }
  80%  { background-position: 60% 80%; }
  100% { background-position: 0% 50%; }
}

/* 叠加光晕 - 深紫色氛围 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 55% at 15% 25%, rgba(180,140,220,0.5) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 75% 65%, rgba(200,150,230,0.4) 0%, transparent 60%),
    radial-gradient(ellipse 55% 40% at 40% 15%, rgba(160,120,200,0.35) 0%, transparent 55%),
    radial-gradient(ellipse 45% 50% at 85% 85%, rgba(210,160,230,0.3) 0%, transparent 50%),
    radial-gradient(ellipse 60% 45% at 25% 75%, rgba(150,100,190,0.25) 0%, transparent 55%);
  pointer-events: none;
  animation: glowPulse 12s ease-in-out infinite alternate;
}

@keyframes glowPulse {
  0%   { opacity: 0.6; transform: scale(1); }
  50%  { opacity: 1;   transform: scale(1.04); }
  100% { opacity: 0.6; transform: scale(1); }
}

/* 玻璃主容器 */
.glass-container {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 0 0;
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
}

/* ---------- 标题 ---------- */
.site-title {
  position: relative;
  z-index: 5;
  font-size: 22px;
  font-weight: 700;
  color: rgba(60, 60, 90, 0.85);
  text-shadow: 0 1px 3px rgba(255,255,255,0.5);
  letter-spacing: 3px;
  text-align: center;
  padding: 8px 0 6px;
  user-select: none;
  flex-shrink: 0;
}

/* ---------- 主体区域（视频 + 照片墙） ---------- */
.main-area {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding-bottom: 0;
}

/* ---------- 视频容器 ---------- */
.video-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 视频卡片 - 玻璃效果边框 */
.video-card {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(100, 100, 140, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-card video {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  background: transparent;
}

/* 桌面宽屏用 contain */
@media (min-width: 768px) {
  .video-card video {
    object-fit: contain;
    max-height: 100%;
    width: auto;
  }
}

/* 移动端竖屏视频铺满 */
@media (max-width: 767px) {
  .video-card video {
    height: 100%;
    width: auto;
    max-height: 100vh;
  }
}

/* ---- 顶部提示条 ---- */
.play-hint {
  position: fixed;
  top: 54px; left: 0; right: 0;
  z-index: 15;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 20px;
  color: rgba(80, 80, 120, 0.8);
  font-size: 14px;
  letter-spacing: 1px;
  text-align: center;
  pointer-events: none;
  transition: opacity .6s ease;
  user-select: none;
}

.play-hint.hidden {
  opacity: 0;
  pointer-events: none;
}

.play-hint .icon svg {
  display: block;
  width: 20px;
  height: 20px;
}
.play-hint .icon svg circle {
  stroke: rgba(80, 80, 120, 0.8);
}
.play-hint .icon svg polygon {
  fill: rgba(80, 80, 120, 0.8);
}

/* ---- 播放遮罩 ---- */
.start-overlay {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  color: rgba(60, 60, 90, 0.9);
  cursor: pointer;
  transition: opacity .4s ease;
}

.start-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.start-overlay .play-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(100,100,140,0.12);
  transition: transform .2s ease, background .2s ease;
}

.start-overlay:active .play-circle {
  transform: scale(.92);
  background: rgba(255,255,255,0.5);
}

.start-overlay .play-circle svg {
  width: 32px; height: 32px;
  margin-left: 3px;
}
.start-overlay .play-circle svg circle {
  stroke: rgba(60, 60, 90, 0.8);
}
.start-overlay .play-circle svg polygon {
  fill: rgba(60, 60, 90, 0.8);
}

.start-overlay .start-text {
  font-size: 15px;
  opacity: .75;
  letter-spacing: .5px;
}

/* ---------- 照片墙 ---------- */
.photo-wall {
  display: none;         /* 默认隐藏 */
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;  /* 不干扰点击 */
  overflow: hidden;
}

.photo-wall.show {
  display: block;
}

.photo-wall .wall-photo {
  position: absolute;
  pointer-events: none;
  border-radius: 8px;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  box-shadow:
    0 4px 16px rgba(100, 100, 140, 0.1),
    inset 0 1px 0 rgba(255,255,255,0.4);
  filter: saturate(1.05) brightness(1.02);
}

.photo-wall .wall-photo.loaded {
  opacity: 0.7;
}

.photo-wall .wall-photo:hover {
  opacity: 1;
}

/* 桌面宽屏下照片墙显示 */
@media (min-width: 900px) {
  .photo-wall {
    display: block;
  }
}

/* ---------- video controls 美化 ---------- */
video::-webkit-media-controls {
  display: flex !important;
}