/* Wonderla_b daylight fields. Canonical HEDJ / KEM surfaces, behind the shell.
   Each field paints a moving light/shadow texture and one cursor halo.
   The existing menu seam, project media, typography and grid remain independent. */
html[data-wl-daylight] {
  --wl-daylight-viewport: 100vw;
  --wl-halo-diameter: 560px;
  --wl-light-base: #FCFCF9;
  --wl-light-highlight: rgb(255 255 255 / .9);
  --wl-light-shadow: rgb(227 227 220 / .88);
  --wl-light-halo: rgb(255 255 255 / .98);
  --wl-margin-shadow: rgb(98 99 91 / .16);
  --wl-light-duration: 26s;
  --wl-light-phase: -18s;
  --wl-light-opacity: .75;
  --wl-light-intensity: 1.1;
  --wl-shadow-x: 72%;
  --wl-shadow-y: 64%;
  --wl-shadow-width: 38%;
}

html[data-wl-daylight][data-theme="dark"] {
  --wl-light-base: #11120F;
  --wl-light-highlight: rgb(98 99 91 / .13);
  --wl-light-shadow: rgb(0 0 0 / .2);
  --wl-light-halo: rgb(53 54 47 / .3);
  --wl-margin-shadow: rgb(0 0 0 / .48);
}

html[data-wl-daylight] [data-wl-light-zone] {
  position: relative;
  isolation: isolate;
  background: none !important;
}

/* Match the existing surface declarations without changing their geometry. */
html[data-wl-daylight] :is(
  #intro#intro#intro,
  #work#work#work,
  #projects-inner#projects-inner#projects-inner,
  #services#services#services,
  #method#method#method,
  #contact#contact#contact
)[data-wl-light-zone],
html[data-wl-daylight] #projects-inner details.project > .project-body > .wl-case-intro[data-wl-light-zone] {
  background: none !important;
}

html[data-wl-daylight] [data-wl-light-zone="hero"] {
  --wl-light-base: #FCFCF9;
  --wl-light-phase: -12s;
}
html[data-wl-daylight] [data-wl-light-zone="work"] {
  --wl-light-base: #FCFCF9;
  --wl-light-phase: -34s;
  --wl-light-duration: 31s;
}
html[data-wl-daylight] [data-wl-light-zone="case"] {
  --wl-light-base: #F5F5F0;
  --wl-light-highlight: rgb(254 254 252 / .8);
  --wl-light-shadow: rgb(227 227 220 / .16);
  --wl-light-phase: -26s;
}
html[data-wl-daylight] [data-wl-light-zone="case-footer"] {
  --wl-light-base: #FCFCF9;
  --wl-light-phase: -62s;
  --wl-light-opacity: .6;
}
html[data-wl-daylight] [data-wl-light-zone="services"] {
  --wl-light-base: #F9F9F5;
  --wl-light-phase: -43s;
  --wl-light-duration: 22s;
}
html[data-wl-daylight] [data-wl-light-zone="method"] {
  --wl-light-base: #FEFEFC;
  --wl-light-phase: -70s;
  --wl-light-duration: 19s;
}
html[data-wl-daylight] [data-wl-light-zone="contact"] {
  --wl-light-base: #F1F1EB;
  --wl-light-shadow: rgb(227 227 220 / .92);
  --wl-light-duration: 16s;
  --wl-shadow-x: 22%;
  --wl-shadow-y: 62%;
  --wl-shadow-width: 30%;
  --wl-light-phase: -8s;
}
html[data-wl-daylight] [data-wl-light-zone="footer"] {
  --wl-light-base: #F5F5F0;
  --wl-light-shadow: rgb(227 227 220 / .88);
  --wl-shadow-x: 64%;
  --wl-shadow-y: 108%;
  --wl-shadow-width: 32%;
  --wl-light-intensity: 1.2;
  --wl-light-phase: -46s;
  --wl-light-opacity: .65;
}

html[data-wl-daylight] [data-wl-light-zone="form"] {
  --wl-light-base: #FEFEFC;
  --wl-light-highlight: rgb(255 255 255 / .95);
  --wl-light-shadow: transparent;
  --wl-light-opacity: .9;
  --wl-light-phase: -9s;
}

