/* LIGHTING SECTION */

.section--lighting{
  background:#f3f7f4;
  padding-top:36px;
  padding-bottom:30px;
}

/* Hero */
.lighting .lg-hero{ text-align:center; }
.lighting .lg-title{
  margin:0 0 8px; color:var(--green-700); font-weight:900; letter-spacing:.2px;
  font-size:clamp(22px, 2.2vw + 12px, 34px);
}
.lighting .lg-sub{
  margin:0 auto 12px; max-width:920px; color:#5b6b78;
  font-size:clamp(14px, .45vw + 12px, 16px); line-height:1.65;
}

/* Badges row */
.lighting .lg-badges{
  display:inline-flex; gap:10px; align-items:center; justify-content:center;
  flex-wrap:wrap; margin:4px auto 2px; padding:0; list-style:none;
}

/* ===== Chips with continuous, de-synced shine ===== */
.lighting .chip{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px;
  background:#e9f2ec; color:#0f3d20; border:1px solid #dfece4;
  font-weight:800; font-size:13px; white-space:nowrap;
  box-shadow:0 6px 14px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}

/* Base sweep (linear + continuous) */
.lighting .chip::after{
  content:"";
  position:absolute; inset:-2px; pointer-events:none;
  background: linear-gradient(100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,.45) 46%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.45) 54%,
    rgba(255,255,255,0) 80%);
  transform: translateX(-150%);
  animation: chip-sweep 3.2s linear infinite;  /* linear = tuloy-tuloy */
  mix-blend-mode:screen; opacity:.75; will-change:transform;
}

/* De-sync: iba-ibang duration + negative delay para hindi “pasahan” tingnan */
.lighting .chip:nth-child(4n+1)::after{ animation-duration:3.6s; animation-delay:-0.9s; }
.lighting .chip:nth-child(4n+2)::after{ animation-duration:3.1s; animation-delay:-1.7s; }
.lighting .chip:nth-child(4n+3)::after{ animation-duration:3.8s; animation-delay:-2.4s; }
.lighting .chip:nth-child(4n+4)::after{ animation-duration:3.3s; animation-delay:-0.4s; }

@keyframes chip-sweep { to { transform: translateX(150%); } }

/* Subtle sparkles for depth (static, hindi sabay sa sweep) */
.lighting .chip::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    radial-gradient(1px 1px at 15% 25%, rgba(255,255,255,.22) 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.18) 50%, transparent 51%),
    radial-gradient(1px 1px at 40% 80%, rgba(255,255,255,.14) 50%, transparent 51%);
  background-repeat:no-repeat; opacity:.28;
}

/* Hover: slight lift + a touch brighter (walang color flip) */
.lighting .chip:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.07);
  background-color:#f2f8f4; border-color:#d6eadf;
}

/* Reduced motion: panatilihin pero sobrang bagal */
@media (prefers-reduced-motion:reduce){
  .lighting .chip::after{
    animation-duration:8s;
  }
}

/* Icon wrapper + Iconify */
.lighting .chip .ico{
  display:inline-grid; place-items:center;
  width:18px; height:18px; line-height:1;
}
.lighting .chip .iconify{ color:currentColor; vertical-align:middle; stroke-width:2; }

/* Phones */
@media (max-width:480px){
  .lighting .lg-badges{ gap:8px; }
  .lighting .chip{ padding:7px 10px; font-size:12.5px; }
}
