/* ═══════════════════════════════════════════
   标题画面
   ═══════════════════════════════════════════ */

.title-screen{
  display:grid;
  grid-template-rows:1fr auto auto;
  overflow:hidden;
  background:var(--ink-950);
}

/* ── 背景 ── */
.title-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at 26% 22%,rgba(96,88,168,.42) 0%,transparent 66%),
    radial-gradient(60% 50% at 82% 68%,rgba(190,104,132,.30) 0%,transparent 64%),
    radial-gradient(120% 90% at 50% 110%,rgba(40,60,96,.5) 0%,transparent 60%),
    linear-gradient(168deg,#0a0b18 0%,#121024 46%,#0a0913 100%);
}
.title-bg-glow{
  position:absolute;inset:-10%;
  background:
    radial-gradient(closest-side,rgba(230,203,146,.16),transparent 70%) 68% 18%/46% 40% no-repeat,
    radial-gradient(closest-side,rgba(244,168,191,.14),transparent 70%) 24% 74%/40% 36% no-repeat;
  filter:blur(18px);
  animation:glowDrift 18s ease-in-out infinite alternate;
}
@keyframes glowDrift{
  0%{transform:translate3d(0,0,0) scale(1);}
  100%{transform:translate3d(-2.5%,1.8%,0) scale(1.06);}
}

/* 飘落花瓣容器 */
.title-bg-sakura{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.petal{
  position:absolute;top:-6%;
  width:9px;height:9px;
  background:linear-gradient(135deg,rgba(255,214,228,.92),rgba(244,168,191,.35));
  border-radius:70% 0 70% 40%;
  opacity:0;
  animation:petalFall linear infinite;
  will-change:transform,opacity;
}
@keyframes petalFall{
  0%{opacity:0;transform:translate3d(0,-10px,0) rotate(0deg) scale(.8);}
  8%{opacity:.85;}
  70%{opacity:.6;}
  100%{opacity:0;transform:translate3d(var(--drift,60px),105vh,0) rotate(560deg) scale(1.05);}
}

/* 顶部暗角 */
.title-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(4,4,10,.62) 100%),
    linear-gradient(180deg,rgba(4,4,10,.5) 0%,transparent 22%,transparent 62%,rgba(4,4,10,.86) 100%);
}

/* ── 标题字 ── */
.title-main{
  position:relative;z-index:2;
  align-self:start;
  padding:clamp(40px,11vh,110px) 0 0 clamp(24px,7vw,96px);
  animation:titleIn 1.5s var(--ease-out) both;
}
@keyframes titleIn{
  from{opacity:0;transform:translateY(26px);filter:blur(10px);}
  to{opacity:1;transform:none;filter:none;}
}

.title-logo{
  display:flex;flex-direction:column;
  font-family:var(--font-serif);
  line-height:1.06;
  color:var(--paper);
  text-shadow:
    0 2px 30px rgba(0,0,0,.7),
    0 0 60px rgba(230,203,146,.24);
}
.tl-line{display:block;}
.tl-line1{
  font-size:clamp(21px,5.2vw,36px);
  letter-spacing:.34em;
  color:rgba(244,240,231,.82);
}
.tl-line2{
  font-size:clamp(46px,13vw,96px);
  letter-spacing:.1em;
  margin-top:.04em;
  background:linear-gradient(170deg,#fffdf7 0%,#f2e2c4 42%,#d8a7b8 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(230,203,146,.3));
}
.tl-dot{position:relative;}
.tl-dot::after{
  content:"";position:absolute;top:.16em;left:.02em;
  width:.16em;height:.16em;border-radius:50%;
  background:var(--sakura);
  box-shadow:0 0 18px 3px rgba(244,168,191,.75);
  animation:pulse 3.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.55;transform:scale(.9);}50%{opacity:1;transform:scale(1.15);}}

.title-en{
  margin-top:20px;
  font-size:clamp(8.5px,1.9vw,11px);
  letter-spacing:.56em;
  color:var(--text-faint);
  font-weight:300;
}
.title-rule{
  width:min(230px,42vw);height:1px;margin:22px 0 16px;
  background:linear-gradient(90deg,var(--gold-soft),rgba(230,203,146,.05) 72%,transparent);
}
.title-tag{
  font-family:var(--font-serif);
  font-size:clamp(11px,2.4vw,13.5px);
  letter-spacing:.24em;
  color:rgba(230,203,146,.62);
}

/* ── 菜单 ── */
.title-menu{
  position:relative;z-index:2;
  display:flex;flex-direction:column;
  gap:2px;
  align-self:end;
  padding:0 clamp(24px,7vw,96px) clamp(24px,5vh,48px);
  animation:titleIn 1.5s .3s var(--ease-out) both;
}
.title-menu button{
  position:relative;
  display:flex;align-items:center;
  padding:13px 0 13px 0;
  font-family:var(--font-serif);
  font-size:clamp(14px,3.4vw,16.5px);
  letter-spacing:.2em;
  color:rgba(234,231,223,.62);
  transition:color .3s var(--ease),padding-left .34s var(--ease-out),letter-spacing .34s var(--ease-out);
  text-align:left;
  width:fit-content;
}
.title-menu button::before{
  content:"";position:absolute;left:-22px;top:50%;
  width:12px;height:1px;
  background:var(--gold);
  opacity:0;transform:translateY(-50%) scaleX(0);transform-origin:left;
  transition:.34s var(--ease-out);
}
.title-menu button::after{
  content:"";position:absolute;left:0;bottom:8px;
  width:100%;height:1px;
  background:linear-gradient(90deg,rgba(230,203,146,.5),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .4s var(--ease-out);
}
.title-menu button:hover,
.title-menu button:focus-visible{
  color:var(--paper);
  padding-left:14px;
  letter-spacing:.28em;
  outline:none;
}
.title-menu button:hover::before,
.title-menu button:focus-visible::before{opacity:1;transform:translateY(-50%) scaleX(1);}
.title-menu button:hover::after,
.title-menu button:focus-visible::after{transform:scaleX(1);}
.title-menu button[disabled]{
  color:rgba(234,231,223,.2);cursor:not-allowed;
}
.title-menu button[disabled]:hover{padding-left:0;letter-spacing:.2em;}
.title-menu button[disabled]::before,
.title-menu button[disabled]::after{display:none;}

/* ── 页脚 ── */
.title-foot{
  position:relative;z-index:2;
  display:flex;justify-content:space-between;align-items:center;
  padding:0 clamp(24px,7vw,96px) max(16px,env(safe-area-inset-bottom));
  font-size:9.5px;letter-spacing:.2em;
  color:rgba(120,117,132,.6);
  animation:titleIn 1.5s .5s var(--ease-out) both;
}
.title-ver{font-family:var(--font-mono);letter-spacing:.14em;}

/* ── 横屏矮屏适配 ── */
@media (max-height:520px){
  .title-main{padding-top:24px;}
  .tl-line2{font-size:clamp(34px,9vh,54px);}
  .title-en,.title-rule,.title-tag{display:none;}
  .title-menu{
    position:absolute;right:clamp(24px,7vw,96px);bottom:52px;
    align-items:flex-end;
    padding:0;
  }
  .title-menu button{padding:8px 0;font-size:13px;}
  .title-menu button:hover{padding-left:0;padding-right:12px;}
  .title-menu button::before{left:auto;right:-22px;transform-origin:right;}
}

@media (max-width:400px){
  .tl-line2{letter-spacing:.04em;}
}