/* Darkness keeps the same material hierarchy, with a lower light amplitude. */
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone] {
  --wl-light-base: #11120F;
  --wl-light-highlight: rgb(98 99 91 / .13);
  --wl-light-shadow: rgb(0 0 0 / .2);
  --wl-light-halo: rgb(53 54 47 / .3);
}
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="hero"],
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="work"],
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="method"] {
  --wl-light-base: #090A09;
}
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="form"] {
  --wl-light-base: #171813;
  --wl-light-shadow: transparent;
  --wl-light-highlight: rgb(53 54 47 / .2);
}
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="case"],
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="contact"] {
  --wl-light-base: #171813;
}
html[data-wl-daylight] [data-wl-light-zone="portrait"],
html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="portrait"] {
  --wl-light-base: #090A09;
  --wl-light-highlight: rgb(74 76 67 / .17);
  --wl-light-shadow: rgb(0 0 0 / .24);
  --wl-light-halo: rgb(53 54 47 / .17);
  --wl-light-phase: -58s;
}

/* Only the added plane clips. Host overflow remains available to popovers. */
html[data-wl-daylight] [data-wl-light-zone] > .wl-light-plane {
  display: block;
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  pointer-events: none;
  user-select: none;
  border-radius: inherit;
  background-color: var(--wl-light-base);
  opacity: .78;
  /* A cloud of tone, never a card: both axes dissolve well inside the bounds. */
  mask-image:
    linear-gradient(to bottom, transparent, rgb(0 0 0 / .15) 8%, rgb(0 0 0 / .56) 22%, #000 42%, #000 58%, rgb(0 0 0 / .56) 78%, rgb(0 0 0 / .15) 92%, transparent),
    linear-gradient(to right, transparent, rgb(0 0 0 / .18) 5%, rgb(0 0 0 / .6) 13%, #000 28%, #000 72%, rgb(0 0 0 / .6) 87%, rgb(0 0 0 / .18) 95%, transparent);
  mask-composite: intersect;
  /* Theme text changes immediately: the backing surface must change with it. */
}
html[data-wl-daylight] [data-wl-light-bleed] > .wl-light-plane {
  inset-inline: auto;
  left: 50%;
  width: min(var(--wl-daylight-viewport), 100vw);
  max-width: none;
  transform: translateX(-50%);
  mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / .12) 6%, rgb(0 0 0 / .46) 17%, rgb(0 0 0 / .84) 32%, #000 46%, #000 54%, rgb(0 0 0 / .84) 68%, rgb(0 0 0 / .46) 83%, rgb(0 0 0 / .12) 94%, transparent);
}

/* Clear the former shell rectangles underneath the softened fields. */
html[data-wl-daylight] #projects-inner#projects-inner,
html[data-wl-daylight] #projects-inner#projects-inner details.project > .project-body,
html[data-wl-daylight] .wonder-component:has(#intro[data-wl-light-zone]),
html[data-wl-daylight] .wonder-component:has(#services[data-wl-light-zone]),
html[data-wl-daylight] div:has(> footer[data-wl-light-zone="footer"]) {
  background: transparent !important;
  box-shadow: none !important;
}
html[data-wl-daylight] #projects-inner#projects-inner [data-wl-light-zone] {
  box-shadow: none !important;
  border-color: transparent;
}
/* Keep the existing summary::before shadow: it indicates hover/open/focus state. */
html[data-wl-daylight] .wl-light-scroll {
  display: block;
  position: absolute;
  inset: -12px 0;
  pointer-events: none;
}
html[data-wl-daylight] .wl-light-drift {
  display: block;
  position: absolute;
  inset: -12% -16%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 50% 72% at 26% 38%, var(--wl-light-highlight), transparent 76%),
    radial-gradient(ellipse var(--wl-shadow-width) 66% at var(--wl-shadow-x) var(--wl-shadow-y), var(--wl-light-shadow), transparent 82%);
  opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity));
  animation: wl-daylight-drift var(--wl-light-duration) cubic-bezier(.45, 0, .55, 1) infinite alternate;
  animation-delay: var(--wl-light-phase);
  animation-play-state: paused;
}
html[data-wl-daylight] [data-wl-light-active] > .wl-light-plane .wl-light-drift {
  animation-play-state: running;
  will-change: transform, opacity;
}
@keyframes wl-daylight-drift {
  from { transform: translate3d(-9%, -3.5%, 0) scale(1.01); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .65); }
  to { transform: translate3d(9%, 3.5%, 0) scale(1.06); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity)); }
}

