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


body {
  font-family: 'Arial', sans-serif;
  background-color: #d9f3f0;
  color: #333;
  line-height: 1.4;
  overflow-x: hidden;
}

/* =========================
   Header
========================= */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 30px;
  background-color: #d9f3f0;
  border-bottom: 1px solid #eee;
  position: relative;
  z-index: 100;
  
}

.contact-info { font-size: 11px; line-height: 1.5; color: #333; }
.title-section { text-align: center; flex-grow: 1; }
.designer-title { font-size: 12px; font-weight: bold; letter-spacing: 2px; margin-bottom: 8px; }
.anna-logo { font-size: 20px; font-weight: bold; color: #666; letter-spacing: 3px; }
.education-info { font-size: 11px; text-align: right; line-height: 1.5; color: #333; }

/* =========================
   Hero: ANNA Letters
========================= */
.main-interactive-section{
  background: white; height: 100vh; position: relative;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.anna-interactive{
  display: flex; justify-content: center; align-items: center;
  width: 100%; height: 100%; gap: 1vw; position: relative; z-index: 10;
}
.letter-container{
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 2vh;            /* ↑↑ 再加一点内边距 */
}
.letter{
  font-size: 40vw;
  font-family: 'Impact','Franklin Gothic Bold',Arial,sans-serif;
  font-weight: 900; line-height: 1; text-align: center;
  position: relative; cursor: pointer; transition: all .3s ease; user-select: none;
  color:#000
}
.hollow-letter{
  color: transparent;
  -webkit-text-stroke: 12px #55a8a8;
  text-stroke: 12px #55a8a8;
  position: relative;
  /* overflow: hidden;  ← 删掉这行 */
  overflow: visible;             /* ← 改为 visible */
  color: #55a8a8;
}
.hollow-letter:hover { -webkit-text-stroke:12px #333; text-stroke:12px #333; }
.hollow-letter.active { -webkit-text-stroke:12px #000; text-stroke:12px #000; }

.letter-image{
  position:absolute; inset:0; background-size:cover; background-position:center;
  background-repeat:no-repeat; opacity:0; transition:opacity .4s ease; z-index:-1;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.hollow-letter:hover .letter-image,
.hollow-letter.active .letter-image{ opacity:1; -webkit-text-fill-color:transparent; }

.letter::before{
  content: attr(data-photo);
  position:absolute; inset:0; font-size:40vw;
  font-family:'Impact','Franklin Gothic Bold',Arial,sans-serif; font-weight:900;
  color:transparent; -webkit-text-stroke:12px transparent; text-stroke:12px transparent;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text; opacity:0; transition:opacity .4s ease; pointer-events:none;
}
.letter[data-photo="1"]::before{ background-image:url('images/photo1.jpg'); content:'A'; }
.letter[data-photo="2"]::before{ background-image:url('images/photo2.jpg'); content:'N'; }
.letter[data-photo="3"]::before{ background-image:url('images/photo3.jpg'); background-position:center 85%; content:'N'; }
.letter[data-photo="4"]::before{ background-image:url('images/photo4.jpg'); content:'A'; }

.hollow-letter:hover::before, .hollow-letter.active::before{ opacity:1; }
.hollow-letter:hover, .hollow-letter.active{ -webkit-text-stroke:12px transparent; text-stroke:12px transparent; }



/* =========================
   Photo Labels
========================= */
.photo-labels-section{ background:white; padding:30px 40px; border-bottom:1px solid #eee; }
.photo-labels{ display:flex; justify-content:space-around; font-size:14px; font-weight:bold; color:#666; }
.photo-label{ cursor:pointer; transition:all .3s ease; padding:10px 20px; border-radius:5px; }
.photo-label:hover{ color:#333; background:#f0f0f0; }
.photo-label.active{ color:#000; background:#e0e0e0; }

/* =========================
   Photo Section + Frames
========================= */
.photo-section{ background:white; padding:40px; position:relative; }
.photo-gallery{
  position:relative; height:600px; background:transparent; border-radius:0; overflow:visible; margin: 0 auto;  
}

.photo-frame.left{ left:-60px; width:60px; }
.photo-frame.right{ right:-60px; width:60px; }
/* =========================
   Carousel (inside .photo-gallery)
========================= */
.carousel{ position:absolute; inset:0; }
.slides{
  display:flex; align-items:stretch; gap:20px; height:100%;
  overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  padding:6px 6px 18px;
}
.slides::-webkit-scrollbar{ height:8px; }
.slides::-webkit-scrollbar-thumb{ background:rgba(0,0,0,.25); border-radius:999px; }
.slides::-webkit-scrollbar-track{ background:rgba(255,255,255,.15); }

.slide{
  position:relative; flex:0 0 100%; height:100%; scroll-snap-align:center;
    border-top-left-radius: 0;    /* 左上角直角 */
    border-top-right-radius: 0;   /* 右上角直角 */
    border-bottom-left-radius: 20px;  /* 左下角圆角 */
    border-bottom-right-radius: 20px; /* 右下角圆角 */
   overflow:hidden; 
}
.slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.slide figcaption{
  position:absolute; left:12px; bottom:12px; padding:6px 10px; font-size:12px; color:#fff;
  background:rgba(0,0,0,.45); border-radius:6px; letter-spacing:.3px;
}







/* ===== FUN 3D Helix — Fixed Box + Left Shift + Focus Zoom ===== */
.fun-portfolio-container {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #d9f3f0;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  overflow: hidden;
  background-color: #d9f3f0;
}

.fun-portfolio-container * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background-color: #d9f3f0;
}

/* 加载提示 */
.fun-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  background-color: #d9f3f0;
  z-index: 200;
  transition: opacity 0.5s;
}

.fun-loading.fun-hidden {
  opacity: 0;
  pointer-events: none;
}

/* 头部标题 */
.fun-header {
  position: absolute;
  top: 40px;
  left: 60px;
  z-index: 100;
}

.fun-header h1 {
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -2px;
  color: #fff;
  background-color: #d9f3f0;
}

/* 主要展示区域 */
.fun-main-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #d9f3f0;
}

.fun-display-area {
  width: 600px;
  height: 80vh;
  max-height: 700px;
  position: relative;
  perspective: 1500px;
  background-color: #d9f3f0;
}

/* Canvas容器 */
.fun-canvas-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #d9f3f0;
}

.fun-canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent; 
}

/* 作品描述文字 */
.fun-description {
  position: absolute;
  bottom: 60px;
  left: 60px;
  max-width: 350px;
  z-index: 100;
}

.fun-description h2 {
  font-size: 18px;
  margin-bottom: 15px;
  font-weight: 400;
  letter-spacing: 1px;
}

.fun-description p {
  font-size: 14px;
  line-height: 1.6;
  background-color: #d9f3f0;
}

/* 控制按钮 */
.fun-controls {
  position: absolute;
  bottom: 60px;
  right: 60px;
  display: flex;
  gap: 20px;
  z-index: 100;
}

.fun-control-btn {
  width: 40px;
  height: 40px;
  border: none;
 
  background: #55a8a8;
  color: white;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 18px;
}

.fun-control-btn:hover {
  background-color: #d9f3f0;
  border-color: rgba(255, 255, 255, 0.6);
}

.fun-control-btn.fun-active {
  background-color: #d9f3f0;
}

/* 作品信息覆盖层 */
.fun-work-info {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.5s;
  background: transparent;
}

.fun-work-info.fun-visible {
  opacity: 1;
  background: transparent;
}

.fun-work-info h3 {
  font-size: 24px;
  margin-bottom: 10px;
  font-weight: 300;
  letter-spacing: 2px;
  background: transparent;
}

.fun-work-info p {
  font-size: 14px;
  
  background: transparent;
}
* { margin: 0; padding: 0; box-sizing: border-box; }

/* 背景和 div 颜色全改成 #d9f3f0 */
body {
  font-family: 'Arial', sans-serif;
  background-color: #d9f3f0;
  color: #333;
  line-height: 1.4;
  overflow-x: hidden;
}
.header {
  background-color: #d9f3f0;
  display: flex;
}
.main-interactive-section{
  background: #d9f3f0;          /* 你的背景色 */
  height: 100vh;                 /* 仍然铺满一屏 */
  padding-block: 3vh;            /* ↑↑ 上下各留 3vh 空隙，防止描边顶到边框被裁 */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;             /* ← 关键：允许内容超出显示，不剪裁 */
}

.photo-labels-section {
  background-color: #d9f3f0;
}
.photo-section {
  background-color: #d9f3f0;
}

.fun-viewport {
  background-color: #d9f3f0;
}

/* === Stacked gallery === */
.carousel.stacked { position: absolute; inset: 0; }
.carousel.stacked .slides{
  position: relative;
  display: block;
  height: 100%;
  padding: 0;
  overflow: visible;        /* 允许溢出展示层叠 */
}

/* 统一的卡片外观 */
.carousel.stacked .slide{
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(78vw, 980px);
  height: min(70vh, 520px);
  transform: translate(-50%, -50%);
  border-radius: 18px;
  overflow: hidden;
  
  box-shadow: 0 18px 45px rgba(0,0,0,.28), 0 0 1px rgba(255,255,255,.6) inset;
  transition: transform .35s ease, box-shadow .35s ease, opacity .35s ease, z-index .35s ease;
}
.carousel.stacked .slide img{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* 基础层叠位移与角度（按出现顺序叠）*/
.carousel.stacked .slide:nth-child(1){ transform: translate(calc(-50% - 160px), -50%) rotate(-6deg);  z-index: 1;  opacity:.85; }
.carousel.stacked .slide:nth-child(2){ transform: translate(calc(-50% - 80px),  -50%) rotate(-3deg);  z-index: 2;  opacity:.9;  }
.carousel.stacked .slide:nth-child(3){ transform: translate(-50%,            -50%) rotate(0deg);     z-index: 3;  opacity:1;   }
.carousel.stacked .slide:nth-child(4){ transform: translate(calc(-50% + 80px), -50%) rotate(3deg);   z-index: 2;  opacity:.9;  }
.carousel.stacked .slide:nth-child(5){ transform: translate(calc(-50% + 160px),-50%) rotate(6deg);   z-index: 1;  opacity:.85; }

/* Hover 到任何一张时，把它抬到最上层并放大一点 */
.carousel.stacked .slide:hover{
  z-index: 10;
  transform: translate(-50%, -50%) scale(1.02) rotate(0deg);
  box-shadow: 0 24px 70px rgba(0,0,0,.35);
}

/* 小屏微调 */
@media (max-width: 768px){
  .carousel.stacked .slide{
    width: 92vw; height: 58vh;
  }
  .carousel.stacked .slide:nth-child(1){ transform: translate(calc(-50% - 80px), -50%) rotate(-4deg); }
  .carousel.stacked .slide:nth-child(2){ transform: translate(calc(-50% - 40px), -50%) rotate(-2deg); }
  .carousel.stacked .slide:nth-child(4){ transform: translate(calc(-50% + 40px), -50%) rotate(2deg); }
  .carousel.stacked .slide:nth-child(5){ transform: translate(calc(-50% + 80px), -50%) rotate(4deg); }
}

/* 圆点在堆叠模式隐藏（可留可去） */
.carousel.stacked ~ .dots{ display:none; }

/* === Mini Projects Drawer · 居右居中 · 无缝贴合版 === */
:root{
  --proj-tab-w: 60px;      /* 竖向标签宽 */
  --proj-panel-w: 180px;   /* 面板宽 */
  --seam-nudge: 1px;       /* 接缝微调：0~2px 之间，根据屏幕渲染调整 */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background-color: #c8d9d9;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* 侧边栏整体容器 */
.sidebar-wrapper {
  position: fixed;
  right: -200px; /* 初始状态隐藏菜单部分 */
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1000;
}

.sidebar-wrapper.open {
  right: 0; /* 展开状态 */
}

/* Projects 按钮 - 垂直样式匹配图片 */
.projects-btn {
  width: 50px;
  height: 200px;
  background-color: #55a8a8;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 3px;
  border-radius: 12px 0 0 12px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: -3px 0 10px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.projects-btn:hover {
  background-color: #55a8a8;
}

/* 文字垂直排列 */
.projects-text {
  writing-mode: vertical-lr;
  text-orientation: mixed;
  transform: rotate(180deg);
}

/* 菜单面板 */
.menu-panel {
  width: 200px;
  background-color: #ffffff;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  padding: 10px 0;
}

/* 菜单项 */
.menu-item {
  display: block;
  width: 100%;
  padding: 15px 25px;
  background: none;
  border: none;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  color: #333;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
}

.menu-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20px;
  right: 20px;
  height: 1px;
  background-color: #f0f0f0;
}

.menu-item:last-child::after {
  display: none;
}

.menu-item:hover {
  background-color: #f5f5f5;
  padding-left: 30px;
}

.menu-item.active {
  background-color: #e3f2fd;
  color: #1976d2;
  font-weight: 600;
}

.menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #1976d2;
}



/* 主内容区域 */
.main-content {
  padding: 50px;
  max-width: 800px;
  margin: 0 auto;
}

.main-content h1 {
  color: #333;
  margin-bottom: 20px;
}

.main-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

/* 拖动时的样式 */
.sidebar-wrapper.dragging {
  transition: none;
}

/* 移动端优化 */
@media (max-width: 768px) {
  .sidebar-wrapper {
      right: -180px;
  }
  
  .menu-panel {
      width: 180px;
  }
  
  .projects-btn {
      width: 45px;
      height: 180px;
      font-size: 16px;
  }
}