/* ARGIS PRODIMPEX — stiluri globale, animații și stări hover
   Layout-ul este scris inline în index.php (fiecare secțiune e independentă). */

:root {
  --ac-ink: #14120E;
  --ac-paper: #F2ECDF;
  --ac-card: #FAF6EC;
  --ac-kraft: #E3D9C4;
  --ac-brown: #C08A4B;
  --ac-orange: #E0821F;
  --ac-rust: #C0491A;
  --ac-muted: #6E6858;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--ac-paper); color: var(--ac-ink); font-family: Archivo, sans-serif; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: var(--ac-rust); text-decoration: none; transition: color .18s ease; }
a:hover { color: var(--ac-ink); }
::selection { background: var(--ac-orange); color: var(--ac-ink); }
:focus-visible { outline: 2px solid var(--ac-rust); outline-offset: 2px; }

/* ---------- animații ---------- */
@keyframes acRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes acWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes acMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes acFlute { from { background-position: 0 0; } to { background-position: 44px 0; } }
@keyframes acFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-2deg); } }
@keyframes acZoom { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }

[data-reveal] { opacity: 0; transform: translateY(30px); transition: opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1); }
[data-reveal].ac-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- imagini ---------- */
.ac-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,.8,.3,1); }
.ac-card:hover .ac-img { transform: scale(1.06); }
.ac-ph {
  position: absolute; inset: 0; width: 100%; height: 100%; display: grid; place-items: center; text-align: center; padding: 20px;
  background: repeating-linear-gradient(135deg, rgba(20,18,14,.05) 0 10px, transparent 10px 20px);
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; color: var(--ac-muted);
}

/* ---------- configurator ---------- */
.ac-face {
  position: absolute; left: 50%; top: 50%;
  border: 1px solid rgba(20,18,14,.35);
  background-image: repeating-linear-gradient(90deg, rgba(20,18,14,.12) 0 2px, transparent 2px 7px);
  transition: width .35s cubic-bezier(.16,.8,.3,1), height .35s cubic-bezier(.16,.8,.3,1), margin .35s cubic-bezier(.16,.8,.3,1), transform .35s cubic-bezier(.16,.8,.3,1);
}
.ac-opt {
  border: 1px solid rgba(20,18,14,.22); background: transparent; color: #45402F;
  padding: 10px 14px; font-family: Archivo, sans-serif; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: all .18s ease;
}
.ac-opt:hover { border-color: var(--ac-ink); }
.ac-opt.ac-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-paper); }
.ac-range { -webkit-appearance: none; appearance: none; background: rgba(20,18,14,.16); border-radius: 2px; }
.ac-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ac-rust); border: 2px solid var(--ac-paper); cursor: grab;
  box-shadow: 0 2px 6px rgba(20,18,14,.3); transition: transform .15s ease;
}
.ac-range::-webkit-slider-thumb:active { transform: scale(1.15); }
.ac-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--ac-rust); border: 2px solid var(--ac-paper); cursor: grab; }

/* ---------- stări hover / focus (declarate în markup ca data-hover / data-focus) ---------- */
[data-hover="background: #14120E"]:hover { background: #14120E !important; }
[data-hover="background: #C0491A; transform: translateY(-2px)"]:hover { background: #C0491A !important; transform: translateY(-2px) !important; }
[data-hover="background: #14120E; color: #F2ECDF"]:hover { background: #14120E !important; color: #F2ECDF !important; }
[data-hover="border-color: #14120E; transform: translateY(-6px); box-shadow: 14px 14px 0 rgba(20,18,14,.1)"]:hover { border-color: #14120E !important; transform: translateY(-6px) !important; box-shadow: 14px 14px 0 rgba(20,18,14,.1) !important; }
[data-hover="background: #14120E; transform: translateY(-2px)"]:hover { background: #14120E !important; transform: translateY(-2px) !important; }
[data-hover="background: #14120E; color: #F2ECDF; transform: translateY(-2px)"]:hover { background: #14120E !important; color: #F2ECDF !important; transform: translateY(-2px) !important; }
[data-hover="background: #E0821F; color: #14120E; border-color: #E0821F"]:hover { background: #E0821F !important; color: #14120E !important; border-color: #E0821F !important; }
[data-hover="background: #F2ECDF; transform: translateY(-2px)"]:hover { background: #F2ECDF !important; transform: translateY(-2px) !important; }
[data-focus="border-color: #E0821F; outline: none"]:focus { border-color: #E0821F !important; outline: none !important; }