html[data-wl-daylight] .wl-light-halo {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: var(--wl-halo-diameter);
  height: var(--wl-halo-diameter);
  pointer-events: none;
  background: radial-gradient(circle at center,
    var(--wl-light-halo) 0%,
    color-mix(in srgb, var(--wl-light-halo) 86%, transparent) 23%,
    color-mix(in srgb, var(--wl-light-halo) 32%, transparent) 46%,
    transparent 72%);
  opacity: 0;
  transition: opacity 420ms ease;
}
html[data-wl-daylight] .wl-light-halo[data-halo-visible] {
  opacity: 1;
}

/* Let the method's existing text rows share light; its interactive glyph is separate. */
html[data-wl-daylight] #method[data-wl-light-zone] :is(.method-intro, .method-body) {
  background: transparent;
}

html[data-wl-daylight][data-wl-daylight-sleep] .wl-light-drift,
html[data-wl-daylight].motion-paused .wl-light-drift {
  animation-play-state: paused !important;
  will-change: auto;
}
html[data-wl-daylight][data-wl-daylight-sleep] .wl-light-halo,
html[data-wl-daylight].motion-paused .wl-light-halo {
  opacity: 0 !important;
}
@media (prefers-reduced-motion: reduce) {
  html[data-wl-daylight] .wl-light-drift {
    animation: none !important;
    transform: none;
    opacity: var(--wl-light-opacity);
    will-change: auto;
  }
  html[data-wl-daylight] .wl-light-scroll { transform: none !important; }
  html[data-wl-daylight] .wl-light-halo { display: none; }
  html[data-wl-daylight] .wl-light-plane { transition: none; }
}
@media (hover: none), (pointer: coarse) {
  html[data-wl-daylight] { --wl-light-intensity: .8; }
  html[data-wl-daylight] .wl-light-halo { display: none; }
}
@media (forced-colors: active) {
  html[data-wl-daylight] :is(.wl-light-plane, .wl-light-halo) { display: none !important; }
}

/* The writing surface stays bright; surrounding shade travels in local clouds. */
html[data-wl-daylight] [data-wl-light-zone="form"] > .wl-light-plane {
  inset-block: -100px;
  inset-inline: calc(-1 * min(110px, var(--wl-side, 24px)));
  background: transparent;
  opacity: 1;
  mask-image: radial-gradient(ellipse 65% 68% at 48% 48%, #000 20%, rgb(0 0 0 / .8) 48%, transparent 85%);
}
html[data-wl-daylight] [data-wl-light-zone="form"] > .wl-light-plane .wl-light-drift {
  inset: -8% -4%;
  background:
    radial-gradient(ellipse 56% 65% at 35% 36%, var(--wl-light-highlight) 3%, transparent 82%),
    radial-gradient(ellipse 43% 53% at 72% 66%, var(--wl-light-highlight) 0%, transparent 86%);
  animation-duration: 21s;
  animation-direction: alternate-reverse;
}
html[data-wl-daylight] [data-wl-light-zone="footer"] { --wl-light-duration: 24s; }

/* Broad, independently drifting shade at the page margins; no filters on content. */
html[data-wl-daylight] [data-wl-light-bleed] > .wl-light-plane .wl-light-drift::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 24% 68% at 12% 36%, var(--wl-margin-shadow), transparent 80%),
    radial-gradient(ellipse 21% 54% at 88% 72%, var(--wl-margin-shadow), transparent 84%);
  animation: wl-daylight-margins 17s cubic-bezier(.45,0,.55,1) infinite alternate paused;
  animation-delay: var(--wl-light-phase);
}
html[data-wl-daylight] [data-wl-light-active] > .wl-light-plane .wl-light-drift::before { animation-play-state: running; }
@keyframes wl-daylight-margins {
  from { transform: translate3d(-3%, 5%, 0) scale(.97); opacity: .48; }
  to { transform: translate3d(4%, -6%, 0) scale(1.04); opacity: 1; }
}
html[data-wl-daylight][data-wl-daylight-sleep] .wl-light-drift::before,
html[data-wl-daylight].motion-paused .wl-light-drift::before { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  html[data-wl-daylight] .wl-light-drift::before { animation: none !important; }
}

