/* ═══════════════════════════════════════════════════════════════════════
   Webgold — homepage icon continuation (see js/wg-iris-continuation.js)
   The box sits at the top of #circleContainIn, before #contPinText in
   the DOM, so the iris paints over it. Absolute: no effect on layout.
   ═══════════════════════════════════════════════════════════════════════ */

#circleContainIn > .wg-iris-cont{
  position: absolute;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: url(#wg-iris-cont-clip);
  contain: layout paint;
  /* Own compositor layer: the iris text's endless gradient animation and
     the iris clip repaint #circleContainIn every frame; without this the
     clipped image was re-rasterised with them (measured: ~2x the long-
     frame time of this layer-promoted version). */
  will-change: transform;
}

#circleContainIn > .wg-iris-cont__svg{
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}

.wg-iris-cont__tile{
  position: absolute;
  left: 0;
  overflow: hidden;
  /* Mirror at the join: the tile's bottom edge sits on the join and its
     content folds down, so the first row below matches the row above. */
  transform: scaleY(-1);
  transform-origin: 50% 100%;
}

/* Clone of the panel image at the same cover scale, cropped by the script
   (inline size + object-position) to the rows the mirror can show. */
.wg-iris-cont__tile > img{
  position: absolute;
  will-change: transform;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  display: block;
}

/* Parallax, off the main thread: the root scroll timeline over the px
   range of pe-core's own trigger (custom properties set by the script,
   which only adds the class when the browser supports this). */
@supports (animation-timeline: scroll(root block)){
  @media (prefers-reduced-motion: no-preference){
    #circleContainIn > .wg-iris-cont--sda .wg-iris-cont__tile > img{
      animation: wg-iris-par linear both;
      animation-timeline: scroll(root block);
      animation-range: var(--wg-par-r0, 0px) var(--wg-par-r1, 1px);
    }
  }
}
@keyframes wg-iris-par{
  from{ transform: translate3d(0, var(--wg-par-a, 0px), 0) scale(var(--wg-par-s, 1)); }
  to  { transform: translate3d(0, var(--wg-par-b, 0px), 0) scale(var(--wg-par-s, 1)); }
}