/* ============================================================
   Art — animatiile si utilitarele ilustratiilor SVG generate de
   `server/lib/art.js` (productArt, categoryArt, heroPhone, sceneArt).

   Reguli: se animeaza DOAR transform si opacity. Tranzitiile de
   interactiune stau in 120–420ms; plutirea ambientala e lenta
   (5–10s) ca sa nu tresara pagina. Totul se opreste la
   `prefers-reduced-motion: reduce`.

   Atentie: grupurile din SVG care au deja atribut `transform`
   (asezarea obiectelor in scena) NU se animeaza din CSS — un
   `transform` din CSS ar sterge atributul. De aceea art.js
   scoate un grup exterior curat: `.hero-art__phone`, `.hero-orbit`.
   ============================================================ */

/* ── baza ─────────────────────────────────────────────────── */

.art {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

/* Obiectele mici din interiorul SVG-ului se rotesc/scaleaza in jurul
   propriului bounding box, nu al panzei intregi. */
.art__body,
.art__glass,
.art__shadow,
.hero-orbit,
.hero-art__phone {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* Umbra de contact si sticla reactioneaza la hover-ul cardului. */
.art__shadow {
  transition: opacity var(--d-base) var(--ease-smooth), transform var(--d-base) var(--ease-smooth);
}

.art__glass {
  transition: opacity var(--d-slow) var(--ease-smooth), transform var(--d-slow) var(--ease-smooth);
}

/* ── plutire ambientala ───────────────────────────────────── */

@keyframes art-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -2.2%, 0); }
}

@keyframes art-float-wide {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(0, -1.6%, 0) rotate(-0.8deg); }
}

.art--floating {
  animation: art-float 6.5s var(--ease-in-out) infinite;
  will-change: transform;
}

.art--floating-wide {
  animation: art-float-wide 8s var(--ease-in-out) infinite;
  will-change: transform;
}

/* Decalaje ca sa nu pluteasca tot raftul in acelasi ritm. */
.art--delay-1 { animation-delay: 0.4s; }
.art--delay-2 { animation-delay: 0.9s; }
.art--delay-3 { animation-delay: 1.5s; }
.art--delay-4 { animation-delay: 2.1s; }

/* ── stralucire pe sticla la hover ────────────────────────── */

.art--shine .art__glass {
  opacity: 0.75;
}

.art--shine:hover .art__glass,
.card:hover .art--shine .art__glass,
.card:focus-within .art--shine .art__glass,
a:hover .art--shine .art__glass,
a:focus-visible .art--shine .art__glass {
  opacity: 1;
  transform: translateX(14%);
}

/* Obiectul se ridica putin, umbra se strange sub el. */
.card:hover .art--lift,
a:hover .art--lift {
  transform: translateY(-6px);
}

.art--lift {
  transition: transform var(--d-base) var(--ease-out-back);
}

.card:hover .art__shadow,
a:hover .art__shadow {
  opacity: 0.7;
  transform: scale(0.94);
}

/* ── hero ─────────────────────────────────────────────────── */

.hero-art {
  display: block;
  width: 100%;
  max-width: 34rem;
  margin-inline: auto;
}

.hero-art__phone {
  animation: art-float 7.5s var(--ease-in-out) infinite;
  will-change: transform;
}

@keyframes hero-orbit-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(3%, -12%, 0) rotate(2deg); }
}

@keyframes hero-orbit-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-4%, -9%, 0) rotate(-2.5deg); }
}

@keyframes hero-orbit-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(2%, -14%, 0) scale(1.04); }
}

.hero-orbit {
  will-change: transform;
}

.hero-orbit--1 { animation: hero-orbit-a 7s   var(--ease-in-out) infinite; }
.hero-orbit--2 { animation: hero-orbit-b 8.5s var(--ease-in-out) infinite 0.6s; }
.hero-orbit--3 { animation: hero-orbit-c 9.5s var(--ease-in-out) infinite 1.2s; }
.hero-orbit--4 { animation: hero-orbit-b 8s   var(--ease-in-out) infinite 1.8s; }

/* ── scene (stari goale, erori, harta) ────────────────────── */

.art--scene {
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

.art--scene-sm { max-width: 18rem; }
.art--scene-lg { max-width: 40rem; }

/* Cardul de categorie: scena se misca putin sub cursor. */
.art--cat {
  transition: transform var(--d-slow) var(--ease-smooth);
}

.card:hover .art--cat,
a:hover .art--cat,
a:focus-visible .art--cat {
  transform: scale(1.035);
}

/* ── accesibilitate ───────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .art,
  .art--floating,
  .art--floating-wide,
  .art--lift,
  .art--cat,
  .art__glass,
  .art__shadow,
  .hero-art__phone,
  .hero-orbit,
  .hero-orbit--1,
  .hero-orbit--2,
  .hero-orbit--3,
  .hero-orbit--4 {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}