/* Interaction motion for every Study page (study-motion.js). It animates translate, scale and opacity only, as separate
   properties, so it never fights a page's own transform (the Arena's tilting posters, for example). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: sm-page-out .16s ease-in both; }
::view-transition-new(root) { animation: sm-page-in .24s cubic-bezier(.2, .8, .2, 1) both; }
.study-mobile-tabs { view-transition-name: study-tabs; }
@keyframes sm-page-out { to { opacity: 0; translate: 0 -6px; } }
@keyframes sm-page-in { from { opacity: 0; translate: 0 10px; } }

/* A press sinks a little and springs back. */
.home-skill, .home-shortcut, .home-primary, .home-secondary, .home-mock, .home-arena, .vg-btn, .gm-btn, .gm-otter, .ipa-tile, .ipa-play, .ipa-mic,
.speak-level, .sp-mic, .pro-cta, .pro-parent-send, .pro-parent-cta, .study-mobile-tabs a, .btn {
  /* Loaded last, so it lists what these buttons already animated (their hover lift and colour) as well as the press. */
  transition: scale .22s cubic-bezier(.3, 1.6, .5, 1), transform .18s ease, filter .15s, background-color .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s;
}
.home-skill:active, .home-shortcut:active, .home-primary:active, .home-secondary:active, .home-mock:active, .home-arena:active, .vg-btn:active, .gm-otter:active,
.ipa-tile:active, .ipa-play:active, .ipa-mic:active, .speak-level:active, .sp-mic:active, .pro-cta:active, .pro-parent-send:active, .pro-parent-cta:active, .btn:active {
  scale: .95; transition-duration: .06s;
}
.study-mobile-tabs a svg { transition: scale .25s cubic-bezier(.3, 1.8, .5, 1), translate .25s cubic-bezier(.3, 1.8, .5, 1); }
.study-mobile-tabs a:active svg { scale: 1.25; translate: 0 -3px; }

.sm-ripple { position: fixed; z-index: 9999; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 255, 255, .5); pointer-events: none; animation: sm-ripple .45s ease-out forwards; }
@keyframes sm-ripple { to { scale: 7; opacity: 0; } }

/* Sections rise in. sm-wait is only ever set by the script. */
.sm-wait { opacity: 0; }
.sm-in { animation: sm-rise .5s cubic-bezier(.2, .9, .3, 1.15) var(--sm-delay, 0ms) both; }
@keyframes sm-rise { from { opacity: 0; translate: 0 18px; scale: .97; } to { opacity: 1; translate: 0 0; scale: 1; } }

.sm-burst { position: fixed; z-index: 9999; width: 0; height: 0; pointer-events: none; }
.sm-burst i { position: absolute; width: 9px; height: 9px; border-radius: 2px; animation: sm-bit .9s cubic-bezier(.15, .7, .4, 1) forwards; }
@keyframes sm-bit { 0% { scale: .3; opacity: 1; } 70% { opacity: 1; } 100% { translate: var(--x) var(--y); rotate: var(--r); scale: 1; opacity: 0; } }

.sm-jump { animation: sm-jump .7s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes sm-jump { 0%, 100% { translate: 0 0; } 30% { translate: 0 -22px; scale: 1.06 .96; } 60% { translate: 0 0; scale: .96 1.05; } 80% { translate: 0 -7px; } }
.sm-shake { animation: sm-shake .42s ease-in-out; }
@keyframes sm-shake { 20% { translate: -8px 0; } 40% { translate: 7px 0; } 60% { translate: -5px 0; } 80% { translate: 3px 0; } }
.sm-enter { animation: sm-enter .36s cubic-bezier(.2, .9, .3, 1.1); }
@keyframes sm-enter { from { opacity: 0; translate: 36px 0; } }
.sm-pop { animation: sm-pop .4s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes sm-pop { from { scale: .6; } 60% { scale: 1.2; } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  .sm-wait { opacity: 1; }
  .sm-in, .sm-jump, .sm-shake, .sm-enter, .sm-pop { animation: none; }
  .home-skill, .home-shortcut, .home-primary, .home-secondary, .home-mock, .home-arena, .vg-btn, .gm-btn, .gm-otter, .ipa-tile, .ipa-play, .ipa-mic, .speak-level, .sp-mic, .pro-cta, .btn { transition: none; }
}