/* =========================================================
   DTRIVIA — dodatkowe animacje (hover + scroll reveal)
   Plik doczepiony niezależnie od głównego bundla Tailwind,
   żeby nie ingerować w wygenerowany plik CSS.
   ========================================================= */

/* ---------- Ogólne płynne przejścia ---------- */
a,
button {
  transition:
    transform .35s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    color .3s ease,
    border-color .3s ease,
    background-color .3s ease;
}

/* ---------- Linki w nawigacji i stopce: delikatne uniesienie ---------- */
nav a:hover,
header a:hover,
footer a:hover {
  transform: translateY(-2px);
}

/* ---------- Karty / bloki z obramowaniem (usługi, realizacje itp.) ---------- */
.border {
  transition:
    transform .45s cubic-bezier(.4, 0, .2, 1),
    box-shadow .45s cubic-bezier(.4, 0, .2, 1),
    border-color .35s ease,
    background-color .35s ease;
}
.border:hover {
  transform: translateY(-8px);
  box-shadow:
    0 24px 48px -16px rgba(255, 107, 0, .28),
    0 0 0 1px rgba(255, 107, 0, .18);
}

/* ---------- Zoom obrazków wewnątrz kart przy najechaniu ---------- */
.border img,
.group img,
a img {
  transition: transform .7s cubic-bezier(.4, 0, .2, 1), filter .4s ease;
}
.border:hover img,
.group:hover img {
  transform: scale(1.07);
  filter: brightness(1.06) saturate(1.05);
}

/* ---------- Przyciski CTA: poświata + uniesienie ---------- */
a[class*="bg-primary"],
button[class*="bg-primary"] {
  transition:
    transform .3s cubic-bezier(.4, 0, .2, 1),
    box-shadow .35s cubic-bezier(.4, 0, .2, 1),
    opacity .3s ease;
}
a[class*="bg-primary"]:hover,
button[class*="bg-primary"]:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 0 0 4px rgba(255, 107, 0, .16),
    0 16px 32px -10px rgba(255, 107, 0, .55);
}

/* ---------- Logo: subtelna poświata ---------- */
img[alt="DTRIVIA logo"],
img[alt="DTRIVIA"] {
  transition: transform .4s ease, filter .4s ease;
}
img[alt="DTRIVIA logo"]:hover,
img[alt="DTRIVIA"]:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px rgba(255, 107, 0, .55));
}

/* ---------- Ikony strzałek / elementy w grupach (group-hover) ---------- */
.group svg {
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.group:hover svg {
  transform: translateX(4px);
}

/* =========================================================
   SCROLL REVEAL — animacja pojawiania się elementów
   po zescrollowaniu do nich (obsługiwane przez js/animations.js)
   ========================================================= */
.reveal-init {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity .8s cubic-bezier(.16, 1, .3, 1),
    transform .8s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal-init.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Warianty kierunku (opcjonalnie wykorzystywane przez JS) */
.reveal-init.reveal-left {
  transform: translateX(-36px);
}
.reveal-init.reveal-left.reveal-visible {
  transform: translateX(0);
}
.reveal-init.reveal-right {
  transform: translateX(36px);
}
.reveal-init.reveal-right.reveal-visible {
  transform: translateX(0);
}
.reveal-init.reveal-scale {
  transform: scale(.92);
}
.reveal-init.reveal-scale.reveal-visible {
  transform: scale(1);
}

/* ---------- Ograniczenie animacji dla osób preferujących mniej ruchu ---------- */
@media (prefers-reduced-motion: reduce) {
  .reveal-init,
  .reveal-init.reveal-left,
  .reveal-init.reveal-right,
  .reveal-init.reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  a,
  button,
  .border,
  .group,
  .border img,
  .group img,
  a img,
  .group svg {
    transition: none !important;
  }
}