/* ============================================================
   Webly — custom CSS (naast Tailwind)
============================================================ */

html { -webkit-text-size-adjust: 100%; }
body { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; }
section[id] { scroll-margin-top: 92px; }

/* Taaloverlay */
#langOverlay { display: flex; }
html.lang-known #langOverlay { display: none !important; }

@keyframes overlayIn {
  from { opacity: 0; transform: translateY(16px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
#langOverlay .overlay-card { animation: overlayIn .5s cubic-bezier(.16,1,.3,1) both; }
#langOverlay .overlay-backdrop { animation: fadeIn .3s ease both; }

/* Navbar */
#navbar { background: transparent; }
#navbar.is-scrolled {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(20,18,31,.07), 0 10px 30px -20px rgba(20,18,31,.35);
}

.nav-link {
  position: relative;
  padding: .5rem .85rem;
  font-size: .9rem;
  font-weight: 600;
  color: #443f58;
  border-radius: .65rem;
  transition: color .2s, background-color .2s;
}
.nav-link:hover { color: #14121f; background: rgba(109,94,248,.08); }
.nav-link::after {
  content:''; position:absolute; left:.85rem; right:.85rem; bottom:.28rem;
  height:2px; border-radius:2px; background: linear-gradient(90deg,#6d5ef8,#22d3ee);
  transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.16,1,.3,1);
}
.nav-link:hover::after { transform: scaleX(1); }

/* Gradient text */
.text-gradient {
  background: linear-gradient(100deg,#6d5ef8 0%,#8f7cff 40%,#22d3ee 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); }
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation-duration: .01ms !important; }
}

/* Kaarten */
.card-hover { transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1), border-color .35s; }
.card-hover:hover { transform: translateY(-6px); }

/* Taalswitcher */
.lang-option { display:flex; align-items:center; gap:.6rem; width:100%; padding:.55rem .7rem; border-radius:.6rem; font-size:.875rem; font-weight:600; color:#443f58; transition: background-color .18s, color .18s; background:transparent; border:0; cursor:pointer; text-align:left; }
.lang-option:hover { background:#f2f0ff; color:#14121f; }
.lang-option.is-active { background:#f2f0ff; color:#5646e0; }

/* Form */
.field {
  width:100%; border-radius:.9rem; border:1.5px solid #d8d6e4; background:#fff;
  padding:.8rem 1rem; font-size:.925rem; color:#14121f; transition: border-color .2s, box-shadow .2s;
}
.field::placeholder { color:#8a85a6; }
.field:focus { outline:none; border-color:#6d5ef8; box-shadow:0 0 0 4px rgba(109,94,248,.15); }

/* Marquee */
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.marquee-track { display:flex; width:max-content; animation: marquee 32s linear infinite; }

/* WhatsApp pulse */
@keyframes pulseRing {
  0% { transform: scale(.9); opacity:.55 }
  70% { transform: scale(1.5); opacity:0 }
  100% { transform: scale(1.5); opacity:0 }
}
.pulse-ring { animation: pulseRing 2.4s cubic-bezier(.16,1,.3,1) infinite; }