.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,
  .op-gsap-title-takeover { display: none; }
}

/* Shared GSAP parts. Content remains readable before this layer initializes. */
[data-motion-section-type] { position: relative; isolation: isolate; }
[data-motion-section-type] .photo-stage,
[data-motion-section-type] .m01-frame,
[data-motion-section-type] figure { position: relative; }

.op-gsap-title-takeover {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.25rem, 4vw, 4rem);
  overflow: clip;
  color: #fff;
  pointer-events: none;
}
.op-gsap-title-takeover__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #000;
}
.op-gsap-title-takeover__photo {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) contrast(1.08);
}
.op-gsap-title-takeover__mark {
  position: absolute;
  z-index: 2;
  width: min(82vw, 72rem);
  height: min(72vh, 46rem);
  overflow: visible;
  color: #fff;
  opacity: .72;
}
.op-gsap-title-takeover__frame,
.op-gsap-title-takeover__horizon {
  fill: none;
  stroke: currentColor;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.op-gsap-title-takeover__frame { stroke-width: .75; }
.op-gsap-title-takeover__horizon { stroke-width: .42; }
.op-gsap-title-takeover__lockup {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  gap: clamp(.8rem, 1.6vw, 1.5rem);
  width: min(90vw, 72rem);
  text-align: center;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .58);
}
.op-gsap-title-takeover__title {
  max-width: 16ch;
  font-family: var(--page-serif, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: clamp(3rem, 8.7vw, 8.5rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.op-gsap-title-takeover__author {
  max-width: 38ch;
  font-size: clamp(.72rem, 1.25vw, 1rem);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.op-gsap-text-mask { display: inline-block; overflow: clip; vertical-align: bottom; }
.op-gsap-title-unit,
.op-gsap-author-unit,
.op-gsap-text-unit,
.op-gsap-vertical-unit { display: inline-block; white-space: pre; }

.op-gsap-vertical-caption {
  position: absolute;
  z-index: 4;
  top: clamp(1rem, 3vw, 2.5rem);
  right: clamp(1rem, 3vw, 2.5rem);
  display: block;
  max-height: 72%;
  margin: 0;
  color: #fff;
  font-family: var(--page-serif, "Yu Mincho", "Hiragino Mincho ProN", serif);
  font-size: clamp(1.1rem, 2.25vw, 2rem);
  line-height: 1.18;
  letter-spacing: .12em;
  writing-mode: vertical-rl;
  text-orientation: upright;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .9);
  pointer-events: none;
}
.op-gsap-vertical-caption .op-gsap-text-mask { display: inline-block; }

.op-gsap-route {
  position: absolute;
  z-index: 3;
  inset: 4%;
  width: 92%;
  height: 92%;
  overflow: visible;
  color: #fff;
  mix-blend-mode: difference;
  opacity: .78;
  pointer-events: none;
}
.op-gsap-route path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: square;
  stroke-linejoin: miter;
}
.op-gsap-route--anime path { stroke-width: 1.7; }
.op-gsap-route--imagineering path { stroke-width: 1.25; }

.op-gsap-active .op-motion-unit { transition: none !important; }
.op-gsap-active [data-motion-section-type] .photo-stage,
.op-gsap-active [data-motion-section-type] .m01-frame,
.op-gsap-active [data-motion-section-type] figure { will-change: transform; }

.op-gsap-static .op-gsap-title-takeover { display: none; }
.op-gsap-static .op-gsap-text-unit,
.op-gsap-static .op-gsap-vertical-unit,
.op-gsap-static .op-motion-unit { opacity: 1 !important; transform: none !important; }

@media (max-width: 760px) {
  .op-gsap-vertical-caption {
    top: 1rem;
    right: 1rem;
    max-height: 62%;
    font-size: clamp(.95rem, 4.8vw, 1.25rem);
    letter-spacing: .08em;
  }
  .op-gsap-route { inset: 7%; width: 86%; height: 86%; opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .op-gsap-title-takeover { display: none !important; }
  .op-gsap-route path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .op-gsap-title-unit,
  .op-gsap-author-unit,
  .op-gsap-text-unit,
  .op-gsap-vertical-unit { opacity: 1 !important; transform: none !important; }
}

html[data-force-reduced-motion="true"] .op-gsap-title-takeover { display: none !important; }
html[data-force-reduced-motion="true"] .op-gsap-route path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }