/* ============================================================
   INTENSE GRAPHIC DESIGNER — zestaw animacji do Elementora
   Dodajesz efekt widżetowi wpisując klasę w polu „CSS Classes"
   (Zaawansowane → CSS Classes). Bez JS / reduced-motion = treść
   po prostu widoczna (nic się nie psuje, dobre dla SEO).
   ============================================================ */

/* stany początkowe włączają się dopiero, gdy JS potwierdzi animacje */
html.gid-anim .gid-reveal,
html.gid-anim .gid-reveal-l,
html.gid-anim .gid-reveal-r,
html.gid-anim .gid-zoom { opacity: 0; will-change: transform, opacity; }
html.gid-anim .gid-reveal   { transform: translateY(34px); }
html.gid-anim .gid-reveal-l { transform: translateX(-40px); }
html.gid-anim .gid-reveal-r { transform: translateX(40px); }
html.gid-anim .gid-zoom     { transform: scale(.92); }
html.gid-anim .gid-stagger > * { opacity: 0; transform: translateY(26px); will-change: transform, opacity; }
html.gid-anim .gid-split .gid-word { display: inline-block; overflow: hidden; }
html.gid-anim .gid-split .gid-word > span { display: inline-block; transform: translateY(110%); }

/* magnetyczny przycisk / element */
.gid-magnetic { will-change: transform; }

/* tilt 3D (karty portfolio) */
.gid-tilt { transform-style: preserve-3d; will-change: transform; transition: box-shadow .3s ease; }
.gid-tilt:hover { box-shadow: 0 30px 60px rgba(0,0,0,.25); }

/* ---------- marquee (przewijający się pas: logotypy / hasła) ---------- */
.gid-marquee { overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.gid-marquee__track { display: inline-flex; gap: 3rem; white-space: nowrap; align-items: center; animation: gid-marquee var(--gid-marquee-speed, 28s) linear infinite; }
.gid-marquee:hover .gid-marquee__track { animation-play-state: paused; }
@keyframes gid-marquee { to { transform: translateX(-50%); } }

/* ---------- karta portfolio (opcjonalny widżet HTML) ---------- */
.gid-card { position: relative; overflow: hidden; border-radius: 16px; display: block; background: #111; }
.gid-card img, .gid-card .gid-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.gid-card:hover img, .gid-card:hover .gid-card__img { transform: scale(1.06); }
.gid-card__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; gap: 4px;
  background: linear-gradient(0deg, rgba(0,0,0,.72), rgba(0,0,0,0) 60%); opacity: 0; transform: translateY(12px); transition: .45s cubic-bezier(.22,.61,.36,1); color: #fff; }
.gid-card:hover .gid-card__overlay { opacity: 1; transform: translateY(0); }
.gid-card__cat { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; opacity: .8; }
.gid-card__title { font-size: 1.15rem; font-weight: 600; }

/* ---------- filtry portfolio ---------- */
.gid-filters { display: flex; flex-wrap: wrap; gap: 10px; }
.gid-chip { cursor: pointer; border: 1px solid rgba(0,0,0,.18); background: transparent; color: inherit; border-radius: 999px; padding: 9px 20px; font: inherit; font-size: .85rem; letter-spacing: .02em; transition: .25s; }
.gid-chip:hover, .gid-chip.is-active { background: currentColor; }
.gid-chip.is-active { color: #fff; background: #111; border-color: #111; }
.gid-hide { display: none !important; }

/* pomocnicze */
.gid-cursor { position: fixed; top: 0; left: 0; width: 12px; height: 12px; border-radius: 50%; background: currentColor; pointer-events: none; z-index: 9999; transform: translate(-50%,-50%); mix-blend-mode: difference; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html.gid-anim .gid-reveal, html.gid-anim .gid-reveal-l, html.gid-anim .gid-reveal-r,
  html.gid-anim .gid-zoom, html.gid-anim .gid-stagger > * { opacity: 1 !important; transform: none !important; }
  html.gid-anim .gid-split .gid-word > span { transform: none !important; }
  .gid-marquee__track { animation: none !important; }
  .gid-cursor { display: none !important; }
}
@media (max-width: 768px) {
  .gid-cursor { display: none; }
}