:root{
  --paper:#f6f3e9;
  --ink:#22383b;
  --ink-soft:#4a6b6a;
  --ink-faint:#7d938f;
  --teal:#3f8a92;
  --vermilion:#c05840;
  /* ↓ 可调参数（前端滑杆绑这几个） */
  --title-size:7.6vw;
  --title-track:.30em;
  --veil:1;
  --sway-dur:7.5s;
  --scene-warmth:1.03;
  --serif:'Noto Serif SC','Songti SC','Source Han Serif SC',serif;
  --sans:'Noto Sans SC','PingFang SC',system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  overflow:hidden;
  position:relative;
}

/* ══ 场景层 ═══════════════════════════════════════ */
.scene{position:fixed; inset:0; pointer-events:none; overflow:hidden}

.scene-bg{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 42%;
  /* 让插画退半步，题字才站得住 */
  filter:saturate(.94) brightness(var(--scene-warmth));
}

/* 中央提亮 + 四角压暗：既护住字，也像纸被光照着 */
.veil{
  position:absolute; inset:0;
  opacity:var(--veil);
  background:
    radial-gradient(46% 42% at 52% 48%, rgba(250,248,240,.82) 0%, rgba(250,248,240,.42) 46%, rgba(250,248,240,0) 74%),
    radial-gradient(120% 100% at 50% 50%, rgba(255,255,255,0) 58%, rgba(120,140,128,.13) 100%);
}

/* 前景枝叶 */
.branch{
  position:absolute;
  top:-7%; right:-2%;
  width:clamp(230px,25vw,390px);
  mix-blend-mode:multiply;   /* 白纸乘掉，水彩笔触留下 */
  opacity:.9;
  transform-origin:60% 0;
  animation:leaf 11s ease-in-out infinite;
}

@keyframes leaf{
  0%,100%{transform:rotate(-1.4deg)}
  50%    {transform:rotate(1.6deg)}
}

/* 纸纹 */
.grain{
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:.07;
  mix-blend-mode:multiply;
}

/* ══ 风铃 ═════════════════════════════════════════ */
.furin{
  position:absolute;
  /* 铃身在方图里从 ~20% 处才开始，往上挪不能超过这个量，否则罩顶被裁 */
  top:-4vh;
  left:3%;
  width:var(--furin-w,318px);
  transform-origin:50% 0;
  animation:sway var(--sway-dur) ease-in-out infinite;
  filter:drop-shadow(0 0 9px rgba(255,255,255,.55))
         drop-shadow(0 16px 24px rgba(50,90,88,.2));
}
.furin-bell{display:block; width:100%}

/* 短册吊在铃口的内芯上：线头藏进铃身，纸从口沿下露出来 */
.furin-strip{
  position:absolute;
  top:64%; left:50%;
  width:23%;
  margin-left:-11.5%;
  transform-origin:50% 0;
  animation:clap var(--sway-dur) ease-in-out infinite;
}
.furin-strip img{display:block; width:100%}

@keyframes sway{0%,100%{transform:rotate(-1.2deg)} 50%{transform:rotate(1.2deg)}}
@keyframes clap{0%,100%{transform:rotate(5deg)} 46%{transform:rotate(-6deg)} 62%{transform:rotate(2.4deg)}}

/* ══ 题字 ═════════════════════════════════════════ */
.stage{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(26px,3.6vh,44px);
  padding-bottom:3vh;              /* 略微上移，让"開始"落在浅色天光里而不是石板路上 */
}

.plate{
  display:flex;
  flex-direction:row-reverse;      /* 竖排右起 */
  align-items:flex-start;
  gap:clamp(16px,1.8vw,26px);
}

.col-title{display:flex; flex-direction:column; align-items:center}

.title{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-weight:500;
  /* min(…,11vh) 是保命闸：四个字竖着排，字号只按 vw 走的话矮窗口会顶出画面上沿 */
  font-size:clamp(44px,min(var(--title-size),11vh),120px);
  letter-spacing:var(--title-track);
  line-height:1;
  color:var(--ink);
  text-shadow:0 1px 2px rgba(255,255,255,.55);
}

/* 朱印 */
.seal rect{fill:var(--vermilion)}
.seal{
  width:clamp(40px,3.6vw,52px);
  height:clamp(40px,3.6vw,52px);
  margin-top:clamp(22px,3vh,34px);
  transform:rotate(-4deg);
  opacity:.92;
  filter:drop-shadow(0 2px 3px rgba(120,60,45,.16));
}

/* 竖罫线 */
.rule{
  width:1px;
  align-self:center;
  min-height:clamp(118px,20vh,196px);
  background:linear-gradient(to bottom,
    rgba(45,77,78,0) 0%, rgba(45,77,78,.26) 18%, rgba(45,77,78,.26) 82%, rgba(45,77,78,0) 100%);
  margin-top:6px;
}

.kicker{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-weight:300;
  font-size:clamp(12px,1.05vw,15px);
  letter-spacing:.36em;
  line-height:2.15;
  color:var(--ink-soft);
  margin-top:clamp(12px,2.4vh,28px);
}

