/* ————————————————— POTION · tour.css — walkthrough player ————————————————— */

.tour-page{overflow-x:clip}
.head-nav a.here{color:var(--ink)}
.head-nav a.here span{color:var(--lilac)}

/* ——— intro ——— */
.tour-hero{
  min-height:88svh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:120px var(--pad) 40px;position:relative;
}
.tour-paren{color:var(--muted);margin-bottom:clamp(14px,3vh,30px)}
.tour-title{
  font-size:clamp(46px,8.6vw,124px);line-height:.96;letter-spacing:-.035em;font-weight:480;
}
.tour-title .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.04em}
.tour-title .line>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s var(--ease)}
body.ready .tour-title .line>span{transform:none}
.tour-title .line:nth-child(2)>span{transition-delay:.08s}
.tour-title.small{font-size:clamp(38px,6.4vw,92px)}
.tour-sub{max-width:420px;font-size:15px;color:var(--ink-soft);margin-top:clamp(22px,4vh,44px)}
.tour-hero .scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%)}

/* ——— the player ——— */
.tour{
  display:grid;
  grid-template-columns:minmax(300px,1.05fr) minmax(320px,1fr) 200px;
  gap:clamp(20px,3vw,60px);
  padding:0 var(--pad);
  align-items:center;
  min-height:100svh;
}

/* text panel */
.tour-text{grid-column:1;max-width:470px;justify-self:end;width:100%}
.step-text{
  transition:opacity .21s ease,transform .21s ease;
}
.step-text.sw{opacity:0;transform:translateY(12px)}
.step-num{font-size:11px;color:var(--muted);letter-spacing:.2em;margin-bottom:10px;display:block}
.step-kicker{color:var(--muted);display:flex;align-items:center;gap:12px}
.step-kicker::after{content:"";flex:1;max-width:70px;height:1px;background:var(--hair)}
.step-text h3{
  font-size:clamp(34px,3.8vw,58px);line-height:1;letter-spacing:-.028em;font-weight:490;
  margin:16px 0 12px;
}
.step-text .cn{font-size:13px;color:var(--muted);letter-spacing:.3em;margin-bottom:14px;display:block}
.step-text p{font-size:15px;color:var(--ink-soft);max-width:390px;min-height:3.2em}
.clip-bar{height:2px;background:var(--hair);margin-top:30px;overflow:hidden;border-radius:2px}
.clip-bar i{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left}
.player-ctrl{display:flex;gap:30px;margin-top:24px;color:var(--ink-soft)}
.auto-note{color:var(--muted);margin-top:20px;font-size:9.5px}

/* phone */
.phone-col{
  grid-column:2;height:100svh;
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.phone{
  position:relative;
  height:min(74vh,680px);aspect-ratio:1206/2622;
  z-index:2;
}
.phone-frame{
  position:absolute;inset:-12px;border-radius:15%/6.9%;
  background:linear-gradient(150deg,#ded7cb 0%,#c4bcae 38%,#a89f90 62%,#cfc7b9 100%);
  box-shadow:
    0 40px 90px -30px rgba(46,38,26,.42),
    0 12px 30px -12px rgba(46,38,26,.28),
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -1px 1px rgba(0,0,0,.22);
}
.phone-bezel{
  position:absolute;inset:-5px;border-radius:13.4%/6.2%;
  background:#0b0a09;
}
.screen{
  position:absolute;inset:0;border-radius:11.5%/5.3%;overflow:hidden;
  background:#0b0a09;transform:translateZ(0);contain:layout paint;
}
.phone .scr{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;background:#0b0a09;
  transform:translateX(104%);will-change:transform;
}
.phone .scr.front{z-index:2}
.island{
  position:absolute;top:2.1%;left:50%;transform:translateX(-50%);
  width:31%;height:3.1%;border-radius:999px;background:#0b0a09;z-index:5;
}
.side-btn{position:absolute;background:linear-gradient(90deg,#9d947f,#c4bcae);border-radius:3px;z-index:0}
.sb-action{left:-14.5px;top:17%;width:4px;height:4.5%}
.sb-vol1{left:-14.5px;top:25%;width:4px;height:7.5%}
.sb-vol2{left:-14.5px;top:34.5%;width:4px;height:7.5%}
.sb-power{right:-14.5px;top:27%;width:4px;height:11%}
.play-hint{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:6;background:var(--ink);color:var(--bg);border-radius:999px;
  padding:14px 28px;letter-spacing:.14em;cursor:pointer;font-size:11px;
  box-shadow:0 12px 34px rgba(20,15,8,.35);
  transition:transform .3s var(--ease);
}
.play-hint:hover{transform:translate(-50%,-50%) scale(1.05)}
.phone-shadow{
  position:absolute;bottom:6vh;left:50%;transform:translateX(-50%);
  width:56%;height:26px;border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(46,38,26,.3),transparent 70%);
  filter:blur(10px);z-index:1;
}

/* rail */
.rail{
  grid-column:3;
  display:flex;flex-direction:column;gap:1px;
  font-size:9.5px;
}
.rail .r-group{color:var(--muted);margin:9px 0 4px;letter-spacing:.2em;font-size:9px}
.rail .r-group:first-child{margin-top:0}
.rail button{
  text-align:left;padding:2.5px 0 2.5px 14px;position:relative;
  color:var(--muted);letter-spacing:.14em;text-transform:uppercase;
  font:inherit;transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.rail button::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleX(0);
  width:8px;height:1.5px;background:var(--ink);transition:transform .35s var(--ease);transform-origin:left;
}
.rail button:hover{color:var(--ink-soft)}
.rail button.on{color:var(--ink)}
.rail button.on::before{transform:translateY(-50%) scaleX(1)}

/* ——— outro ——— */
.tour-outro{
  min-height:70vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:60px var(--pad);
}
.tour-outro .tour-title .line>span{transform:none}
.tour-outro .dl-btns{margin-top:clamp(44px,8vh,84px)}
.back-link{color:var(--muted);transition:color .3s}
.back-link:hover{color:var(--ink)}
.tour-outro .dl-note{margin-top:26px}

/* ——— responsive ——— */
@media (max-width:1240px){
  .tour{grid-template-columns:minmax(280px,1fr) minmax(300px,1fr)}
  .rail{display:none}
  .tour-text{justify-self:start}
}
@media (max-width:900px){
  .tour{
    display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
    min-height:100svh;padding-top:92px;gap:14px;
  }
  .phone-col{order:-1;height:auto}
  .phone{height:min(44vh,400px)}
  .phone-frame{inset:-8px}
  .phone-bezel{inset:-3.5px}
  .side-btn{display:none}
  .phone-shadow{display:none}
  .tour-text{max-width:380px;text-align:center;justify-self:center}
  .step-num{margin-bottom:6px}
  .step-kicker{justify-content:center}
  .step-kicker::after{display:none}
  .step-text h3{font-size:clamp(28px,7vw,38px);margin:10px 0 8px}
  .step-text p{min-height:4.4em;font-size:14px}
  .player-ctrl{justify-content:center;gap:34px}
  .auto-note{text-align:center}
}
@media (max-height:600px) and (min-width:901px){
  .phone{height:min(80vh,680px)}
}

/* ————————————————— 中文排版覆盖 ————————————————— */
.tour-title{letter-spacing:.02em;line-height:1.1}
.step-text h3{letter-spacing:.02em;line-height:1.2}
.step-text p{line-height:1.8}
.tour-sub{line-height:1.8}