/* At the page end, the moving shadow meets the bottom edge and dissolves upward. */
html[data-wl-daylight] [data-wl-light-zone="footer"] > .wl-light-plane {
  opacity: .9;
  mask-image: linear-gradient(to bottom, transparent, rgb(0 0 0 / .12) 12%, rgb(0 0 0 / .5) 34%, #000 64%, #000);
}

/* HEDJ and KEM share the same moving layers, with separate tonal ranges. */
html[data-wl-daylight] [data-wl-light-zone] {
  --wl-field-clear: rgb(255 255 255 / .96);
  --wl-field-reflected: rgb(254 254 252 / .88);
  --wl-field-veil: rgb(241 241 235 / .64);
  --wl-field-shade: rgb(234 234 228 / .78);
  --wl-field-depth: rgb(227 227 220 / .44);
  --wl-light-halo: rgb(255 255 255 / .74);
  --wl-field-shine-x: 23%;
  --wl-field-shine-y: 26%;
  --wl-field-depth-x: 75%;
  --wl-field-depth-y: 66%;
  --wl-field-reflection-duration: 43s;
}

html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone] {
  --wl-field-clear: rgb(74 76 67 / .49);
  --wl-field-reflected: rgb(53 54 47 / .60);
  --wl-field-veil: rgb(36 37 31 / .55);
  --wl-field-shade: rgb(9 10 9 / .53);
  --wl-field-depth: rgb(9 10 9 / .39);
  --wl-light-halo: rgb(53 54 47 / .35);
}
html[data-wl-daylight] [data-wl-light-zone="hero"] {
  --wl-light-duration: 33s;
  --wl-light-phase: -9s;
  --wl-field-shine-x: 29%;
  --wl-field-depth-x: 70%;
  --wl-field-depth-y: 72%;
  --wl-field-reflection-duration: 47s;
}
html[data-wl-daylight] [data-wl-light-zone="services"] {
  --wl-light-duration: 29s;
  --wl-field-shine-x: 68%;
  --wl-field-depth-x: 24%;
}
html[data-wl-daylight] [data-wl-light-zone="method"] {
  --wl-light-duration: 34s;
  --wl-field-shine-y: 52%;
  --wl-field-depth-y: 30%;
}
html[data-wl-daylight] [data-wl-light-zone="contact"] {
  --wl-light-duration: 32s;
  --wl-field-shine-x: 65%;
  --wl-field-depth-x: 26%;
  --wl-field-depth-y: 76%;
}
html[data-wl-daylight] [data-wl-light-zone="footer"] {
  --wl-light-duration: 38s;
  --wl-field-depth-y: 82%;
}
html[data-wl-daylight] [data-wl-light-zone="form"] {
  --wl-field-shade: transparent;
  --wl-field-depth: transparent;
  --wl-field-veil: transparent;
  --wl-field-reflected: rgb(254 254 252 / .96);
}

html[data-wl-daylight][data-theme="dark"] [data-wl-light-zone="form"] {
  --wl-field-clear: rgb(53 54 47 / .38);
  --wl-field-reflected: rgb(36 37 31 / .55);
  --wl-field-veil: transparent;
  --wl-field-shade: transparent;
  --wl-field-depth: transparent;
}

/* Spread the falloff across each zone so neighboring sections blend. */
html[data-wl-daylight] [data-wl-light-bleed]:not([data-wl-light-zone="portrait"]) > .wl-light-plane {
  mask-image: linear-gradient(to bottom,
    transparent 0%, rgb(0 0 0 / .08) 5%, rgb(0 0 0 / .28) 13%,
    rgb(0 0 0 / .63) 24%, rgb(0 0 0 / .92) 38%, #000 49%, #000 56%,
    rgb(0 0 0 / .89) 65%, rgb(0 0 0 / .54) 79%, rgb(0 0 0 / .19) 91%, transparent 100%);
}

