/* JavaScript adds this class only when scroll animation is supported. */
.inner-page .subpage-fade {
  opacity:0;
  transition:opacity .7s ease;
}
.inner-page .subpage-fade.is-faded-in {
  opacity:1;
}
.inner-page .subpage-fade:focus-within {
  opacity:1;
  transition:none;
}
@media(prefers-reduced-motion:reduce) {
  .inner-page .subpage-fade { opacity:1;transition:none; }
}
@media print {
  .inner-page .subpage-fade { opacity:1;transition:none; }
}

/* Input → AI coach → review → learner. Keep the ring and orbit independent. */
.coach-sequence-ready [data-coach-step] { opacity:0; }
.coach-sequence-ready.is-sequence-playing [data-coach-step] { animation:coach-step-fade-in .6s ease var(--coach-step-delay) both; }
@keyframes coach-step-fade-in { from { opacity:0; } to { opacity:1; } }
[data-coach-step="1"] { --coach-step-delay:0s; }
[data-coach-step="2"] { --coach-step-delay:.65s; }
[data-coach-step="3"] { --coach-step-delay:1.3s; }
[data-coach-step="4"] { --coach-step-delay:1.95s; }
@media(prefers-reduced-motion:reduce) {
 .coach-sequence-ready.is-sequence-playing [data-coach-step],.coach-sequence-ready [data-coach-step] { opacity:1;animation:none; }
}
@media print {
 .coach-sequence-ready.is-sequence-playing [data-coach-step],.coach-sequence-ready [data-coach-step] { opacity:1;animation:none; }
}

/* Keyframes ensure the first view fades in even before the first browser paint. */
.program-hero-copy.subpage-fade.is-faded-in { animation:program-first-view-in .85s ease .1s both; }
.program-hero-visual.subpage-fade.is-faded-in { animation:program-first-view-in .85s ease .3s both; }
@keyframes program-first-view-in { from { opacity:0; } to { opacity:1; } }
@media(prefers-reduced-motion:reduce) {
 .program-hero-copy.subpage-fade.is-faded-in,.program-hero-visual.subpage-fade.is-faded-in { opacity:1;animation:none; }
}
@media print {
 .program-hero-copy.subpage-fade.is-faded-in,.program-hero-visual.subpage-fade.is-faded-in { opacity:1;animation:none; }
}

/* Clip the orbit marker behind all four cards, including during their fade-in.
   Keep the mask stationary while the nested marker rotates. */
.program-coach-diagram .coach-orbit-layer {
  position:absolute;
  left:677px;
  top:1648px;
  width:656px;
  height:471px;
  pointer-events:none;
  z-index:1;
  -webkit-mask:url('../image/coach-orbit-mask.svg') 0 0 / 656px 471px no-repeat;
  mask:url('../image/coach-orbit-mask.svg') 0 0 / 656px 471px no-repeat;
}