.op-part { position: relative; }
.op-part img { display: block; max-width: 100%; }
.op-part__socials { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Reusable authored variants. Templates own the final scene geometry. */
[data-part-variant="family-poster"] { isolation: isolate; }
[data-part-variant="open-constellation"] .op-part__sequence { display: grid; }
[data-part-variant="white-wall-single"] .op-part__sequence > :not(:first-child) { display: none; }
[data-part-variant="contact-river"] .op-part__sequence { overflow: hidden; }
[data-part-variant="statement-fold"] { display: grid; }
[data-part-variant="milestone-field"] ul { list-style: none; margin: 0; padding: 0; }
[data-part-variant="session-ledger"] dl,
[data-part-variant="marginal-rail"] ol { margin: 0; padding: 0; }
[data-part-variant="profile-colophon"] .op-part__socials { align-items: end; }
[data-part-variant="margin-closing"] { overflow: clip; }

[data-effect-anchor="photo"] { position: relative; isolation: isolate; }
[data-effect-anchor="photo"] > picture,
[data-effect-anchor="photo"] > .op-part__media { position: relative; z-index: 0; }
.op-webgl-canvas { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.46; mix-blend-mode: screen; }

.op-motion-unit { display: inline-block; white-space: pre; }
.op-motion-mask { display: block; overflow: clip; }
[data-motion-resolved-unit="phrase"] .op-motion-mask { display: inline-block; margin-inline-end: .22em; }
[data-motion-resolved-unit="tracking"] .op-motion-unit { letter-spacing: .16em; }
.op-motion-prepared:not(.op-motion-settled) [data-motion-text] .op-motion-unit { opacity: 0; transform: translateY(0.72em) rotate(1.5deg); }
.op-motion-prepared.op-motion-settled [data-motion-text] .op-motion-unit {
  opacity: 1;
  transform: none;
  transition: opacity 520ms cubic-bezier(0.22, 1, 0.36, 1), transform 760ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: min(calc(var(--motion-index) * 48ms), 720ms);
}
[data-effect-level="cinematic"].op-motion-prepared.op-motion-settled [data-motion-text] .op-motion-unit {
  transition-duration: 680ms, 980ms;
  transition-delay: min(calc(var(--motion-index) * 62ms), 860ms);
}
.op-motion-prepared.op-motion-settled [data-motion-resolved-unit="tracking"] .op-motion-unit {
  letter-spacing: normal;
  transition-property: opacity, transform, letter-spacing;
}
.op-motion-prepared.op-motion-settled [data-motion-text].op-motion-wait:not(.is-motion-settled) .op-motion-unit {
  opacity: 0;
  transform: translateY(0.72em) rotate(1.5deg);
}
.op-motion-prepared.op-motion-settled [data-motion-text].op-motion-wait.is-motion-settled .op-motion-unit {
  opacity: 1;
  transform: none;
}

.op-action {
  position: relative;
  isolation: isolate;
  overflow: clip;
  gap: .8rem;
  transform: translateZ(0);
  transition: color 320ms ease, transform 120ms ease;
}
.op-action::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--op-action-sweep, currentColor);
  transform: translateX(-102%);
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}
.op-action__arrow { display: inline-block; transition: transform 320ms cubic-bezier(.16, 1, .3, 1); }
@media (hover: hover) and (pointer: fine) {
  .op-action:hover::before,
  .op-action:focus-visible::before { transform: translateX(0); }
  .op-action:hover .op-action__arrow,
  .op-action:focus-visible .op-action__arrow { transform: translate(.28rem, -.18rem); }
}
.op-action:active { transform: scale(.985); }

@media (max-width: 760px) {
  .op-part__socials { grid-template-columns: 1fr; }
  .op-motion-prepared.op-motion-settled [data-motion-text] .op-motion-unit { transition-delay: min(calc(var(--motion-index) * 34ms), 460ms); }
}

@media (prefers-reduced-motion: reduce) {
  .op-webgl-canvas { display: none !important; }
  .op-motion-unit { opacity: 1 !important; transform: none !important; transition: none !important; }
  .op-action,
  .op-action::before,
  .op-action__arrow { transition: none !important; }
}

html[data-motion="reduce"] .op-webgl-canvas { display: none !important; }
html[data-motion="reduce"] .op-motion-unit { opacity: 1 !important; transform: none !important; transition: none !important; }
html[data-motion="reduce"] .op-action,
html[data-motion="reduce"] .op-action::before,
html[data-motion="reduce"] .op-action__arrow { transition: none !important; }

@media (forced-colors: active) {
  .op-webgl-canvas { display: none; }
}