/* Image effects enhance the generated campaign art; copy and references stay static. */
:where([data-learning-visual]) { isolation:isolate; }
[data-learning-visual] > [data-learning-layer] { backface-visibility:hidden; }
.learning-motion-ready [data-learning-visual] > [data-learning-layer] {
  transform-origin:50% 50%;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),clip-path .85s cubic-bezier(.19,1,.22,1);
}
.learning-motion-ready [data-learning-visual].learning-visual-enhanced {
  --learning-shift:0px; --learning-pointer-x:0px; --learning-pointer-y:0px;
}
.learning-motion-ready [data-learning-visual].learning-visual-enhanced > [data-learning-layer] {
  transform:translate3d(var(--learning-pointer-x),calc(var(--learning-shift) + var(--learning-pointer-y)),0) scale(1.07);
}
.learning-motion-ready [data-learning-visual]:not(.learning-native-timeline):not(.is-learning-visible) > [data-learning-layer] {
  clip-path:inset(0 16% 0 0);
}
.learning-motion-ready [data-learning-visual].is-learning-visible:not(.learning-native-timeline) > [data-learning-layer] {
  clip-path:inset(0 0 0 0);
}
.learning-motion-ready [data-learning-visual]::after {
  content:''; position:absolute; z-index:2; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at var(--learning-light-x,50%) var(--learning-light-y,40%),#fff5 0%,#b3e7e819 32%,transparent 67%);
  mix-blend-mode:screen; opacity:0; transition:opacity .45s ease;
}
.learning-motion-ready [data-learning-visual]:is(.is-learning-pointed,:focus-within)::after { opacity:.7; }
.learning-motion-ready [data-learning-visual]:not([data-learning-visual="hero"])::before {
  content:''; position:absolute; z-index:3; inset:10px; pointer-events:none;
  border:1px solid #fff6; border-radius:inherit; opacity:0; scale:.97;
  transition:opacity .55s ease,scale .65s cubic-bezier(.2,.7,.2,1);
}
.learning-motion-ready [data-learning-visual]:not([data-learning-visual="hero"]):is(.is-learning-pointed,:focus-within)::before { opacity:1; scale:1; }
.learning-motion-ready :is(a,article):focus-within > [data-learning-visual]:not([data-learning-visual="hero"])::before { opacity:1; scale:1; }
/* The process rail follows the section, without changing disclosure or task state. */
:where([data-learning-process].learning-process-enhanced) { position:relative; }
[data-learning-process].learning-process-enhanced::before {
  content:''; position:absolute; z-index:0; inset:0 auto 0 0; width:3px;
  border-radius:3px; background:linear-gradient(180deg,#2a59c6,#78b8ac);
  transform-origin:top; transform:scaleY(var(--learning-process-progress,0));
  pointer-events:none; opacity:.48;
}
[data-learning-step] { transition:border-color .3s ease,box-shadow .3s ease; }
[data-learning-step].is-learning-current { border-color:#7899c9; box-shadow:inset 3px 0 #3e76c836; }
[data-learning-step].is-learning-passed { border-color:#9fbdc4; }

@supports ((animation-timeline:view()) and (animation-range:entry)) {
  @media(prefers-reduced-motion:no-preference) {
    .learning-motion-ready [data-learning-visual].learning-native-timeline > [data-learning-layer] {
      animation:learning-scroll-aperture auto linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 85%;
    }
  }
}
@keyframes learning-scroll-aperture {
  from { clip-path:inset(0 18% 0 0); }
  to { clip-path:inset(0 0 0 0); }
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  :is(a,article):is(:hover,:focus-within) > [data-learning-visual] > [data-learning-layer] {
    filter:saturate(1.06);
  }
}
@media(max-width:760px) {
  .learning-motion-ready [data-learning-visual].learning-visual-enhanced > [data-learning-layer] {
    transform:translate3d(0,var(--learning-shift),0) scale(1.045);
  }
  .learning-motion-ready [data-learning-visual]::after { display:none; }
  [data-learning-process].learning-process-enhanced::before { width:2px; }
}
.learning-motion-reduced [data-learning-visual].learning-visual-enhanced > [data-learning-layer] {
  animation:none!important; transition:none!important; transform:none!important; clip-path:none!important;
}
.learning-motion-reduced [data-learning-visual]::before,
.learning-motion-reduced [data-learning-visual]::after,
.learning-motion-reduced [data-learning-process]::before { display:none!important; }
@media(prefers-reduced-motion:reduce) {
  [data-learning-visual] > [data-learning-layer] { animation:none!important; transition:none!important; transform:none!important; clip-path:none!important; filter:none!important; }
  [data-learning-visual]::before,[data-learning-visual]::after,[data-learning-process].learning-process-enhanced::before { display:none!important; }
  [data-learning-step] { transition:none!important; }
}
