@import url("https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+XiaoWei:wght@400;700&display=swap");

:root{
  --bg-1:#0b0b12;        /* 深黑紫 */
  --bg-2:#141424;        /* 夜色紫 */
  --accent:#8a5cff;      /* 亮紫 */
  --accent-2:#c59bff;    /* 浅紫 */
  --text:#f7f7fb;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
}
body{
  font-family:"ZCOOL XiaoWei","Noto Serif SC",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2));
  overflow:hidden;
}

.snap-container{
  height:100vh;
  overflow-y:scroll;
  scroll-snap-type:y mandatory;
}

.screen{
  position:relative;
  height:100vh;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.screen-1{
  background:radial-gradient(1200px 600px at 10% 20%,rgba(138,92,255,.10),transparent),
             radial-gradient(1200px 600px at 90% 80%,rgba(197,155,255,.08),transparent);
}

.screen-2{
  background:radial-gradient(1000px 800px at 50% 10%,rgba(197,155,255,.07),transparent);
}

.content{
  max-width:1600px;
  text-align:center;
}
.content.layout-left,.content.layout-right{
  display:grid;
  grid-template-columns: minmax(0,1.1fr) minmax(0,0.9fr); /* 防止内容最小宽度挤压导致布局跳动 */
  gap:80px; /* 拉开图片与文字距离 */
  align-items:center;
  text-align:left;
}
.content.layout-right{grid-template-columns: 1fr max-content} /* 右侧列宽随图片内容宽度，保证文本与图片之间恒定为 gap */
.content.layout-left .photo{order:1;justify-self:start;margin:0 0 20px 0}
.content.layout-left .text{order:2;justify-self:end}
.content.layout-right .text{order:1;text-align:right;justify-self:start}
.content.layout-right .photo{order:2;justify-self:end;margin:0 0 20px 0}

.photo{
  height:70vh;
  width:auto;
  max-width:100%;
  display:block;
  margin:0 auto 20px;
  border-radius:16px;
  box-shadow:0 14px 40px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;
  transition:opacity .35s ease;
}
.content.layout-right .photo{justify-self:end}

h1{
  font-family:"ZCOOL XiaoWei","Noto Serif SC",serif;
  font-weight:700;
  font-size:56px;
  letter-spacing:1px;
  margin:0 0 16px;
}

h2{
  font-family:"ZCOOL XiaoWei","Noto Serif SC",serif;
  font-weight:600;
  font-size:40px;
  margin:0 0 12px;
}

p{
  margin:0 auto 24px;
  font-size:18px;
  line-height:1.7;
  opacity:.92;
}

/* 强化两页主文案为更具艺术感的手写字体与渐变文字 */
.screen-1 .text p,
.screen-2 .text .note{
  font-family:"Ma Shan Zheng","ZCOOL XiaoWei","Noto Serif SC",serif;
  font-size:28px;
  line-height:1.65;
  letter-spacing:.5px;
  background:linear-gradient(180deg,#ffffff, var(--accent-2));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* 保持第二页原有间距，不额外限制文本容器宽度 */

/* 第一页文案保持单行显示 */
.screen-1 .text p{
  white-space:nowrap;
  word-break:keep-all;
}

.note{max-width:680px}

.signature{
  margin-top:24px;
  opacity:.85;
  font-style:normal;
  font-family:"ZCOOL KuaiLe","ZCOOL XiaoWei","Noto Serif SC",serif;
}

.btn{
  appearance:none;
  border:none;
  background:linear-gradient(135deg,var(--accent),#a77bff);
  color:#fff;
  padding:12px 20px;
  border-radius:999px;
  font-weight:600;
  letter-spacing:.3px;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(138,92,255,.35);
  transition:transform .18s ease,box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 28px rgba(138,92,255,.45)}
.btn:active{transform:translateY(0)}

.ornament{
  position:absolute;
  width:160px;height:160px;
  border-radius:50%;
  filter:blur(40px);
  opacity:.35;
}
.ornament-left{
  left:6%;bottom:12%;
  background:conic-gradient(from 120deg at 50% 50%, var(--accent), var(--accent-2));
}
.ornament-right{
  right:8%;top:12%;
  background:conic-gradient(from -30deg at 50% 50%, var(--accent-2), var(--accent));
}

.scroll-hint{
  position:absolute;
  left:50%;bottom:18px;
  transform:translateX(-50%);
  font-size:12px;
  letter-spacing:4px;
  text-transform:uppercase;
  color:var(--accent-2);
  opacity:.85;
  user-select:none;
}
.scroll-hint::after{
  content:"";
  display:block;
  width:12px;height:12px;
  border-right:2px solid var(--accent-2);
  border-bottom:2px solid var(--accent-2);
  margin:8px auto 0;
  transform:rotate(45deg);
  animation:hint 1.2s ease-in-out infinite;
}
@keyframes hint{
  0%{transform:translateY(0) rotate(45deg)}
  50%{transform:translateY(6px) rotate(45deg)}
  100%{transform:translateY(0) rotate(45deg)}
}

@media (max-width:768px){
  h1{font-size:40px}
  h2{font-size:28px}
  p{font-size:16px}
  .screen-1 .text p,
  .screen-2 .text .note{font-size:22px}
  .photo{height:85vh}
  .content.layout-left,.content.layout-right{display:block;text-align:center}
  .content.layout-right .text{text-align:center}
}

/* 仅在桌面端进一步把第一页图片向左靠近边缘 */
@media (min-width:1024px){
  .content.layout-left{grid-template-columns:1.3fr 0.7fr}
  .content.layout-left .photo{margin-left:-24px}
}