/* Apple的ピン留めシーン：中央のロゴが回転する幾何リングとともにスケール、斜めパネルが横断 */
.pin-scene{position:relative;height:200vh;}
.pin-stage{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;place-items:center;}

.pin-panel{position:absolute;top:0;right:0;width:64%;height:100%;z-index:1;
  background:linear-gradient(150deg,var(--teal-500),var(--teal-900));
  clip-path:polygon(22% 0,100% 0,100% 100%,0 100%);
  display:flex;align-items:center;justify-content:flex-end;padding-right:6%;
  transform:translateX(120%);will-change:transform;}

/* 中央：ロゴ＋回転する幾何リング */
.pin-center{position:relative;z-index:2;width:min(360px,64vw);aspect-ratio:1/1;
  display:grid;place-items:center;will-change:transform,opacity;}
.pin-logo{position:relative;z-index:3;width:52%;height:auto;display:block;
  filter:drop-shadow(0 16px 28px rgba(39,86,90,.32));}
.pin-ring{position:absolute;border-radius:50%;}
.pin-ring-1{inset:0;border:1px dashed rgba(143,196,200,.55);animation:geoSpin 38s linear infinite;}
.pin-ring-2{inset:13%;border:1px solid rgba(91,157,162,.4);animation:geoSpin 26s linear infinite reverse;}
.pin-ticks{position:absolute;inset:-13%;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,rgba(91,157,162,.5) 0 .4deg,transparent .4deg 6deg);
  -webkit-mask:radial-gradient(circle,transparent 57%,#000 58% 61%,transparent 62%);
          mask:radial-gradient(circle,transparent 57%,#000 58% 61%,transparent 62%);
  animation:geoSpin 64s linear infinite;}

/* サブ文：右の緑パネルに白文字。各行を個別に登場 */
.pin-sub{position:absolute;right:6%;bottom:13%;z-index:4;margin:0;text-align:right;
  font-family:var(--serif-jp);font-size:clamp(1.05rem,2.6vw,1.6rem);line-height:1.9;
  color:#fff;letter-spacing:.06em;}
.pin-line{display:block;opacity:0;will-change:transform,opacity;}

@media(max-width:760px){
  .pin-scene{height:178vh;}
  .pin-center{width:min(280px,72vw);}
  /* サブ文をティール領域に収める：緑を少し広げ＋文字を小さく＋内側へ */
  .pin-panel{width:72%;}
  .pin-sub{font-size:.95rem;right:6%;bottom:15%;line-height:1.85;letter-spacing:.03em;}
}
@media(prefers-reduced-motion:reduce){
  .pin-scene{height:auto;}
  .pin-stage{position:static;height:auto;display:block;padding-block:clamp(56px,9vw,116px);text-align:center;}
  .pin-panel{display:none;}
  .pin-center{margin:0 auto;}
  .pin-ring,.pin-ticks{animation:none;}
  .pin-sub{position:static;margin:1.4rem auto 0;text-align:center;max-width:46ch;color:var(--ink-2);}
  .pin-line{opacity:1;}
}