/* ===== Adira Bionics — landing page styles ===== */

:root {
  --page: #f0f0ee;
  --pill: #ededed;
  --ink: #111827;          /* gray-900 */
  --warm: #d97757;         /* warm terracotta secondary accent */
  --warm-600: #c5613f;
}

* { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* hide scrollbar chrome but keep scroll */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d4d4d0; border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- striped placeholder ---------- */
.striped {
  position: relative;
  overflow: hidden;
  background-color: #e6e6e2;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(0,0,0,0.045) 0,
    rgba(0,0,0,0.045) 1px,
    transparent 1px,
    transparent 11px
  );
}
.striped--dark {
  background-color: #1c1c1b;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.05) 0,
    rgba(255,255,255,0.05) 1px,
    transparent 1px,
    transparent 11px
  );
}
.striped--blue {
  background-color: #e9eefc;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(59,130,246,0.10) 0,
    rgba(59,130,246,0.10) 1px,
    transparent 1px,
    transparent 11px
  );
}
.striped__label {
  position: absolute;
  left: 14px;
  bottom: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: #9a9a94;
  background: rgba(255,255,255,0.6);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
}
.striped--dark .striped__label { color: #8a8a86; background: rgba(0,0,0,0.35); }

/* ---------- scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(0.94); }
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

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

/* ---------- hero load-in ---------- */
@keyframes heroUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hero-in > * { opacity: 0; animation: heroUp 0.9s cubic-bezier(0.16,1,0.3,1) forwards; }
.hero-in > *:nth-child(1) { animation-delay: 0.15s; }
.hero-in > *:nth-child(2) { animation-delay: 0.30s; }
.hero-in > *:nth-child(3) { animation-delay: 0.45s; }
.hero-in > *:nth-child(4) { animation-delay: 0.60s; }

@keyframes navDrop {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nav-in { animation: navDrop 0.7s cubic-bezier(0.16,1,0.3,1) both; }

/* ---------- floating ---------- */
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.floaty { animation: floaty 6s ease-in-out infinite; }

/* ---------- gradient sheen on dark CTA ---------- */
.sheen { position: relative; overflow: hidden; }
.sheen::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.14) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s ease;
}
.sheen:hover::after { transform: translateX(120%); }

/* fade-in marker used by JS-driven counters etc. */
.count-pop { transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }

/* accordion */
.faq-body {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.16,1,0.3,1);
}
.faq-body.open { grid-template-rows: 1fr; }
.faq-body > div { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-in > * { opacity: 1 !important; animation: none !important; }
  .nav-in { animation: none !important; }
  .marquee { animation: none !important; }
  .floaty { animation: none !important; }
}