/* SlowHi website — shared styles for index / support / privacy / terms
   Motion tokens: --rpx scales every animation distance with the viewport
   (1rpx-equivalent = 1/1440 of viewport width, i.e. the 1440px design width). */

:root{
  --rpx:calc(100vw / 1440);
  --ph-hero:clamp(.5,calc(100vw / 1520px),.82);
  --ph-sec:clamp(.46,calc(100vw / 1720px),.74);
}

*{box-sizing:border-box}

body{
  margin:0;
  background:#0b0f1a;
  color:#f4f7fa;
  font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:#ff2ea6;text-decoration:none}
a:hover{color:#ffa8dc}
a:focus-visible,button:focus-visible{outline:2px solid #c9e01a;outline-offset:2px}

img{max-width:100%}

summary{list-style:none;cursor:pointer}
summary::-webkit-details-marker{display:none}

/* language switch — active pill */
[data-lang][data-on="1"]{background:#c9e01a;color:#12200a}

/* section entrance — only armed once main.js runs, so content stays
   readable when JavaScript is unavailable */
[data-anim-ready] [data-reveal]{
  opacity:0;
  transform:translateY(calc(var(--rpx) * 32));
  transition:opacity .6s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
[data-anim-ready] [data-reveal][data-on="1"]{opacity:1;transform:none}

/* travelling-letter animation (hero of the "on its way" screen) */
@keyframes sp-fly{0%{left:19%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:77%;opacity:0}}
@keyframes sp-trail{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@keyframes sp-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.55}}

/* floating stickers + scroll cue */
@keyframes float{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(calc(var(--rpx) * -18)) rotate(4deg)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--rpx) * 14))}}

/* country marquee */
@keyframes marquee{to{transform:translateX(-50%)}}

/* primary CTA glow */
@keyframes glow{
  0%,100%{box-shadow:0 0 0 2.5px #d6f10a,5px 6px 0 rgba(0,0,0,.45),0 0 0 0 rgba(92,235,28,.45)}
  60%{box-shadow:0 0 0 2.5px #d6f10a,5px 6px 0 rgba(0,0,0,.45),0 0 0 calc(var(--rpx) * 24) rgba(92,235,28,0)}
}

/* in-phone feeds scroll for real; hide their scrollbars */
[data-feed]{scrollbar-width:none;-ms-overflow-style:none}
[data-feed]::-webkit-scrollbar{width:0;height:0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-anim-ready] [data-reveal]{opacity:1;transform:none}
}