/*
  packages/theme/components/feature-marquee.css

  Marquee 2 baris (arah berlawanan) buat nampilin fitur OWLine.
  CSS keyframe murni, translateX loop pakai var(--gap), edge-fade pakai
  gradient mask kiri-kanan. Gantiin sistem "more-chips" (list chip statis)
  yang lama.

  Data 21 fitur ada di packages/data/features.js (window.OWLINE_FEATURES) —
  file ini cuma styling, render-nya lewat script kecil di halaman yang
  makai (lihat komentar di landing/index.html).
*/

.feature-marquee-section{
  position:relative;
  padding:36px 0;
  overflow:hidden;
  /* Murni animasi buat ditonton — gak ada interaksi apapun di section
     ini, jadi tap/scroll di HP gak bakal ke-treat sebagai hover dan
     nge-pause animasinya. */
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}

.feature-marquee-row{
  --gap:22px;
  --duration:70s;
  display:flex;
  gap:var(--gap);
  width:max-content;
  animation:feature-marquee var(--duration) linear infinite;
}

/* Baris kedua jalan arah berlawanan + durasi sedikit beda biar gak
   terasa "cermin" persis satu sama lain */
.feature-marquee-row--reverse{
  animation-direction:reverse;
  --duration:80s;
  margin-top:22px;
}

@keyframes feature-marquee{
  0%{ transform:translateX(0); }
  100%{ transform:translateX(calc(-50% - var(--gap) / 2)); }
}

.feature-card{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:128px;
  height:128px;
  border-radius:16px;
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.06);
}
.feature-card .feature-card-icon{
  width:32px;
  height:32px;
  color:var(--accent);
  display:flex;
  align-items:center;
  justify-content:center;
}
.feature-card .feature-card-icon svg{
  width:100%;
  height:100%;
}
.feature-card .feature-card-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--text-body);
  text-align:center;
  padding:0 8px;
  white-space:normal;
}

@media (prefers-reduced-motion: reduce){
  .feature-marquee-row,
  .feature-marquee-row--reverse{
    animation:none !important;
  }
}