/* The gallery stays usable as ordinary links before motion is enabled. */
.platform-morph{background:#f2edff;margin-bottom:56px}
.morph-stage{max-width:1600px;margin-inline:auto;padding:64px 40px}
.morph-copy{text-align:center;max-width:680px;margin:0 auto 24px}
.morph-copy h2{font-size:clamp(32px,3.3vw,48px);line-height:1.08}
.morph-copy h2 span{color:#675290}
.morph-copy p{margin:20px auto 0;font-size:18px;color:#55496c}
.morph-skip{display:flex;width:fit-content;align-items:center;gap:12px;font-size:14px;margin:0 auto 36px;text-decoration:none;border-bottom:1px solid #8e7cac;padding:5px 0}
.morph-skip span{display:none}
.morph-skip::after{content:'';width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-4px}
.morph-gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1120px;margin:auto}
.morph-card{display:block;min-width:0;padding:9px 9px 0;border:1px solid #d6cbe8;border-radius:10px;background:#fff;text-decoration:none;box-shadow:0 8px 22px #3521530a;color:var(--ink)}
.morph-card img{width:100%;height:auto;aspect-ratio:16/10;object-fit:contain;background:#f7f7f7;border-radius:5px}
.morph-card>span{display:flex;justify-content:space-between;align-items:center;padding:10px 3px;font-size:15px;font-weight:600;line-height:1.4}
.morph-card>span::after{content:'';width:16px;height:16px;flex-shrink:0;background:center/16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E")}
.morph-card:hover,.morph-card:focus-visible{border-color:#675290;box-shadow:0 12px 28px #35215320}
@media(min-width:1100px) and (min-height:720px) and (prefers-reduced-motion:no-preference){
  .platform-morph.is-morphing{height:calc(min(760px,100svh - 80px) + 1400px);position:relative;z-index:1}
  .is-morphing .morph-stage{height:min(760px,100svh - 80px);position:sticky;top:80px;padding:0;overflow:visible}
  .is-morphing .morph-copy{position:absolute;left:50%;top:0;width:min(680px,calc(100% - 480px));margin:0;z-index:2;will-change:transform}
  .is-morphing .morph-copy h2{font-size:40px;animation:none;opacity:1;transform:none}
  .is-morphing .morph-copy p{font-size:18px;max-width:none;margin-top:16px}
  .is-morphing .morph-skip{position:absolute;top:20px;right:28px;z-index:5;margin:0;background:#f2edff}
  .is-morphing .morph-gallery{position:absolute;inset:0;display:block;max-width:none}
  .is-morphing .morph-card{position:absolute;top:0;left:0;width:clamp(165px,15vw,220px);will-change:transform;transform-origin:center}
  .is-morphing .morph-card:focus-visible{z-index:5}
}
@media(max-width:760px){
  .platform-morph{margin-bottom:32px}
  .morph-stage{padding:48px 0}
  .morph-copy{padding:0 24px;margin-bottom:30px}
  .morph-copy p{font-size:17px;max-width:30ch}
  .morph-gallery{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:6px 24px 24px;scroll-padding-inline:24px}
  .morph-card{flex:0 0 min(76vw,320px);scroll-snap-align:start}
}