/* ══ 開始（一笔圆相） ══════════════════════════════ */
.start{
  position:relative;
  display:grid;
  place-items:center;
  width:154px; height:154px;
  text-decoration:none;
  transition:transform .45s cubic-bezier(.22,.7,.3,1);
}
/* 圆相底下垫一洼纸光，否则墨线沉进石板路里 */
.start::before{
  content:'';
  position:absolute; inset:-32px;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(251,249,241,.95) 0%, rgba(251,249,241,.72) 44%, rgba(251,249,241,0) 76%);
  z-index:-1;
}
.enso{
  position:absolute; inset:0;
  width:100%; height:100%;
  transition:transform .9s cubic-bezier(.22,.7,.3,1), opacity .5s ease;
  opacity:.95;
}
.start-text{
  writing-mode:vertical-rl;
  font-family:var(--serif);
  font-weight:500;
  font-size:24px;
  letter-spacing:.34em;
  text-indent:.34em;
  color:var(--ink);
  transition:color .4s ease;
}
.start:hover .enso{transform:rotate(9deg) scale(1.04); opacity:1}
.start:hover .start-text{color:var(--vermilion)}
.start:active{transform:scale(.97)}

/* ══ 入场：逐字落笔 → 一笔圆相 → 最后盖印 ══════════ */
.title span{
  /* 竖排里 block 会让每字各占一列 —— 必须 inline-block 才沿竖直行内轴走 */
  display:inline-block;
  opacity:0;
  animation:drop .9s cubic-bezier(.2,.75,.3,1) forwards;
}
.title span:nth-child(1){animation-delay:.25s}
.title span:nth-child(2){animation-delay:.42s}
.title span:nth-child(3){animation-delay:.59s}
.title span:nth-child(4){animation-delay:.76s}

@keyframes drop{
  from{opacity:0; transform:translateY(-16px); filter:blur(4px)}
  to  {opacity:1; transform:none; filter:blur(0)}
}

.rule,.kicker{opacity:0; animation:fade 1.1s ease forwards 1.05s}
.foot{opacity:0; animation:fade 1.1s ease forwards 1.9s}
@keyframes fade{to{opacity:.8}}
.kicker{animation-name:fade-k}
@keyframes fade-k{to{opacity:1}}

/* 圆相一笔画出 */
.enso path{
  stroke-dasharray:400;
  stroke-dashoffset:400;
  animation:draw 1.5s cubic-bezier(.35,.6,.3,1) forwards 1.35s;
}
.enso .enso-b{animation-delay:1.55s}
@keyframes draw{to{stroke-dashoffset:0}}

.start-text{opacity:0; animation:fade-k .9s ease forwards 2.2s}

/* 印章：轻微过冲，像手压下去又抬起 */
.seal{opacity:0; animation:stamp .5s cubic-bezier(.3,1.5,.4,1) forwards 2.55s}
@keyframes stamp{
  from{opacity:0; transform:rotate(-9deg) scale(1.5)}
  to  {opacity:.92; transform:rotate(-4deg) scale(1)}
}

/* 木漏れ日：一块极慢游走的光斑 */
.komorebi{
  position:absolute;
  left:6%; top:18%;
  width:44vw; height:52vh;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,253,240,.4) 0%, rgba(255,253,240,0) 70%);
  animation:drift 26s ease-in-out infinite;
}
@keyframes drift{
  0%,100%{transform:translate(0,0) scale(1);      opacity:.55}
  50%    {transform:translate(4vw,3vh) scale(1.1); opacity:.85}
}

/* ══ 页脚 ═════════════════════════════════════════ */
.foot{
  position:fixed;
  right:36px; bottom:28px;
  font-family:var(--serif);
  font-size:11.5px;
  font-weight:300;
  letter-spacing:.24em;
  color:var(--ink);
  /* 压在绣球花上会整条消失 —— 垫一张小色纸，落款贴纸的做法 */
  background:rgba(252,250,242,.74);
  padding:7px 13px 8px;
  border:1px solid rgba(45,77,78,.14);
  backdrop-filter:blur(1.5px);
}

/* ══ 窄屏 ═════════════════════════════════════════ */
@media (max-width:860px){
  .scene-bg{object-position:56% 46%}
  .furin{left:-4%; top:-3vh; --furin-w:180px}
  .branch{width:clamp(150px,42vw,220px); top:-4%; right:-6%}
  .veil{background:
    radial-gradient(56% 34% at 52% 48%, rgba(250,248,240,.88) 0%, rgba(250,248,240,.5) 48%, rgba(250,248,240,0) 76%),
    radial-gradient(120% 100% at 50% 50%, rgba(255,255,255,0) 56%, rgba(120,140,128,.14) 100%)}
  .rule{min-height:clamp(120px,22vh,200px)}
  .foot{right:18px; bottom:18px; font-size:10.5px; letter-spacing:.2em}
  .stage{gap:clamp(26px,3.6vh,38px); padding-bottom:1.5vh}
  .plate{gap:14px}
  .komorebi{width:70vw; height:34vh; top:10%}
}

@media (prefers-reduced-motion:reduce){
  .furin,.furin-strip,.branch,.komorebi{animation:none}
  /* 入场动画取消时必须把终态还回去，否则元素停在 opacity:0 */
  .title span,.rule,.kicker,.foot,.start-text,.seal{animation:none; opacity:1}
  .seal{transform:rotate(-4deg)}
  .enso path{animation:none; stroke-dashoffset:0}
}