/* ==========================================================================
   photo-filters.css
   Kumpulan preset efek foto (CSS filter) untuk Lope Lope Photobooth & sejenis.
   Cara nambah filter baru: cukup tambah 1 blok baru mengikuti pola di bawah,
   lalu tambahkan entry-nya juga di photo-filters.js (array FILTER_LIST) dengan
   `key` yang SAMA PERSIS (tanpa prefix 'fx-').
   ========================================================================== */

/* ---------- UI: carousel & thumbnail chip ala Instagram ---------- */

.lf-strip{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:6px 14px 10px;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
}
.lf-strip::-webkit-scrollbar{ height:6px; }
.lf-strip::-webkit-scrollbar-thumb{ background:linear-gradient(#ff5fa2,#ff2e88); border-radius:99px; }

.lf-item{
  flex:0 0 auto;
  scroll-snap-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

.lf-thumb{
  width:58px;
  height:58px;
  border-radius:50%;
  overflow:hidden;
  position:relative;
  background:#ffd6ec;
  border:3px solid #ffffff;
  box-shadow:0 4px 10px -4px rgba(255,46,136,.45);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.lf-item:hover .lf-thumb{ transform:translateY(-2px) scale(1.05); }
.lf-item.is-active .lf-thumb{
  border-color:#ff2e88;
  box-shadow:0 0 0 3px rgba(255,46,136,.35), 0 6px 14px -4px rgba(255,46,136,.6);
  transform:translateY(-2px) scale(1.08);
}

.lf-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scaleX(-1);
}

.lf-label{
  font-family:"Nunito","Fredoka",sans-serif;
  font-size:10px;
  font-weight:700;
  color:#7a3560;
  max-width:64px;
  text-align:center;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  opacity:.75;
}
.lf-item.is-active .lf-label{ color:#ff2e88; opacity:1; }

.lf-group-label{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  padding:0 4px;
  font-family:"Fredoka",sans-serif;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  color:#a34fd1;
  writing-mode:horizontal-tb;
}

/* ---------- Preset efek (source of truth untuk nilai filter) ---------- */

/* == Basic == */
.fx-normal{ filter: none; }

/* == Hitam Putih == */
.fx-bw-soft{ filter: grayscale(1) contrast(1.0) brightness(1.0); }
.fx-bw-classic{ filter: grayscale(1) contrast(1.08) brightness(1.0); }
.fx-bw-deep{ filter: grayscale(1) contrast(1.2) brightness(0.95); }
.fx-bw-hicon{ filter: grayscale(1) contrast(1.35) brightness(1.0); }
.fx-bw-fade{ filter: grayscale(1) contrast(0.9) brightness(1.1); }
.fx-bw-noir{ filter: grayscale(1) contrast(1.3) brightness(0.85); }
.fx-bw-silver{ filter: grayscale(1) contrast(1.15) brightness(1.05); }
.fx-bw-ash{ filter: grayscale(1) contrast(1.05) brightness(0.9); }
.fx-bw-smoke{ filter: grayscale(1) contrast(1.1) brightness(1.15); }
.fx-bw-ink{ filter: grayscale(1) contrast(1.4) brightness(0.8); }

/* == Sepia & Vintage == */
.fx-vintage-01{ filter: sepia(0.3) contrast(1.04) brightness(1.02) saturate(1.13); }
.fx-vintage-02{ filter: sepia(0.35) contrast(1.03) brightness(1.04) saturate(1.16); }
.fx-vintage-03{ filter: sepia(0.4) contrast(1.02) brightness(1.06) saturate(1.19); }
.fx-vintage-04{ filter: sepia(0.45) contrast(1.01) brightness(1.0) saturate(1.22); }
.fx-vintage-05{ filter: sepia(0.5) contrast(1.0) brightness(1.02) saturate(1.25); }
.fx-vintage-06{ filter: sepia(0.55) contrast(0.99) brightness(1.04) saturate(1.28); }
.fx-vintage-07{ filter: sepia(0.6) contrast(0.98) brightness(1.06) saturate(1.31); }
.fx-vintage-08{ filter: sepia(0.65) contrast(0.97) brightness(1.0) saturate(1.34); }
.fx-vintage-09{ filter: sepia(0.7) contrast(0.96) brightness(1.02) saturate(1.37); }
.fx-vintage-10{ filter: sepia(0.75) contrast(0.95) brightness(1.04) saturate(1.4); }
.fx-vintage-11{ filter: sepia(0.8) contrast(0.94) brightness(1.06) saturate(1.43); }
.fx-vintage-12{ filter: sepia(0.85) contrast(0.93) brightness(1.0) saturate(1.46); }

/* == Warm == */
.fx-warm-01{ filter: hue-rotate(-3deg) saturate(1.14) brightness(1.03); }
.fx-warm-02{ filter: hue-rotate(-4deg) saturate(1.18) brightness(1.04); }
.fx-warm-03{ filter: hue-rotate(-5deg) saturate(1.22) brightness(1.05); }
.fx-warm-04{ filter: hue-rotate(-6deg) saturate(1.26) brightness(1.06); }
.fx-warm-05{ filter: hue-rotate(-7deg) saturate(1.3) brightness(1.02); }
.fx-warm-06{ filter: hue-rotate(-8deg) saturate(1.34) brightness(1.03); }
.fx-warm-07{ filter: hue-rotate(-9deg) saturate(1.38) brightness(1.04); }
.fx-warm-08{ filter: hue-rotate(-10deg) saturate(1.42) brightness(1.05); }
.fx-warm-09{ filter: hue-rotate(-11deg) saturate(1.46) brightness(1.06); }
.fx-warm-10{ filter: hue-rotate(-12deg) saturate(1.5) brightness(1.02); }
.fx-warm-11{ filter: hue-rotate(-13deg) saturate(1.54) brightness(1.03); }
.fx-warm-12{ filter: hue-rotate(-14deg) saturate(1.58) brightness(1.04); }

/* == Cool == */
.fx-cool-01{ filter: hue-rotate(6deg) saturate(1.08) brightness(1.01) contrast(1.03); }
.fx-cool-02{ filter: hue-rotate(8deg) saturate(1.11) brightness(1.03) contrast(1.03); }
.fx-cool-03{ filter: hue-rotate(10deg) saturate(1.14) brightness(1.04) contrast(1.03); }
.fx-cool-04{ filter: hue-rotate(12deg) saturate(1.17) brightness(1.0) contrast(1.03); }
.fx-cool-05{ filter: hue-rotate(14deg) saturate(1.2) brightness(1.01) contrast(1.03); }
.fx-cool-06{ filter: hue-rotate(16deg) saturate(1.23) brightness(1.03) contrast(1.03); }
.fx-cool-07{ filter: hue-rotate(18deg) saturate(1.26) brightness(1.04) contrast(1.03); }
.fx-cool-08{ filter: hue-rotate(20deg) saturate(1.29) brightness(1.0) contrast(1.03); }
.fx-cool-09{ filter: hue-rotate(22deg) saturate(1.32) brightness(1.01) contrast(1.03); }
.fx-cool-10{ filter: hue-rotate(24deg) saturate(1.35) brightness(1.03) contrast(1.03); }
.fx-cool-11{ filter: hue-rotate(26deg) saturate(1.38) brightness(1.04) contrast(1.03); }
.fx-cool-12{ filter: hue-rotate(28deg) saturate(1.41) brightness(1.0) contrast(1.03); }

/* == Vivid == */
.fx-vivid-01{ filter: saturate(1.48) contrast(1.12); }
.fx-vivid-02{ filter: saturate(1.56) contrast(1.14); }
.fx-vivid-03{ filter: saturate(1.64) contrast(1.16); }
.fx-vivid-04{ filter: saturate(1.72) contrast(1.18); }
.fx-vivid-05{ filter: saturate(1.8) contrast(1.2); }
.fx-vivid-06{ filter: saturate(1.88) contrast(1.22); }
.fx-vivid-07{ filter: saturate(1.96) contrast(1.24); }
.fx-vivid-08{ filter: saturate(2.04) contrast(1.26); }
.fx-vivid-09{ filter: saturate(2.12) contrast(1.28); }
.fx-vivid-10{ filter: saturate(2.2) contrast(1.3); }

/* == Faded & Dreamy == */
.fx-faded-01{ filter: contrast(0.93) brightness(1.06) saturate(0.88); }
.fx-faded-02{ filter: contrast(0.91) brightness(1.08) saturate(0.86); }
.fx-faded-03{ filter: contrast(0.89) brightness(1.09) saturate(0.84); }
.fx-faded-04{ filter: contrast(0.87) brightness(1.11) saturate(0.82); }
.fx-faded-05{ filter: contrast(0.85) brightness(1.12) saturate(0.8); }
.fx-faded-06{ filter: contrast(0.83) brightness(1.14) saturate(0.78); }
.fx-faded-07{ filter: contrast(0.81) brightness(1.16) saturate(0.76); }
.fx-faded-08{ filter: contrast(0.79) brightness(1.17) saturate(0.74); }
.fx-faded-09{ filter: contrast(0.77) brightness(1.19) saturate(0.72); }
.fx-faded-10{ filter: contrast(0.75) brightness(1.2) saturate(0.7); }
.fx-faded-11{ filter: contrast(0.73) brightness(1.22) saturate(0.68); }
.fx-faded-12{ filter: contrast(0.71) brightness(1.23) saturate(0.66); }

/* == Moody & Cinematic == */
.fx-moody-01{ filter: hue-rotate(-1deg) contrast(1.12) brightness(0.95) saturate(0.84); }
.fx-moody-02{ filter: hue-rotate(-2deg) contrast(1.14) brightness(0.94) saturate(0.83); }
.fx-moody-03{ filter: hue-rotate(-3deg) contrast(1.16) brightness(0.93) saturate(0.82); }
.fx-moody-04{ filter: hue-rotate(-4deg) contrast(1.18) brightness(0.92) saturate(0.81); }
.fx-moody-05{ filter: hue-rotate(-5deg) contrast(1.2) brightness(0.91) saturate(0.8); }
.fx-moody-06{ filter: hue-rotate(0deg) contrast(1.22) brightness(0.9) saturate(0.79); }
.fx-moody-07{ filter: hue-rotate(-1deg) contrast(1.24) brightness(0.89) saturate(0.78); }
.fx-moody-08{ filter: hue-rotate(-2deg) contrast(1.26) brightness(0.88) saturate(0.77); }
.fx-moody-09{ filter: hue-rotate(-3deg) contrast(1.28) brightness(0.87) saturate(0.76); }
.fx-moody-10{ filter: hue-rotate(-4deg) contrast(1.3) brightness(0.86) saturate(0.75); }
.fx-moody-11{ filter: hue-rotate(-5deg) contrast(1.32) brightness(0.85) saturate(0.74); }
.fx-moody-12{ filter: hue-rotate(0deg) contrast(1.34) brightness(0.84) saturate(0.73); }

/* == Pastel == */
.fx-pastel-01{ filter: hue-rotate(3deg) brightness(1.09) saturate(0.79) contrast(0.95); }
.fx-pastel-02{ filter: hue-rotate(6deg) brightness(1.11) saturate(0.77) contrast(0.95); }
.fx-pastel-03{ filter: hue-rotate(9deg) brightness(1.12) saturate(0.76) contrast(0.95); }
.fx-pastel-04{ filter: hue-rotate(12deg) brightness(1.14) saturate(0.74) contrast(0.95); }
.fx-pastel-05{ filter: hue-rotate(15deg) brightness(1.16) saturate(0.73) contrast(0.95); }
.fx-pastel-06{ filter: hue-rotate(18deg) brightness(1.17) saturate(0.71) contrast(0.95); }
.fx-pastel-07{ filter: hue-rotate(21deg) brightness(1.19) saturate(0.7) contrast(0.95); }
.fx-pastel-08{ filter: hue-rotate(24deg) brightness(1.2) saturate(0.68) contrast(0.95); }
.fx-pastel-09{ filter: hue-rotate(27deg) brightness(1.22) saturate(0.67) contrast(0.95); }
.fx-pastel-10{ filter: hue-rotate(30deg) brightness(1.23) saturate(0.65) contrast(0.95); }

/* == Duotone == */
.fx-duo-01{ filter: sepia(0.4) hue-rotate(30deg) saturate(1.8) contrast(1.1); }
.fx-duo-02{ filter: sepia(0.4) hue-rotate(60deg) saturate(1.8) contrast(1.1); }
.fx-duo-03{ filter: sepia(0.4) hue-rotate(90deg) saturate(1.8) contrast(1.1); }
.fx-duo-04{ filter: sepia(0.4) hue-rotate(120deg) saturate(1.8) contrast(1.1); }
.fx-duo-05{ filter: sepia(0.4) hue-rotate(150deg) saturate(1.8) contrast(1.1); }
.fx-duo-06{ filter: sepia(0.4) hue-rotate(180deg) saturate(1.8) contrast(1.1); }
.fx-duo-07{ filter: sepia(0.4) hue-rotate(210deg) saturate(1.8) contrast(1.1); }
.fx-duo-08{ filter: sepia(0.4) hue-rotate(240deg) saturate(1.8) contrast(1.1); }
.fx-duo-09{ filter: sepia(0.4) hue-rotate(270deg) saturate(1.8) contrast(1.1); }
.fx-duo-10{ filter: sepia(0.4) hue-rotate(300deg) saturate(1.8) contrast(1.1); }

/* == Fun & Ekstrem == */
.fx-fun-invert{ filter: invert(0.85) hue-rotate(180deg); }
.fx-fun-neon{ filter: saturate(2.2) contrast(1.3) hue-rotate(20deg); }
.fx-fun-ghost{ filter: grayscale(0.7) brightness(1.4) contrast(0.8); }
.fx-fun-thermal{ filter: invert(0.2) hue-rotate(280deg) saturate(3); }
.fx-fun-toon{ filter: saturate(2.5) contrast(1.6) brightness(1.05); }
.fx-fun-dream{ filter: hue-rotate(300deg) saturate(1.6) brightness(1.15) blur(0.4px); }