html[data-wl-daylight] [data-wl-light-zone]:not([data-wl-light-zone="portrait"]) > .wl-light-plane .wl-light-drift {
  inset: -15% -16%;
  background:
    radial-gradient(ellipse 62% 78% at var(--wl-field-shine-x) var(--wl-field-shine-y),
      var(--wl-field-clear), color-mix(in srgb, var(--wl-field-clear) 76%, transparent) 23%,
      color-mix(in srgb, var(--wl-field-clear) 35%, transparent) 48%,
      color-mix(in srgb, var(--wl-field-clear) 10%, transparent) 68%, transparent 94%),
    radial-gradient(ellipse 63% 70% at var(--wl-field-depth-x) var(--wl-field-depth-y),
      var(--wl-field-depth), color-mix(in srgb, var(--wl-field-depth) 68%, transparent) 26%,
      color-mix(in srgb, var(--wl-field-depth) 24%, transparent) 55%, transparent 97%),
    radial-gradient(ellipse 80% 76% at 45% 83%,
      var(--wl-field-veil), color-mix(in srgb, var(--wl-field-veil) 42%, transparent) 39%, transparent 95%);
  background-repeat: no-repeat;
  animation-name: wl-field-wash;
}
html[data-wl-daylight] [data-wl-light-bleed]:not([data-wl-light-zone="portrait"]) > .wl-light-plane .wl-light-drift::before {
  background:
    radial-gradient(ellipse 48% 82% at 1% 44%,
      var(--wl-field-shade), color-mix(in srgb, var(--wl-field-shade) 58%, transparent) 26%,
      color-mix(in srgb, var(--wl-field-shade) 20%, transparent) 58%, transparent 95%),
    radial-gradient(ellipse 47% 79% at 101% 61%,
      var(--wl-field-shade), color-mix(in srgb, var(--wl-field-shade) 60%, transparent) 24%,
      color-mix(in srgb, var(--wl-field-shade) 17%, transparent) 57%, transparent 97%);
  background-repeat: no-repeat;
  animation-name: wl-field-edges;
  animation-duration: 49s;
  animation-delay: calc(var(--wl-light-phase) - 11s);
}

/* A counter-moving reflection crosses the wash; no filters on the content. */
html[data-wl-daylight] [data-wl-light-zone]:not([data-wl-light-zone="portrait"]) > .wl-light-plane .wl-light-drift::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 58% 65% at 83% 27%,
      var(--wl-field-reflected), color-mix(in srgb, var(--wl-field-reflected) 53%, transparent) 32%,
      color-mix(in srgb, var(--wl-field-reflected) 13%, transparent) 64%, transparent 97%),
    radial-gradient(ellipse 52% 52% at 42% 74%,
      color-mix(in srgb, var(--wl-field-clear) 70%, transparent),
      color-mix(in srgb, var(--wl-field-clear) 31%, transparent) 37%, transparent 94%);
  opacity: .64;
  animation: wl-field-reflection var(--wl-field-reflection-duration) ease-in-out infinite alternate paused;
  animation-delay: calc(var(--wl-light-phase) - 17s);
}
html[data-wl-daylight] [data-wl-light-active] > .wl-light-plane .wl-light-drift::after {
  animation-play-state: running;
}
html[data-wl-daylight][data-wl-daylight-sleep] .wl-light-drift::after,
html[data-wl-daylight].motion-paused .wl-light-drift::after {
  animation-play-state: paused !important;
}

@keyframes wl-field-wash {
  0%   { transform: translate3d(-6%, -3%, 0) scale(1.02); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .76); }
  33%  { transform: translate3d(1%, -5%, 0) scale(1.07); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .94); }
  68%  { transform: translate3d(6%, 2%, 0) scale(1.03); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .82); }
  100% { transform: translate3d(-2%, 6%, 0) scale(1.09); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .98); }
}
@keyframes wl-field-edges {
  0%   { transform: translate3d(3%, 3%, 0) scale(1.03); opacity: .55; }
  46%  { transform: translate3d(-4%, 0, 0) scale(1.09); opacity: .79; }
  100% { transform: translate3d(1%, -6%, 0) scale(1.04); opacity: .62; }
}
@keyframes wl-field-reflection {
  0%   { transform: translate3d(7%, 1%, 0) scale(1.03); opacity: .53; }
  39%  { transform: translate3d(-2%, 5%, 0) scale(1.10); opacity: .84; }
  100% { transform: translate3d(-8%, -5%, 0) scale(1.05); opacity: .63; }
}

html[data-wl-daylight] [data-wl-light-zone]:not([data-wl-light-zone="portrait"]) .wl-light-halo {
  background: radial-gradient(ellipse 52% 45% at center,
    var(--wl-light-halo), color-mix(in srgb, var(--wl-light-halo) 62%, transparent) 24%,
    color-mix(in srgb, var(--wl-light-halo) 24%, transparent) 53%,
    color-mix(in srgb, var(--wl-light-halo) 6%, transparent) 76%, transparent 100%);
}
@media (prefers-reduced-motion: reduce) {
  html[data-wl-daylight] .wl-light-drift::after { animation: none !important; }
}

