:is(#social,#websites) { --social-progress:1; --plan:0; --create:0; --connect:1; scroll-margin-top:88px; }
.social-story { min-width:0; margin:0; }
.social-stage { position:relative; }
.social-story-art { position:relative; aspect-ratio:1; isolation:isolate; }
.social-story-art img { position:relative; display:block; width:100%; height:100%; object-fit:contain; mask-image:radial-gradient(ellipse at center,#000 48%,transparent 74%); }
.social-depth-word { position:absolute; inset:0; z-index:-1; overflow:hidden; }
.social-depth-word span { position:absolute; top:3%; left:0; font-size:64px; font-weight:800; line-height:1; letter-spacing:0; color:#fff; opacity:0; }
.social-note { position:absolute; z-index:2; font-size:14px; font-weight:700; letter-spacing:0; padding:12px 16px; color:#111; box-shadow:0 12px 24px #0004; opacity:0; }
.social-note-plan { left:0; top:29%; background:#f5d957; transform:rotate(-5deg); }
.social-note-create { right:0; top:57%; background:#a8e3d6; transform:rotate(4deg); }
.social-note-connect { right:0; bottom:7%; background:#f3978c; opacity:1; transform:rotate(-3deg); }
.social-story-sequence { position:relative; display:flex; justify-content:space-between; gap:12px; padding:24px 0 18px; border-bottom:1px solid #454545; }
.social-story-sequence::after { content:""; position:absolute; bottom:-1px; left:0; width:100%; height:2px; background:#a8e3d6; transform-origin:left; transform:scaleX(var(--social-progress)); }
.social-story-sequence span { font-size:20px; font-weight:600; letter-spacing:0; }
@media(min-width:1000px) and (min-height:800px) and (prefers-reduced-motion:no-preference) {
  :is(#social,#websites).social-animated > div { min-height:calc(100vh + 1000px); }
  .social-animated .social-stage { position:sticky; top:100px; min-height:calc(100vh - 140px); }
  .social-animated .social-story-art img { transform:translateY(calc(28px - var(--social-progress) * 50px)) scale(calc(.89 + var(--social-progress) * .11)) rotate(calc(-3deg + var(--social-progress) * 3deg)); }
  .social-animated .social-depth-word span { transform:translateX(calc(48px - var(--social-progress) * 48px)); }
  .social-animated .social-depth-word span:nth-child(1) { opacity:var(--plan); }
  .social-animated .social-depth-word span:nth-child(2) { opacity:var(--create); }
  .social-animated .social-depth-word span:nth-child(3) { opacity:var(--connect); }
  .social-animated .social-note-plan { opacity:var(--plan); transform:translateY(calc(35px - var(--social-progress) * 95px)) rotate(-5deg); }
  .social-animated .social-note-create { opacity:var(--create); transform:translateY(calc(70px - var(--social-progress) * 110px)) rotate(4deg); }
  .social-animated .social-note-connect { opacity:var(--connect); transform:translateY(calc(85px - var(--social-progress) * 85px)) rotate(-3deg); }
  .social-animated .social-story-sequence span:nth-child(1) { color:rgb(245 217 87 / calc(.35 + var(--plan) * .65)); }
  .social-animated .social-story-sequence span:nth-child(2) { color:rgb(168 227 214 / calc(.35 + var(--create) * .65)); }
  .social-animated .social-story-sequence span:nth-child(3) { color:rgb(243 151 140 / calc(.35 + var(--connect) * .65)); }
}
@media(max-width:640px) { .social-story-sequence { padding-right:64px; } .social-story-sequence span { font-size:18px; } .social-note { font-size:12px; padding:10px 12px; } }