/* Page entrance animations, loaded on every page. Only runs for users who have not asked for reduced motion. */

html{scrollbar-gutter:stable}

/* Interactive pages are prerendered first and Blazor then replaces that DOM. The prerendered copy stays invisible and
   animation-free so the entrance plays once, on the interactive copy. If the circuit never connects, reveal it after 4s. */
@keyframes m-reveal{to{visibility:visible}}
.pre{visibility:hidden;animation:m-reveal 0s 4s forwards}
.pre *{animation:none!important}

@keyframes m-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes m-drop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@keyframes m-fade{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}

@media screen and (prefers-reduced-motion:no-preference){
  :root{--m-ease:cubic-bezier(.22,1,.36,1)}

  /* Fill mode is "backwards": nothing keeps a transform afterwards, so sticky and fixed elements are unaffected. */
  .site-nav{animation:m-drop .45s var(--m-ease) backwards}

  /* Generic pages: login, access denied, not found, access-locked card */
  main>:not(.calc-screen):not(.panel-wrap){animation:m-rise .55s var(--m-ease) .05s backwards}

  /* Profile and admin */
  .panel-wrap>*{animation:m-rise .55s var(--m-ease) backwards}
  .panel-wrap>:nth-child(1){animation-delay:.05s}
  .panel-wrap>:nth-child(2){animation-delay:.12s}
  .panel-wrap>:nth-child(3){animation-delay:.19s}
  .panel-wrap>:nth-child(4){animation-delay:.26s}
  .panel-wrap>:nth-child(n+5){animation-delay:.33s}

  /* Calculator */
  .calc-screen .topbar{animation:m-drop .5s var(--m-ease) backwards}
  .calc-screen .eyebrow{animation:m-rise .55s var(--m-ease) .08s backwards}
  .calc-screen .topbar h1{animation:m-rise .55s var(--m-ease) .14s backwards}
  .calc-screen .subtitle{animation:m-rise .55s var(--m-ease) .20s backwards}
  .calc-screen .vat-badge{animation:m-fade .5s var(--m-ease) .30s backwards}

  .calc-screen .stepper li{animation:m-fade .5s var(--m-ease) backwards}
  .calc-screen .stepper li:nth-child(1){animation-delay:.22s}
  .calc-screen .stepper li:nth-child(2){animation-delay:.28s}
  .calc-screen .stepper li:nth-child(3){animation-delay:.34s}
  .calc-screen .stepper li:nth-child(4){animation-delay:.40s}

  .calc-screen .form-column>*{animation:m-rise .6s var(--m-ease) backwards}
  .calc-screen .form-column>:nth-child(1){animation-delay:.34s}
  .calc-screen .form-column>:nth-child(2){animation-delay:.44s}
  .calc-screen .form-column>:nth-child(n+3){animation-delay:.54s}
}

/* The result panel is a bottom sheet with its own transform on small screens, so it only animates on desktop. */
@media screen and (prefers-reduced-motion:no-preference) and (min-width:851px){
  .calc-screen .results{animation:m-rise .65s var(--m-ease) .46s backwards}
}

@media screen and (prefers-reduced-motion:no-preference) and (max-width:850px){
  .calc-screen .mobile-bar{animation:m-rise .55s var(--m-ease) .6s backwards}
}