/* ── About Sama: obsidianassembly.com's "Formed by People…" (.c-people), in the
   crimson. Every box measured on their page at 1920 (the section 1905 wide) and
   set in container units of the section, so it scales as theirs does with the
   window: 1cqw = 19.05 px there; each number is their px / 19.05.
     ground   their black -> crimson, their marble wall behind everything
              (stone-wall.webp re-inked crimson / rose: img/obs/stone-red.webp),
              tiled at half width under their soft round fade, drifting with the
              scroll (js/rk.js)
     star     their four-point star, half of it, hanging from the top edge in
              the colour of the section above
     title    three lines, the 2nd 1em in, the 3rd 2.5em in (their yellow -> cream)
     stone    the huge word behind ("People" -> "Sama"), a shade off the ground
     windows  three hairline outlines (a stadium, two half-stadiums)
     arch     a gradient frame, round top, two notched feet; inside a square with
              a round top: their sand wall (re-inked cream / rose) and the figure
              in front of it (their silhouette -> Sama, cut from her own photo)
     motion   crossing the screen the arch shrinks to .8 from a point below it
              while the wall and figure inside grow to 1.5 (js/rk.js, --progress);
              the caption and the ending come up line by line */
.op {
  --ob-bg: #a00034; --ob-ink: #fff0c0; --ob-stone: #b30a42; --ob-frame-a: #7a0026; --ob-frame-b: #c4245a;
  container-type: inline-size; position: relative; overflow: hidden;
  background: var(--ob-bg); color: var(--ob-ink); padding-bottom: 12.6cqw;                     /* section 1985 */
}
.op::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; margin: 0 auto; z-index: 3; width: 6vw; height: 3vw; background: var(--ivory);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0c0,27.6,22.4,50,50,50-27.6,0-50,22.4-50,50,0-27.6-22.4-50-50-50,27.6,0,50-22.4,50-50Z'/%3E%3C/svg%3E") 50% 100% / 100% auto no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,0c0,27.6,22.4,50,50,50-27.6,0-50,22.4-50,50,0-27.6-22.4-50-50-50,27.6,0,50-22.4,50-50Z'/%3E%3C/svg%3E") 50% 100% / 100% auto no-repeat;
}
.op-w { position: relative; min-height: 91.6cqw; }                                             /* 1745; grows with the copy */
.op-w > * { position: absolute; margin: 0; }

.op-under {
  left: 2.31cqw; right: 2.31cqw; top: -4.88cqw; height: 82.73cqw;                               /* 44, -93, 1576 */
  background: url("../img/obs/stone-red.webp") 0 0 / 50% repeat;
  -webkit-mask: url("../img/obs/mask-fade-20.webp") center / 100% 100% no-repeat;
          mask: url("../img/obs/mask-fade-20.webp") center / 100% 100% no-repeat;
  will-change: transform;
}
.op-title { left: 43.2cqw; top: 4.41cqw; z-index: 2; font: 400 2.2556cqw / 1.1557 var(--f-head); }   /* 823, 84, 42.97 */
.op-title span { display: block; }
.op-title span:nth-child(2) { margin-left: 1em; }
.op-title span:nth-child(3) { margin-left: 2.5em; }

.op-stone {
  left: 0; right: 0; top: 39.74cqw; height: 25.2cqw; text-align: center; white-space: nowrap;   /* 757, 480 */
  color: var(--ob-stone); font: 400 32.25cqw / .78125 var(--f-head); letter-spacing: -.02em;
}
.op-win { top: 12.23cqw; height: 74.91cqw; border: 1px solid rgb(255 240 192 / .22); }        /* 233, 1427 */
.op-l { left: 2.31cqw; width: 14.96cqw; border-radius: 0 55vw 55vw 0; }                        /* 44, 285 */
.op-mid { left: 22.41cqw; width: 55.17cqw; border-radius: 55vw; }                              /* 427, 1051 */
.op-r { left: 82.78cqw; width: 14.96cqw; border-radius: 55vw 0 0 55vw; }                       /* 1577 */

