/* Startskärmen i My THL (3.11.1). Bara i mobilen och appen. */
.mt-splash{display:none}
@media (max-width:999.98px){
  html.mt-splashing,html.mt-splashing body{background:#293241!important}
  .mt-splash{display:grid;place-items:center;position:fixed;inset:0;z-index:9999;background:#293241;transition:opacity .4s ease}
  .mt-splash.is-done{opacity:0;pointer-events:none}
  /* 20 % mindre än i 3.11.1. Inloggningens logga har exakt samma mått. */
  .mt-splash__logo{width:min(52.8vw,288px);height:auto;overflow:visible}
  .mt-splash .sp-big path{fill:#fff}
  .mt-splash .sp-tag path{fill:#fff}
  .mt-splash .sp-tag path.sp-o{fill:#ee6c4d}
  /* En sekund blå skärm, sedan glider T, H och L in snett från vänster. */
  .mt-splash .sp-l{opacity:0;transform-box:fill-box;transform-origin:50% 100%}
  .mt-splash.is-on .sp-l{animation:mt-sp-in .6s cubic-bezier(.18,.9,.24,1.12) forwards}
  .mt-splash.is-on .sp-l1{animation-delay:1s}
  .mt-splash.is-on .sp-l2{animation-delay:1.12s}
  .mt-splash.is-on .sp-l3{animation-delay:1.24s}
  .mt-splash .sp-tag{opacity:0}
  .mt-splash.is-on .sp-tag{animation:mt-sp-tag .5s ease-out 1.7s forwards}
  @keyframes mt-sp-in{
    0%{opacity:0;transform:translateX(-70px) skewX(-16deg)}
    60%{opacity:1}
    100%{opacity:1;transform:none}
  }
  @keyframes mt-sp-tag{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    .mt-splash.is-on .sp-l,.mt-splash.is-on .sp-tag{animation:mt-sp-fade .4s ease-out .6s forwards}
    @keyframes mt-sp-fade{to{opacity:1}}
  }
}