/* Neloa website — global styles, animations and hover states.
   Layout styles stay inline in the HTML so the design cannot drift. */

body {
  margin: 0;
  background: #F7F6FB;
  font-family: 'M PLUS Rounded 1c', -apple-system, 'Hiragino Sans', system-ui, sans-serif;
  color: #191233;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
* { box-sizing: border-box; }
a { color: #6C3BF4; text-decoration: none; }
a:hover { color: #4A22C0; }
button { cursor: pointer; font-family: inherit; }
img { display: block; }

/* Fluid design unit: 1 rpx == 1px on a 1440px-wide layout. */
:root { --rpx: clamp(0.9px, 100vw / 1440, 1.18px); }
@media (max-width: 640px) { :root { --rpx: clamp(0.92px, 100vw / 430, 1.06px); } }

/* --- Animations ------------------------------------------------------ */
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes mq  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes mqr { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.floaty { animation: floaty 7s ease-in-out infinite; }
.marquee-track { animation: mq 64s linear infinite; }
.marquee-track.reverse { animation-name: mqr; }

/* The photo wall and floating hero are core to the design, so they keep running.
   Reduced-motion users get a gentler, slower version instead of a frozen one. */
@media (prefers-reduced-motion: reduce) {
  .floaty { animation-duration: 14s; }
  .marquee-track { animation-duration: 120s; }
}

/* --- Hover / focus states -------------------------------------------- */
.nav-link { color: rgba(255, 255, 255, .72); transition: color .18s ease; }
.nav-link:hover, .nav-link:focus-visible { color: #FFFFFF; }

.nav-cta, .btn-gradient, .btn-dark, .btn-store {
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}
.nav-cta:hover, .btn-gradient:hover, .btn-dark:hover, .btn-store:hover { transform: translateY(-2px); }
.nav-cta:active, .btn-gradient:active, .btn-dark:active, .btn-store:active { transform: translateY(0) scale(.98); }

.footer-link { color: rgba(255, 255, 255, .85); transition: color .18s ease; }
.footer-link:hover, .footer-link:focus-visible { color: #FFFFFF; }

.lang-chip { transition: background .18s ease, color .18s ease; }

.card-lift { transition: transform .2s ease, box-shadow .2s ease; }
.card-lift:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(25, 18, 51, .55); }

/* Hide the nav scrollbar on narrow screens without disabling scrolling. */
.nav-bar { scrollbar-width: none; -ms-overflow-style: none; }
.nav-bar::-webkit-scrollbar { display: none; }