/* Live portfolio tour (tour.js): sites scroll inside a browser + phone on a sticky stage */
.tour-sec{padding-bottom:0}
.tour-list{margin-top:28px;display:grid;gap:8px;color:var(--ink-dim)}
.tour-list a{font-weight:800;color:var(--ink,#fff)}
.js .tour-list{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html:not(.js) .tour{display:none}
.tour{position:relative;height:calc(var(--n,6) * 130vh + 170vh)}
.tour .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;place-items:center;--acc:#ff4b2b;background:#17140a}
.tour .marq{position:absolute;top:50%;left:0;translate:0 -50%;white-space:nowrap;font-weight:800;font-size:clamp(8rem,22vw,24rem);letter-spacing:-.05em;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.13);will-change:transform;pointer-events:none}
.tour .devices{position:relative;z-index:3;width:min(780px,48vw);will-change:transform}
.tour .browser{display:block;border-radius:16px;overflow:hidden;background:#15171b;box-shadow:0 70px 140px -50px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.08)}
.tour .bar{display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#1b1d22}
.tour .bar i{width:10px;height:10px;border-radius:50%}
.tour .bar i:nth-child(1){background:#ff5f57}.tour .bar i:nth-child(2){background:#febc2e}.tour .bar i:nth-child(3){background:#28c840}
.tour .bar span{margin:0 auto;font-size:.76rem;font-weight:700;color:#a4a5ab;background:#26282e;padding:3px 18px;border-radius:9px;min-width:230px;text-align:center}
.tour .screen{position:relative;aspect-ratio:16/10;overflow:hidden;background:#000}
.tour .strip{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform,opacity;opacity:0}
.tour .phone{position:absolute;right:-9%;bottom:-12%;width:25%;aspect-ratio:9/19.5;border-radius:16% / 7.4%;background:#0d0e10;padding:2.2%;box-shadow:0 50px 90px -30px rgba(0,0,0,.95),0 0 0 1.5px rgba(255,255,255,.14);will-change:transform}
.tour .pscreen{position:relative;width:100%;height:100%;border-radius:13% / 6%;overflow:hidden;background:#000}
.tour .notch{position:absolute;top:2.4%;left:50%;translate:-50% 0;width:32%;height:3.4%;border-radius:20px;background:#000;z-index:3}
.tour .ttl{position:absolute;left:var(--gutter);top:50%;translate:0 -50%;z-index:4;width:calc(25vw - var(--gutter))}
.tour .idx{font-size:.8rem;font-weight:800;letter-spacing:.2em;color:var(--acc)}
.tour .tname{font-size:clamp(2.2rem,4.2vw,4.6rem);line-height:.95;letter-spacing:-.03em;margin-top:14px;font-weight:800;min-height:1.9em}
.tour .tname .wd{display:inline-block;white-space:nowrap}
.tour .tname .ch{display:inline-block;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .55s;transform-origin:50% 100%}
.tour .tname.out .ch{transform:translateY(60%) rotateX(-70deg);opacity:0}
.tour .cat{display:block;margin-top:16px;font-weight:700;color:#a4a5ab}
.tour .inf{position:absolute;right:calc(var(--gutter) + 50px);top:50%;translate:0 -50%;z-index:4;width:calc(23vw - var(--gutter) - 50px)}
.tour .big{font-size:clamp(2.8rem,5vw,5rem);font-weight:800;line-height:1;letter-spacing:-.04em;color:var(--acc);transition:color .6s}
.tour .lbl{font-weight:800;margin-top:8px}
.tour .inf p{margin-top:16px;color:#a4a5ab;font-size:.96rem}
.tour .open{display:inline-flex;margin-top:18px;font-weight:800;color:var(--acc);transition:color .6s}
.tour .swap{transition:opacity .4s,transform .4s}.tour .swap.out{opacity:0;transform:translateY(18px)}
.tour .rail{position:absolute;right:var(--gutter);top:50%;translate:0 -50%;z-index:5;display:flex;flex-direction:column;align-items:center;gap:12px}
.tour .rail b{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.68rem;letter-spacing:.3em;font-weight:800;color:#a4a5ab}
.tour .rail i{display:block;width:2px;height:20px;border-radius:2px;background:#fff;opacity:.2;transition:opacity .3s,height .3s,background .6s}
.tour .rail i.on{opacity:1;height:46px;background:var(--acc)}
.tour .glow{position:absolute;width:60vw;height:60vw;border-radius:50%;filter:blur(60px);opacity:.35;background:radial-gradient(closest-side,var(--acc),transparent 70%);transition:background .8s;pointer-events:none;z-index:1}
.tour .fan{position:absolute;inset:0;z-index:6;display:grid;place-items:center;pointer-events:none}
.tour .fan-card{position:absolute;width:min(300px,23vw);aspect-ratio:16/10;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8);opacity:0;will-change:transform,opacity}
.tour .fan-card img{width:100%;height:100%;object-fit:cover;object-position:top}
.tour .fan-text{position:relative;z-index:2;text-align:center;opacity:0}
.tour .fan-h{font-size:clamp(3rem,8vw,7.5rem);line-height:.95;letter-spacing:-.04em;font-weight:800}
.tour .fan-h span{background:linear-gradient(135deg,#ff4b2b,#ff8a3d 40%,#7c5cff);-webkit-background-clip:text;background-clip:text;color:transparent}
.tour .fan-text p{margin-top:16px;color:#cfcfd3;font-weight:700}
@media(max-width:1100px){
  .tour .devices{width:min(600px,68vw)}
  .tour .ttl{left:0;right:0;top:auto;bottom:calc(50% + 25vw);translate:none;width:auto;text-align:center}
  .tour .tname{min-height:0}
  .tour .cat{display:none}
  .tour .inf{left:0;right:0;top:calc(50% + 27vw);translate:none;width:auto;text-align:center;display:flex;gap:14px;justify-content:center;align-items:baseline}
  .tour .inf p,.tour .open{display:none}.tour .lbl{margin:0}
  .tour .rail{display:none}
}
@media(max-width:600px){
  .tour .devices{width:78vw}.tour .phone{width:30%;right:-6%}
  .tour .ttl{bottom:calc(50% + 34vw)}.tour .tname{font-size:2.2rem}
  .tour .inf{top:calc(50% + 36vw)}.tour .big{font-size:2.2rem}
  .tour .fan-card{width:44vw}
}