/* HEDJ light passes over a pale center and broad, softened margins. */
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] {
  --wl-field-clear: #FFFFFF;
  --wl-field-reflected: rgb(254 254 252 / .96);
  --wl-field-veil: rgb(241 241 235 / .74);
  --wl-field-shade: rgb(227 227 220 / .76);
  --wl-field-depth: rgb(234 234 228 / .78);
}
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] > .wl-light-plane {
  opacity: .9;
}
/* A wide field of light keeps the reading column clear in every phase. */
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] > .wl-light-plane::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 56% 88% at 50% 49%,
    rgb(255 255 255 / .48), rgb(254 254 252 / .34) 27%,
    rgb(254 254 252 / .17) 53%, rgb(254 254 252 / .04) 78%, transparent 100%);
}
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] > .wl-light-plane .wl-light-drift {
  animation-name: wl-hedj-passage;
  animation-duration: calc(var(--wl-light-duration) * .50);
}
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] > .wl-light-plane .wl-light-drift::before {
  inset: -14% -22%;
  background:
    radial-gradient(ellipse 51% 66% at 28% 57%,
      var(--wl-field-shade), color-mix(in srgb, var(--wl-field-shade) 71%, transparent) 23%,
      color-mix(in srgb, var(--wl-field-shade) 32%, transparent) 54%,
      color-mix(in srgb, var(--wl-field-shade) 7%, transparent) 79%, transparent 100%),
    radial-gradient(ellipse 45% 65% at 82% 42%,
      color-mix(in srgb, var(--wl-field-shade) 78%, transparent),
      color-mix(in srgb, var(--wl-field-shade) 40%, transparent) 34%,
      color-mix(in srgb, var(--wl-field-shade) 8%, transparent) 74%, transparent 100%);
  background-repeat: no-repeat;
  animation-name: wl-hedj-margin-passage;
  animation-duration: 22s;
}
html[data-wl-daylight]:not([data-theme="dark"]) [data-wl-light-bleed] > .wl-light-plane .wl-light-drift::after {
  inset: -14% -22%;
  animation-name: wl-hedj-return;
  animation-duration: calc(var(--wl-field-reflection-duration) * .51);
}
@keyframes wl-hedj-passage {
  0%   { transform: translate3d(-12%, -6%, 0) scale(1.07); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .79); }
  24%  { transform: translate3d(1%, 5%, 0) scale(1.09); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .99); }
  57%  { transform: translate3d(12%, -1%, 0) scale(1.04); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .91); }
  78%  { transform: translate3d(8%, -5%, 0) scale(1.07); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity) * .86); }
  100% { transform: translate3d(4%, -7%, 0) scale(1.08); opacity: calc(var(--wl-light-opacity) * var(--wl-light-intensity)); }
}
@keyframes wl-hedj-margin-passage {
  0%   { transform: translate3d(-14%, 10%, 0) scale(1.04); opacity: .49; }
  28%  { transform: translate3d(-7%, 3%, 0) scale(1.08); opacity: .98; }
  63%  { transform: translate3d(4%, -4%, 0) scale(1.12); opacity: .52; }
  100% { transform: translate3d(17%, -9%, 0) scale(1.08); opacity: .89; }
}
@keyframes wl-hedj-return {
  0%   { transform: translate3d(12%, 6%, 0) scale(1.05); opacity: .19; }
  34%  { transform: translate3d(4%, -3%, 0) scale(1.08); opacity: .92; }
  72%  { transform: translate3d(-5%, -4%, 0) scale(1.07); opacity: .36; }
  100% { transform: translate3d(-12%, 3%, 0) scale(1.06); opacity: .67; }
}

/* The cursor light sits over the continuous band, between the portrait and its copy. */
html[data-wl-daylight] [data-wl-light-zone="portrait"] > .wl-light-halo {
  z-index: 1;
  mix-blend-mode: screen;
  background: radial-gradient(ellipse 52% 49% at center,
    rgb(53 54 47 / .52), rgb(36 37 31 / .44) 30%,
    rgb(36 37 31 / .24) 56%, rgb(23 24 19 / .12) 78%, transparent 100%);
}
html[data-wl-daylight] #studio#studio#studio[data-wl-light-zone="portrait"] :is(.tail-about-name, .tail-about-copy) {
  z-index: 2;
}