/* v161: latest supplied WooGi Illustrator wordmark, FILM title warp, ABOUT axis. */
.opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"] {
  top: 0;
  width: 170px;
  height: auto;
  aspect-ratio: 859 / 271;
}
.opening-logo-stack .opening-logo-layer[data-logo-part="design"] { display: none; }
.opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"] { filter: invert(1); }
.is-psd-story .psd-brand-mark { object-fit: contain; object-position: left center; filter: invert(1) !important; }

/* The original portrait/text centers are both x=936 on the board. The
   portrait's later viewport shift must be shared by its captions. */
.s03-archive,.s03-closing { translate: 1.25vw 0; }
.s03-closing { left: 813.5px; }
@media (max-width:700px) {
  .opening-logo-stack .opening-logo-layer[data-logo-part="bae-woogi"] {
    top: 24%; width: 63%; height: auto; aspect-ratio: 859 / 271;
  }
  .s03-archive,.s03-closing { translate: 6vw 0; }
  /* In the mobile flow the title used to be position:static, which made the
     absolute WebGL canvas anchor to the card and jump up/left. */
  .is-psd-story .psd-ko-title { position: relative; left: auto; top: auto; }
}

.is-psd-story .psd-ko-title { color: #fff; opacity: 1; }
.is-psd-story .psd-ko-title .psd-title-selection { color: #fff; }
.is-psd-story .psd-ko-title { pointer-events: auto; }
.is-psd-story .psd-ko-title .film-warp-canvas {
  position: absolute; display: block; pointer-events: none; z-index: 1;
  opacity: 0; filter: invert(1) !important; transition: opacity .18s ease;
}
.is-psd-story .psd-ko-title > span { transition: opacity .18s ease; }
.is-psd-story .psd-ko-title.is-film-warp-active .film-warp-canvas { opacity: 1; }
.is-psd-story .psd-ko-title.is-film-warp-active > span { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .is-psd-story .psd-ko-title .film-warp-canvas { display: none; }
  .is-psd-story .psd-ko-title > span { transition: none; }
}

/* The idle services headline borrows the FILM/ABOUT shader; the transform
   selection sequence always takes ownership before the heading exits. */
.svc-psd-heading h2[data-type-title] { position: relative; }
.svc-psd-heading .service-warp-canvas {
  position: absolute; display: block; z-index: 1; pointer-events: none;
  opacity: 0; filter: invert(1); transition: opacity .12s ease;
}
.svc-psd-heading h2.is-service-warp-active .service-warp-canvas { opacity: .7; }
.svc-psd-heading h2.is-service-warp-active > span:not(.svc-title-selection) { opacity: 0; }
.s03-preview-wipe.is-pixel-cover { background: transparent !important; opacity: 1 !important; clip-path: none; }
.s03-preview-wipe.is-pixel-cover .s03-preview-band,
.s03-preview-wipe.is-pixel-cover .s03-preview-copy { display: none !important; }
.s03-preview-wipe .s03-preview-pixels {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  display: block; pointer-events: none; image-rendering: pixelated;
}
.s03-preview-wipe.is-pixel-cover .s03-preview-about {
  z-index: 1; background: transparent; clip-path: none; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .svc-psd-heading .service-warp-canvas { display: none; }
}