.op-arch {
  --g: 1.155cqw;                                                                                 /* their gap, 22 */
  left: 26.46cqw; top: 16.64cqw; width: 47.14cqw; z-index: 1;                                   /* 504, 317, 898 */
  padding: calc(var(--g) * 2) var(--g) var(--g);
  background-image: linear-gradient(-45deg, var(--ob-frame-a), var(--ob-frame-b));
  border-radius: 50% 50% 0 0 / 50% 50% 0 0;
  clip-path: polygon(-1% -1%, 101% -1%, 101% 101%, calc(100% - var(--g)) calc(100% - var(--g)), var(--g) calc(100% - var(--g)), -1% 101%);
  scale: calc(1 - var(--progress, 0) * .2); transform-origin: 50% 150%; will-change: scale;
}
.op-arch-inner { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1; width: 100%; overflow: hidden; border-radius: 50% 50% 0 0; }
.op-arch-inner::before, .op-arch-inner figure { grid-area: 1 / 1; width: 100%; scale: calc(1 + var(--progress, 0) * .5); backface-visibility: hidden; will-change: scale; }
.op-arch-inner::before { content: ""; height: 100%; background: url("../img/obs/wall-cream.webp") center / cover no-repeat; }
.op-arch-inner figure { align-self: end; margin: 0; padding: 14% 6% 0; }
.op-arch-inner img { display: block; width: 100%; height: auto; }

/* the caption, then the ending under it: in the flow, so a longer caption pushes the
   ending down instead of running into it (theirs is two lines; ours can be three or four) */
.op-w > .op-copy { position: relative; z-index: 2; margin: 0 0 0 26.46cqw; padding-top: 77.48cqw; width: 47.14cqw; }   /* 504, 1476, 898 */
.op-caption { margin: 0; text-align: center; font: 400 2.2556cqw / 1.1557 var(--f-head); }
.op-ending { margin: 4.4cqw 0 0 24.14cqw; width: 14.96cqw; font: 400 1.1549cqw / 1.3 var(--f-body); text-transform: uppercase; }   /* 964, 285 */

.op-path-a, .op-path-b { position: absolute; left: 0; right: 0; width: 100%; pointer-events: none; z-index: 1; }
.op-path-a { top: 2.83cqw; aspect-ratio: 1440 / 500; }
.op-path-b { bottom: 0; aspect-ratio: 1440 / 800; }

/* their line reveal for the caption and the ending (split by js/rk.js) */
.op .ob-line { display: block; clip-path: inset(0 0 100% 0); translate: 0 3em; }
.op .ob-in .ob-line { clip-path: inset(-10% 0 -10% 0); translate: 0 0; transition: translate 1.5s cubic-bezier(.35, .35, 0, 1), clip-path 1.5s cubic-bezier(.35, .35, 0, 1); transition-delay: calc(var(--i) * 75ms); }
.op .ob-out .ob-line { translate: 0 6em; transition: none; }

/* phones: their 6-column layout, the arch nearly full width */
@media (max-width: 767px) {
  .op::before { width: 24vw; height: 12vw; }
  .op-w { height: auto; padding: 20cqw 4cqw 10cqw; display: flex; flex-direction: column; align-items: center; }
  .op-w > * { position: relative; left: auto; top: auto; }
  .op-under { position: absolute; inset: 0; height: auto; }
  .op-title { font-size: 7cqw; align-self: center; margin-right: 20cqw; }
  .op-stone { position: absolute; top: 70cqw; font-size: 44cqw; }
  .op-win { display: none; }
  .op-arch { width: 88cqw; margin-top: 10cqw; --g: 3cqw; }
  .op-w > .op-copy { margin: 12cqw 0 0; padding: 0; width: 90cqw; }
  .op-caption { font-size: 6cqw; }
  .op-ending { width: 60cqw; margin: 8cqw 0 0 auto; font-size: 3.4cqw; }
  .op { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { .op .ob-line { clip-path: none; translate: none; } .op-arch, .op-arch-inner::before, .op-arch-inner figure { scale: none; } }