/* Apple的ピン留めシーン：中央のロゴが回転する幾何リングとともにスケール、斜めパネルが横断 */
.pin-scene{position:relative;height:230vh;}
.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-panel .pp-label{writing-mode:vertical-rl;font-family:var(--mono);letter-spacing:.34em;
  text-transform:uppercase;color:rgba(255,255,255,.9);font-size:.8rem;}

/* 中央：ロゴ＋回転する幾何リング */
.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;left:8%;bottom:12%;z-index:4;margin:0;opacity:0;
  font-family:var(--serif-jp);font-size:clamp(1.05rem,2.6vw,1.6rem);line-height:1.9;
  color:var(--ink-2);letter-spacing:.05em;will-change:transform,opacity;}

@media(max-width:760px){.pin-scene{height:230vh;}.pin-center{width:min(280px,72vw);}}
@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;opacity:1;margin:1.4rem auto 0;text-align:left;max-width:46ch;}
}