/* Görsel efektler. lib/effects.js içindeki EFFECTS = false yapılırsa bu dosya hiç yüklenmez. */

@property --glow { syntax: '<color>'; inherits: true; initial-value: #c8321d; }

/* ---------- Ana sayfa üst bölüm: renk değiştiren araba ---------- */
.hero-fx {
  --glow: var(--paint, #c8321d);
  background:
    radial-gradient(55% 75% at 78% 58%, color-mix(in srgb, var(--glow) 32%, transparent), transparent 72%),
    var(--ink);
  transition: --glow 1.2s ease;
}
.hero-fx .hero-in { display: grid; gap: 20px; padding-bottom: 40px; }
@media (min-width: 900px) {
  .hero-fx .hero-in { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 32px; padding-bottom: 56px; }
}
.hero-visual { width: 100%; max-width: 560px; margin: 0 auto; }
.car { display: block; width: 100%; height: auto; overflow: visible; animation: car-float 6s ease-in-out infinite; }
@keyframes car-float { 50% { transform: translateY(-5px); } }
.car .shine { transform: skewX(-22deg); animation: car-shine 5.5s ease-in-out infinite 1s; }
@keyframes car-shine { 0% { transform: skewX(-22deg) translateX(0); } 55%, 100% { transform: skewX(-22deg) translateX(980px); } }
.car .flakes { mix-blend-mode: screen; opacity: 0.12; animation: car-twinkle 2.6s ease-in-out infinite alternate; }
.car .flakes-b { animation-delay: -1.3s; }
@keyframes car-twinkle { from { opacity: 0.03; } to { opacity: 0.2; } }

.paint-pick { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 14px; opacity: 0; transition: opacity 0.5s; }
.fx-ready .paint-pick { opacity: 1; }
.swatches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.swatch {
  width: 34px; height: 34px; padding: 0; border-radius: 50%; cursor: pointer;
  background: radial-gradient(circle at 34% 30%, var(--l), var(--b) 48%, var(--d));
  border: 2px solid rgba(255, 255, 255, 0.28);
  transition: transform 0.15s;
}
.swatch:hover { transform: scale(1.1); }
.swatch[aria-pressed='true'] { outline: 2px solid #e9a23b; outline-offset: 3px; }
.swatch:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.paint-name { margin: 0; font-size: 0.95rem; color: #c9ccd2; }
.paint-name strong { color: #fff; }
@media (max-width: 480px) { .swatch { width: 30px; height: 30px; } .swatches { gap: 9px; } }

/* ---------- Üst bölümün altından akan boya damlaları ---------- */
.drips { position: relative; z-index: 1; height: 48px; margin-bottom: -32px; pointer-events: none; }
.drips span { position: absolute; inset: 0; transform-origin: top; }
.drip-ink {
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48'%3E%3Cpath d='M0 0H320V10Q300 10 298 16V30A7 7 0 0 1 284 30V16Q282 10 270 10H215Q205 10 204 14V22A5 5 0 0 1 194 22V14Q193 10 183 10H120Q110 10 109 16V38A8 8 0 0 1 93 38V16Q92 10 82 10H45Q38 10 37 13V18A4 4 0 0 1 29 18V13Q28 10 21 10H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 48px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48'%3E%3Cpath d='M0 0H320V10Q300 10 298 16V30A7 7 0 0 1 284 30V16Q282 10 270 10H215Q205 10 204 14V22A5 5 0 0 1 194 22V14Q193 10 183 10H120Q110 10 109 16V38A8 8 0 0 1 93 38V16Q92 10 82 10H45Q38 10 37 13V18A4 4 0 0 1 29 18V13Q28 10 21 10H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 48px;
  animation: drip-in 1.8s cubic-bezier(0.3, 0.7, 0.3, 1) both;
}
.drip-paint {
  background: var(--paint, #c8321d);
  transition: background-color 0.8s;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48'%3E%3Cpath d='M0 0H320V4H262Q256 4 256 10V30A6 6 0 0 1 244 30V10Q244 4 238 4H162Q156 4 156 11V38A7 7 0 0 1 142 38V11Q142 4 136 4H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 48px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='48'%3E%3Cpath d='M0 0H320V4H262Q256 4 256 10V30A6 6 0 0 1 244 30V10Q244 4 238 4H162Q156 4 156 11V38A7 7 0 0 1 142 38V11Q142 4 136 4H0Z'/%3E%3C/svg%3E") repeat-x 0 0 / 320px 48px;
}
.drip-paint.grow { animation: drip-in 1.6s cubic-bezier(0.3, 0.7, 0.3, 1); }
@keyframes drip-in { from { transform: scaleY(0.25); } }

/* ---------- Kaydırınca: sprey başlıklar ve sırayla gelen kartlar ---------- */
.fx-ready .spray { position: relative; padding-bottom: 12px; opacity: 0; filter: blur(8px); transform: translateY(6px); transition: opacity 0.7s, filter 0.9s, transform 0.7s; }
.fx-ready .spray.in { opacity: 1; filter: none; transform: none; }
.fx-ready .spray::after {
  content: ''; position: absolute; left: -2px; bottom: 0; width: 120px; height: 12px;
  background: var(--paint, var(--accent));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M3 6Q30 2 60 4.5T118 4.5L116 8.5Q90 10.5 60 9T4 9.5Z'/%3E%3Cg%3E%3Ccircle cx='8' cy='2' r='.9'/%3E%3Ccircle cx='24' cy='11' r='.7'/%3E%3Ccircle cx='47' cy='1.5' r='.8'/%3E%3Ccircle cx='71' cy='11' r='.9'/%3E%3Ccircle cx='96' cy='2' r='.7'/%3E%3Ccircle cx='112' cy='11' r='.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='12'%3E%3Cpath d='M3 6Q30 2 60 4.5T118 4.5L116 8.5Q90 10.5 60 9T4 9.5Z'/%3E%3Cg%3E%3Ccircle cx='8' cy='2' r='.9'/%3E%3Ccircle cx='24' cy='11' r='.7'/%3E%3Ccircle cx='47' cy='1.5' r='.8'/%3E%3Ccircle cx='71' cy='11' r='.9'/%3E%3Ccircle cx='96' cy='2' r='.7'/%3E%3Ccircle cx='112' cy='11' r='.8'/%3E%3C/g%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s cubic-bezier(0.6, 0, 0.2, 1) 0.3s, background-color 0.8s;
}
.fx-ready .spray.in::after { clip-path: inset(0 0 0 0); }

.fx-ready .reveal { opacity: 0; translate: 0 18px; transition: opacity 0.6s, translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--d, 0) * 70ms); }
.fx-ready .reveal.in { opacity: 1; translate: none; }

/* Hareketi azalt ayarı açıksa efektler durur, içerik hemen görünür */
@media (prefers-reduced-motion: reduce) {
  .car, .car .shine, .car .flakes, .drip-ink, .drip-paint.grow { animation: none; }
  .fx-ready .spray, .fx-ready .reveal { opacity: 1; filter: none; transform: none; translate: none; transition: none; }
  .fx-ready .spray::after { clip-path: none; transition: none; }
}