﻿/* Motion: the hero photograph changes like light in a room; each section's parts rise in once; every control answers a press. */
.hero-photo img{transition:opacity 1600ms ease-in-out}
.text-link,.hero-alt,.hero-login,.hero-links a,.chooser label,.footer-columns a,.questions summary{transition:background-color 160ms ease,color 160ms ease,transform 160ms var(--ease-out)}
.play-badge{transition:transform 160ms var(--ease-out)}
@media(hover:hover){.play-badge:hover{transform:translateY(-2px)}}
.play-badge:active,.hero-login:active,.chooser label:active{transform:scale(.97)}
.js [data-rise]{opacity:0;transform:translateY(24px);transition:opacity 600ms ease,transform 600ms var(--ease-out)}
.js [data-rise].is-in{opacity:1;transform:none}
.js [data-rise].is-in:nth-child(2){transition-delay:70ms}
.js [data-rise].is-in:nth-child(3){transition-delay:140ms}
.js [data-rise].is-in:nth-child(4){transition-delay:210ms}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js [data-rise]{opacity:1;transform:none}
  .play-badge:hover,.play-badge:active,.hero-login:active,.chooser label:active{transform:none}
}
