/* about page */
/* ============ ABOUT ============ */
.a-hero{padding:calc(160px + env(safe-area-inset-top,0px)) 0 100px;position:relative;overflow:hidden}
.a-hero::before{content:"";position:absolute;right:-12vw;top:-10vw;width:55vw;height:55vw;border-radius:50%;background:conic-gradient(from 90deg,var(--blue),var(--green),var(--magenta),var(--violet),var(--blue));filter:blur(110px);opacity:.16;animation:spin 30s linear infinite;pointer-events:none}
.a-hero .kicker{color:var(--muted);margin-bottom:26px;opacity:0;transition:opacity .8s}
.a-hero h1{font-size:clamp(2.5rem,6vw,5.6rem);font-weight:700;letter-spacing:-.045em;line-height:1.02;position:relative}
.a-hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
.a-hero h1 .ln span{display:inline-block;transform:translateY(105%);transition:transform 1s var(--ease)}
.a-hero h1 .ln:nth-child(2) span{transition-delay:.1s}
.a-hero .lede{margin-top:30px;max-width:56ch;opacity:0;transform:translateY(12px);transition:opacity .8s .4s,transform .8s .4s var(--ease);position:relative}
.loaded .a-hero .kicker,.loaded .a-hero .lede{opacity:1;transform:none}
.loaded .a-hero h1 .ln span{transform:none}
.facts{display:grid;grid-template-columns:repeat(4,1fr);margin-top:80px;border-top:1px solid var(--line);position:relative}
.fact{padding:26px 20px 0 0;opacity:0;transform:translateY(14px);transition:opacity .8s,transform .8s var(--ease)}
.fact + .fact{padding-left:20px;border-left:1px solid var(--line)}
.loaded .fact{opacity:1;transform:none}
.fact strong{display:block;font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:-.04em;line-height:1.1}
.fact span{color:var(--muted);font-size:.92rem}

/* horizontal story */
.story{position:relative;height:var(--story-h,500vh)}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.story-head{position:absolute;top:calc(100px + env(safe-area-inset-top,0px));left:0;right:0}
.story-head .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px}
.story-head h2{font-size:clamp(1.4rem,2.4vw,2rem)}
.story-bar{width:180px;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.story-bar i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--blue),var(--green),var(--magenta),var(--violet))}
.track-h{display:flex;gap:4vw;padding-left:max(24px,calc((100vw - var(--wrap))/2));will-change:transform}
.panel{flex:none;width:min(560px,78vw);padding-top:60px}
.panel-year{font-family:var(--display);font-weight:700;font-size:clamp(4rem,11vw,9rem);letter-spacing:-.06em;line-height:.9;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 40%,var(--paper)));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel h3{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.8rem);font-weight:500;letter-spacing:-.02em;margin:26px 0 14px}
.panel p{color:var(--muted);max-width:44ch}
.panel .chip{display:inline-block;margin:18px 8px 0 0}
.panel .chip:lang(ja){font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif}

/* model */
.sec{padding:130px 0}
.sec-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:end;margin-bottom:60px}
.model{display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:m}
.mo{position:relative;padding:34px 26px 0 0}
.mo::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--c);transform:scaleX(0);transform-origin:left;transition:transform 1s var(--ease)}
.mo.in::before{transform:scaleX(1)}
.mo:nth-child(2)::before{transition-delay:.15s}.mo:nth-child(3)::before{transition-delay:.3s}.mo:nth-child(4)::before{transition-delay:.45s}
.mo + .mo{padding-left:26px}
.mo h3{font-family:var(--display);font-size:1.5rem;font-weight:500;letter-spacing:-.03em;margin-bottom:12px}
.mo p{color:var(--muted);font-size:.96rem}

/* team */
.team{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.member{position:relative}
.member.lead{grid-column:span 2}
.avatar{position:relative;aspect-ratio:4/5;border-radius:22px;overflow:hidden;background:var(--ink-2);border:1px solid var(--line)}
.member.lead .avatar{aspect-ratio:8.13/5}
.avatar::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 50% 110%,var(--c),transparent 60%);opacity:.45;transition:opacity .5s,transform .8s var(--ease)}
.avatar::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(238,240,246,.14) 1px,transparent 1.4px);background-size:14px 14px;-webkit-mask-image:linear-gradient(to top,#000,transparent 75%);mask-image:linear-gradient(to top,#000,transparent 75%)}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:transform .8s var(--ease)}
.initials{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:clamp(2.4rem,5vw,4rem);letter-spacing:-.04em;color:rgba(238,240,246,.9);z-index:1;transition:transform .8s var(--ease)}
.member.lead .initials{font-size:clamp(3rem,6vw,5.5rem)}
.member:hover .avatar::before{opacity:.75;transform:scale(1.1)}
.member:hover .initials,.member:hover .avatar img{transform:scale(1.06) translateY(-4px)}
.member h3{margin-top:16px;font-size:1.05rem}
.member p{color:var(--muted);font-size:.9rem;margin-top:4px}
.member.lead h3{font-size:1.4rem}

/* culture */
.values{border-top:1px solid var(--line)}
.val{display:grid;grid-template-columns:1fr 1.3fr;gap:40px;padding:30px 0;border-bottom:1px solid var(--line);align-items:baseline}
.val h3{font-family:var(--display);font-size:clamp(1.4rem,2.8vw,2.3rem);font-weight:500;letter-spacing:-.03em;transition:color .4s,transform .6s var(--ease)}
.val:hover h3{color:var(--c);transform:translateX(10px)}
.val p{color:var(--muted)}

@media (max-width:1020px){
  .sec-top{grid-template-columns:1fr;gap:24px}
  .facts{grid-template-columns:1fr 1fr;row-gap:30px}
  .fact:nth-child(3){padding-left:0;border-left:0}
  .model{grid-template-columns:1fr 1fr;row-gap:40px}
  .mo:nth-child(3){padding-left:0}
  .team{grid-template-columns:repeat(3,1fr)}
  .member.lead{grid-column:span 3}
  .member.lead .avatar{aspect-ratio:16/9}
}
@media (max-width:760px){
  .story{height:auto !important}
  .story-pin{position:static;height:auto;display:block;padding:100px 0 40px}
  .story-head{position:static;margin-bottom:10px}
  .story-bar{display:none}
  .track-h{flex-direction:column;gap:70px;padding:0 24px;transform:none !important}
  .panel{width:auto}
}
@media (max-width:640px){
  .sec{padding:90px 0}
  .model{grid-template-columns:1fr}
  .mo,.mo + .mo{padding:30px 0 0}
  .team{grid-template-columns:1fr 1fr}
  .member.lead{grid-column:span 2}
  .member.lead .avatar{aspect-ratio:4/3}
  .val{grid-template-columns:1fr;gap:8px}
}