/*
 * De knop "terug naar Smit Media" die op elke pagina van een app-site staat (die staan onder smitmedia.dev/<app>/).
 * Staat los van de vormgeving van de app: vaste kleuren, links onderin, mee te scrollen.
 */
.sm-back {
  position: fixed; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 70;
  display: inline-flex; align-items: center; gap: 2px; height: 56px; padding: 0 20px 0 6px; border-radius: 999px;
  background: linear-gradient(135deg, #3B2FC9, #5B43A8); color: #FFFFFF; text-decoration: none;
  font: 700 14px/1 "Roboto Flex", Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing: 0;
  box-shadow: 0 16px 34px -10px rgba(40, 24, 120, .75), inset 0 0 0 1px rgba(255, 255, 255, .28);
  transition: transform .45s cubic-bezier(.34, 1.45, .64, 1), box-shadow .25s;
  animation: sm-back-in .9s cubic-bezier(.34, 1.45, .64, 1) .6s both;
}
@keyframes sm-back-in { from { transform: translateY(24px) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.sm-back:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 22px 40px -12px rgba(40, 24, 120, .85), inset 0 0 0 1px rgba(255, 255, 255, .4); }
.sm-back:active { transform: scale(.97); }
.sm-back:focus-visible { outline: 3px solid #FFFFFF; outline-offset: 3px; }
.sm-back > svg { width: 22px; height: 22px; fill: currentColor; flex: none; margin: 0 0 0 8px; transition: transform .35s cubic-bezier(.34, 1.45, .64, 1); }
.sm-back:hover > svg { transform: translateX(-4px); }
.sm-back-logo {
  display: inline-block; width: 40px; height: 40px; border-radius: 50%; margin: 0 12px 0 8px; flex: none;
  background: #1D1C23 url(/assets/logo-rond-96.png) center / cover no-repeat; font-size: 0; color: transparent; box-shadow: 0 0 0 1px rgba(255, 255, 255, .22);
}
.sm-back-text { display: grid; gap: 3px; text-align: left; white-space: nowrap; overflow: hidden; max-width: 220px; transition: max-width .55s cubic-bezier(.34, 1.3, .64, 1), opacity .3s; }
.sm-back-logo { transition: margin .45s cubic-bezier(.34, 1.3, .64, 1); }
/* Op een telefoon klapt de knop na een paar seconden in tot pijltje en logo (hubbar.js zet .mini); aanraken of focus klapt hem weer uit. */
.sm-back.mini { padding-right: 8px; }
.sm-back.mini .sm-back-text { max-width: 0; opacity: 0; }
.sm-back.mini .sm-back-logo { margin-right: 0; }
.sm-back { transition: transform .45s cubic-bezier(.34, 1.45, .64, 1), box-shadow .25s, padding .45s cubic-bezier(.34, 1.3, .64, 1); }
.sm-back::before { content: ""; position: absolute; inset: -12px; border-radius: 999px; }
.sm-back-text small { font-size: 11.5px; font-weight: 600; opacity: .82; }
.sm-back-text b { white-space: nowrap; font-size: 18px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.sm-back-text b span { color: #E4DCFF; }
.sm-back-text b i { display: inline-block; width: .24em; height: .24em; border-radius: 50%; background: #C9BCFF; margin-left: .08em; }
@media (prefers-reduced-motion: reduce) { .sm-back { animation: none; } .sm-back, .sm-back-text, .sm-back-logo { transition: none; } }
@media print { .sm-back { display: none; } }