/* The relight and portrait share the same pivot and photograph coordinates. */
@media (min-width: 761px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) and (forced-colors: none) {
  html:not(.motion-paused)[data-tail-minimal] #studio#studio#studio#studio[data-portrait-relight] .tail-portrait-picture img,
  #studio .wl-portrait-reflection {
    transform: scale(var(--wl-portrait-scale, 1)) !important;
    transform-origin: var(--wl-portrait-pivot, 0px) 73%;
  }

  html[data-tail-minimal] #studio#studio#studio#studio[data-portrait-relight] .tail-portrait-picture img {
    transition: none;
  }

  html[data-tail-minimal] #studio#studio#studio#studio[data-portrait-relight] .tail-about-name {
    translate: var(--wl-portrait-name-shift, 0px) 0;
  }

  #studio .wl-portrait-reflection {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    aspect-ratio: 600 / 560;
    pointer-events: none;
    mask: url("/assets/tail/studio-volume.svg") center / 100% 100% no-repeat;
    opacity: 0;
    transition: opacity 280ms ease-out;
  }

  #studio[data-portrait-lit] .wl-portrait-reflection { opacity: 1; }

  /* The key lifts the shaded cheek and grazes the shirt without neutralizing skin colour. */
  #studio .wl-portrait-key {
    mix-blend-mode: soft-light;
    background:
      radial-gradient(ellipse 22% 20% at var(--wl-portrait-x) var(--wl-portrait-y),
        rgb(249 220 196 / .66), rgb(249 228 207 / .30) 48%, transparent 100%),
      radial-gradient(ellipse 54% 44% at var(--wl-portrait-x) var(--wl-portrait-y),
        rgb(252 239 220 / .24), transparent 100%);
  }

  #studio .wl-portrait-key::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(ellipse 11% 22% at 55% 27%, rgb(233 172 131 / .52), transparent 100%),
      radial-gradient(ellipse 10% 12% at 49% 43%, rgb(214 151 111 / .26), transparent 100%);
    mask-image: radial-gradient(ellipse 47% 39% at var(--wl-portrait-x) var(--wl-portrait-y),
      #000 22%, transparent 100%);
  }

  #studio .wl-portrait-fill {
    mix-blend-mode: screen;
    background: radial-gradient(ellipse 37% 36% at var(--wl-portrait-x) var(--wl-portrait-y),
      rgb(74 76 67 / .46), rgb(53 54 47 / .23) 55%, transparent 100%);
    mask-image: url("/assets/tail/studio-volume.svg"), linear-gradient(transparent 34%, #000 66%);
    mask-size: 100% 100%;
    mask-composite: intersect;
  }

  #studio .wl-portrait-rim {
    mix-blend-mode: overlay;
    mask: url("/assets/tail/studio-rim-20261109.svg") center / 100% 100% no-repeat;
    background: radial-gradient(ellipse 30% 27% at var(--wl-portrait-x) var(--wl-portrait-y),
      rgb(254 244 230 / .75), rgb(250 231 208 / .34) 46%, transparent 100%);
  }

  #studio .wl-portrait-shadow {
    mix-blend-mode: soft-light;
    background: radial-gradient(ellipse 39% 37% at
      calc(80% - var(--wl-portrait-x) * .62) calc(16% + var(--wl-portrait-y) * .76),
      rgb(9 10 9 / .53), rgb(17 18 15 / .19) 49%, transparent 100%);
    mask-image: url("/assets/tail/studio-volume.svg"), linear-gradient(transparent 37%, #000 70%);
    mask-size: 100% 100%;
    mask-composite: intersect;
  }

  html[data-wl-daylight] #studio[data-wl-light-zone="portrait"] > .wl-light-halo {
    mix-blend-mode: soft-light;
    background:
      radial-gradient(ellipse 52% 46% at 55% 44%, rgb(249 228 207 / .19), transparent 100%),
      radial-gradient(ellipse 45% 39% at 41% 62%, rgb(23 24 19 / .13), transparent 100%);
  }

  #studio[data-portrait-relight] #studio-title { position: relative; }

  #studio[data-portrait-relight] #studio-title::after {
    content: attr(data-wl-studio-label) / "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    filter: url("/assets/tail/studio-volume.svg#ink-relief");
    mask-image: radial-gradient(ellipse 120px 56px at var(--wl-title-x) var(--wl-title-y),
      #000 8%, rgb(0 0 0 / .85) 36%, transparent 100%);
    opacity: 0;
    transition: opacity 210ms ease-out;
  }

  #studio[data-portrait-lit] #studio-title::after { opacity: 1; }
}

html[data-wl-daylight-sleep] #studio .wl-portrait-reflection,
html[data-wl-daylight-sleep] #studio #studio-title::after {
  opacity: 0 !important;
  transition: none;
}