/* altoda sample kit.
   Shared behaviour for the sample sites in samples/<slug>/. Every site has its own look
   (fonts, colors, layout) in its own <style>; this file only holds the reset, the motion helpers
   and the altoda sample dock. Generated pages link it; edit here, then run tools/build_samples.py. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
img,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4,h5,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Reveal on scroll */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.shot .rv{opacity:1;transform:none;transition:none}

/* Marquee: children are cloned once by kit.js */
.mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq-track{display:flex;width:max-content;animation:mq var(--mq,48s) linear infinite}
.mq:hover .mq-track{animation-play-state:paused}
.mq.rev .mq-track{animation-direction:reverse}
@keyframes mq{to{transform:translateX(-50%)}}

/* Demo form result */
form.sent [data-hide-on-send]{display:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .mq-track{animation:none}
  .mq{overflow-x:auto}
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
}

/* "Made with altoda" footer badge */
.al-made{display:inline-flex;align-items:center;gap:7px;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;opacity:.72;transition:opacity .15s}
.al-made:hover{opacity:1}
.al-made svg{height:12px;width:auto}

/* altoda sample dock */
.al-dock{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:4px;padding:6px;background:#0B0F0D;color:#fff;border-radius:999px;font:500 14px/1.2 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;letter-spacing:0;box-shadow:0 20px 44px -14px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.09);white-space:nowrap;max-width:calc(100% - 24px);animation:al-in .6s cubic-bezier(.2,.7,.2,1) .4s both}
@keyframes al-in{from{opacity:0;transform:translate(-50%,16px)}}
.al-dock a,.al-dock button{display:inline-flex;align-items:center;gap:8px;border:0;border-radius:999px;min-height:40px;padding:0 14px;background:none;color:inherit;font:inherit;transition:background .15s,color .15s}
.al-dock .al-home{padding:0 12px 0 14px}
.al-dock .al-home svg{height:14px;width:auto}
.al-dock .al-home:hover,.al-dock .al-all:hover,.al-dock .al-x:hover{background:rgba(255,255,255,.1)}
.al-note{color:rgba(255,255,255,.6);padding:0 8px 0 2px;overflow:hidden;text-overflow:ellipsis}
.al-dock .al-panel{background:#fff;color:#0B0F0D;font-weight:600}
.al-dock .al-panel:hover{background:#3DDC97}
.al-dock .al-panel svg{width:16px;height:16px}
.al-dock .al-x{width:40px;padding:0;justify-content:center;color:rgba(255,255,255,.6);font-size:20px}
.al-tab{position:fixed;left:14px;bottom:14px;z-index:9999;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 14px;border:0;border-radius:999px;background:#0B0F0D;color:#fff;font:500 13px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;box-shadow:0 12px 30px -10px rgba(0,0,0,.5)}
.al-tab svg{height:12px;width:auto}
.shot .al-dock,.shot .al-tab{display:none!important}
@media (max-width:760px){
  .al-note,.al-dock .al-all{display:none}
  .al-dock{bottom:12px;font-size:13.5px}
}
@media print{.al-dock,.al-tab{display:none}}