/*!
 * itm-obiect-3d.css — obiecte 3D animate pentru paginile de servicii (30 oct 2026)
 * Ionuț: „proporții pe paginile de servicii, animații, obiectele 3D animate".
 *
 * Doar CSS 3D: perspective + transform-style: preserve-3d. Se animează numai
 * transform și opacity. Fără biblioteci, fără pânză, fără WebGL, fără filter.
 * Marcajul îl construiește itm-obiect-3d.js din
 *   <div class="itm-obiect" data-itm-obiect="glob|tinta|bare|straturi|orbite|cub|bule"
 *        data-accent="coral|blue|cyan|violet|lime|pink|nblue|teal" aria-hidden="true"></div>
 * Mărimile sunt în cqi (procente din lățimea obiectului): același obiect are 440 px
 * pe desktop și 200 px pe telefon, fără alt calcul.
 * Culorile vin ca triplete RGB (--o-rgb, --o-rgb2), puse de script din paleta de brand.
 * Mișcare: 10-20 s pe ciclu, easing din brand (--ease-seva, --ease-crestere, --ease-out);
 * rotațiile continue sunt liniare, altfel bucla ar sacada la capăt.
 * Fără mișcare: `prefers-reduced-motion: reduce` lasă obiectul în poza finală (transformul
 * de bază al fiecărei piese). În afara ecranului scriptul pune `.io-pauza`.
 */

.itm-obiect {
  --o-rgb: 255, 92, 53;
  --o-rgb2: 91, 138, 245;
  --o-l1: .62;   /* linie puternică */
  --o-l2: .34;   /* linie discretă */
  --o-f1: .07;   /* umplere discretă */
  --o-f2: .24;   /* umplere puternică */
  --o-ease: var(--ease-seva, cubic-bezier(.25, .8, .25, 1));
  --o-crestere: var(--ease-crestere, cubic-bezier(.22, 1.18, .36, 1));
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1;
  container-type: inline-size; pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
:root[data-theme="light"] .itm-obiect { --o-l1: .9; --o-l2: .58; --o-f1: .12; --o-f2: .34; }

.itm-obiect .io-v {
  position: absolute; inset: 0; perspective: 300cqi; perspective-origin: 50% 45%;
  animation: io-intra .9s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) both;
}
@keyframes io-intra { from { opacity: 0; transform: scale(.92); } }

.itm-obiect .io-halo {
  position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--o-rgb), .15), rgba(var(--o-rgb2), .06) 58%, rgba(var(--o-rgb2), 0));
}
:root[data-theme="light"] .itm-obiect .io-halo {
  background: radial-gradient(closest-side, rgba(var(--o-rgb), .12), rgba(var(--o-rgb2), .05) 58%, rgba(var(--o-rgb2), 0));
}

/* Scena e un punct în centrul obiectului; piesele se așază în jurul lui. */
.itm-obiect .io-s, .itm-obiect .io-g {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d;
}
.itm-obiect .io-g { left: 0; top: 0; }
/* Disc / inel centrat pe punct, de diametru --d. */
.itm-obiect .io-c {
  position: absolute; left: 0; top: 0; box-sizing: border-box; border-radius: 50%;
  width: var(--d); height: var(--d); margin: calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
}
/* Panou dreptunghiular centrat (--w × --h). */
.itm-obiect .io-p {
  position: absolute; left: 0; top: 0; box-sizing: border-box;
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
}
/* Punct de brand: coral, aceeași culoare pe orice accent. */
.itm-obiect .io-coral {
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0, rgba(255, 92, 53, 1) 30%, rgba(204, 58, 24, 1) 80%);
  box-shadow: 0 0 3cqi rgba(255, 92, 53, .55);
}

/* ── GLOB: meridiane rotite în jurul axei, trei paralele, piețe marcate ── */
.itm-obiect .io-glob { transform: rotateY(-24deg); animation: io-glob 20s linear infinite; }
@keyframes io-glob { from { transform: rotateY(-24deg); } to { transform: rotateY(336deg); } }
.itm-obiect .io-mer { --d: 70cqi; border: 1px solid rgba(var(--o-rgb), var(--o-l2)); transform: rotateY(var(--a)); }
.itm-obiect .io-mer.io-m0 { border-color: rgba(var(--o-rgb), var(--o-l1)); }
.itm-obiect .io-par { border: 1px solid rgba(var(--o-rgb2), var(--o-l2)); transform: translateY(var(--y)) rotateX(90deg); }
.itm-obiect .io-par.io-ecuator { border-width: 1.5px; border-color: rgba(var(--o-rgb2), var(--o-l1)); background: rgba(var(--o-rgb2), .04); }
.itm-obiect .io-nod { transform: rotateY(var(--lon)) rotateX(var(--lat)) translateZ(35cqi); }
.itm-obiect .io-nod .io-c { --d: 3.6cqi; }
.itm-obiect .io-und {
  --d: 3.6cqi; border: 1px solid rgba(255, 92, 53, .8); opacity: 0;
  animation: io-und 4s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) infinite; animation-delay: var(--dl, 0s);
}
@keyframes io-und { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.4); opacity: 0; } }

/* ── ȚINTĂ: inele concentrice în trepte, punctul coral deasupra centrului ── */
.itm-obiect[data-itm-obiect="tinta"] .io-s {
  transform: translateY(8cqi) rotateX(56deg) rotateZ(-8deg);
  animation: io-tinta 16s var(--o-ease) infinite alternate;
}
@keyframes io-tinta {
  from { transform: translateY(8cqi) rotateX(50deg) rotateZ(-20deg); }
  to { transform: translateY(8cqi) rotateX(60deg) rotateZ(8deg); }
}
.itm-obiect .io-inel {
  border: 1.5px solid rgba(var(--o-rgb), var(--o-l1)); background: rgba(var(--o-rgb), .07);
  transform: translateZ(var(--z));
}
.itm-obiect .io-inel.io-dash {
  border: 1px dashed rgba(var(--o-rgb2), var(--o-l1)); background: none;
  animation: io-rz 24s linear infinite;
}
.itm-obiect .io-inel.io-dash.io-inv { animation-duration: 18s; animation-direction: reverse; }
@keyframes io-rz {
  from { transform: translateZ(var(--z)) rotate(0deg); }
  to { transform: translateZ(var(--z)) rotate(360deg); }
}
.itm-obiect .io-unda {
  --d: 22cqi; border: 1.5px solid rgba(var(--o-rgb), var(--o-l1)); opacity: 0;
  animation: io-unda 5s var(--ease-out, cubic-bezier(.16, 1, .3, 1)) infinite;
}
@keyframes io-unda { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(3.7); opacity: 0; } }
.itm-obiect .io-tija {
  --w: .6cqi; --h: 22cqi;
  background: linear-gradient(rgba(255, 92, 53, .9), rgba(255, 92, 53, 0));
  transform: translateZ(29cqi) rotateX(-90deg);
}
.itm-obiect .io-varf {
  --d: 9cqi; transform: translateZ(42cqi) rotateX(-56deg);
  animation: io-bob 6s var(--o-ease) infinite alternate;
}
@keyframes io-bob {
  from { transform: translateZ(39cqi) rotateX(-56deg); }
  to { transform: translateZ(45cqi) rotateX(-56deg); }
}

/* ── BARE: cuboide care cresc, pe rând, dintr-o podea în grilă ── */
.itm-obiect[data-itm-obiect="bare"] .io-s {
  transform: rotateX(-20deg) rotateY(-34deg);
  animation: io-bare-s 18s var(--o-ease) infinite alternate;
}
@keyframes io-bare-s {
  from { transform: rotateX(-21deg) rotateY(-44deg); }
  to { transform: rotateX(-16deg) rotateY(-24deg); }
}
.itm-obiect .io-podea {
  --w: 72cqi; --h: 26cqi; border-radius: 1.5cqi;
  border: 1px solid rgba(var(--o-rgb2), var(--o-l2));
  background:
    linear-gradient(rgba(var(--o-rgb2), var(--o-l2)) 1px, transparent 1px) 0 0 / 12.5% 33.3%,
    linear-gradient(90deg, rgba(var(--o-rgb2), var(--o-l2)) 1px, transparent 1px) 0 0 / 12.5% 33.3%,
    rgba(var(--o-rgb2), var(--o-f1));
  transform: translateY(30cqi) rotateX(90deg);
}
.itm-obiect .io-bara {
  transform: translate3d(var(--x), 30cqi, 0) scaleY(1);
  animation: io-bara 12s var(--o-crestere) infinite both; animation-delay: var(--dl, 0s);
}
@keyframes io-bara {
  0% { transform: translate3d(var(--x), 30cqi, 0) scaleY(.08); }
  34% { transform: translate3d(var(--x), 30cqi, 0) scaleY(1); }
  80% { transform: translate3d(var(--x), 30cqi, 0) scaleY(1); animation-timing-function: var(--o-ease); }
  100% { transform: translate3d(var(--x), 30cqi, 0) scaleY(.08); }
}
.itm-obiect .io-bara > div {
  position: absolute; box-sizing: border-box; border: 1px solid rgba(var(--o-rgb), var(--o-l1));
  width: var(--w); height: var(--h); left: calc(var(--w) / -2); top: calc(var(--h) * -1);
}
.itm-obiect .io-bara .io-fa { background: rgba(var(--o-rgb), var(--o-f2)); transform: translateZ(calc(var(--w) / 2)); }
.itm-obiect .io-bara .io-sp { background: rgba(var(--o-rgb), var(--o-f1)); transform: rotateY(180deg) translateZ(calc(var(--w) / 2)); }
.itm-obiect .io-bara .io-dr { background: rgba(var(--o-rgb), .16); transform: rotateY(90deg) translateZ(calc(var(--w) / 2)); }
.itm-obiect .io-bara .io-st { background: rgba(var(--o-rgb), .11); transform: rotateY(-90deg) translateZ(calc(var(--w) / 2)); }
.itm-obiect .io-bara .io-sus {
  height: var(--w); top: calc(var(--h) * -1 - var(--w) / 2);
  background: rgba(var(--o-rgb), .5); transform: rotateX(90deg);
}
.itm-obiect .io-pisc {
  --d: 7cqi; transform: translate3d(var(--x), var(--y), 0) rotateY(34deg) rotateX(20deg);
  animation: io-pisc 12s linear infinite both; animation-delay: var(--dl, 0s);
}
@keyframes io-pisc { 0%, 30% { opacity: 0; } 40%, 76% { opacity: 1; } 86%, 100% { opacity: 0; } }

/* ── STRATURI: panouri izometrice care se depărtează și se strâng ── */
.itm-obiect[data-itm-obiect="straturi"] .io-s {
  transform: rotateX(57deg) rotateZ(-42deg);
  animation: io-str-s 20s var(--o-ease) infinite alternate;
}
@keyframes io-str-s {
  from { transform: rotateX(58deg) rotateZ(-50deg); }
  to { transform: rotateX(54deg) rotateZ(-34deg); }
}
.itm-obiect .io-strat {
  --w: 48cqi; --h: 48cqi; border-radius: 2cqi;
  border: 1px solid rgba(var(--o-rgb), var(--o-l1)); background-color: rgba(var(--o-rgb), var(--o-f1));
  transform: translateZ(calc(var(--k) * 12cqi));
  animation: io-strat 10s var(--o-ease) infinite alternate;
}
@keyframes io-strat {
  from { transform: translateZ(calc(var(--k) * 4cqi)); }
  to { transform: translateZ(calc(var(--k) * 14cqi)); }
}
.itm-obiect .io-strat::before, .itm-obiect .io-strat::after { content: ""; position: absolute; box-sizing: border-box; }
.itm-obiect .io-strat-0 {
  background-image:
    linear-gradient(rgba(var(--o-rgb), var(--o-l2)) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--o-rgb), var(--o-l2)) 1px, transparent 1px);
  background-size: 12.5% 12.5%;
}
.itm-obiect .io-strat-1::before { left: 10%; right: 10%; top: 10%; height: 14%; border-radius: 1cqi; background: rgba(var(--o-rgb), var(--o-f2)); }
.itm-obiect .io-strat-1::after { left: 10%; right: 44%; top: 34%; bottom: 10%; border-radius: 1cqi; border: 1px dashed rgba(var(--o-rgb), var(--o-l1)); }
.itm-obiect .io-strat-2 { border-color: rgba(var(--o-rgb2), var(--o-l1)); background-color: rgba(var(--o-rgb2), var(--o-f1)); }
.itm-obiect .io-strat-2::before { left: 12%; top: 14%; width: 34%; height: 34%; border-radius: 50%; border: 1px solid rgba(var(--o-rgb2), var(--o-l1)); }
.itm-obiect .io-strat-2::after {
  left: 54%; right: 12%; top: 18%; height: 26%;
  background: repeating-linear-gradient(rgba(var(--o-rgb2), var(--o-l1)) 0 1px, transparent 1px 22%);
}
.itm-obiect .io-strat-3 { background-color: rgba(var(--o-rgb), var(--o-f2)); border-width: 1.5px; }
.itm-obiect .io-strat-3::after {
  right: 10%; top: 10%; width: 14%; height: 14%; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #FFFFFF 0, rgba(255, 92, 53, 1) 32%, rgba(204, 58, 24, 1) 80%);
}

/* ── ORBITE: sferă, inele înclinate, noduri care le parcurg ── */
.itm-obiect[data-itm-obiect="orbite"] .io-s {
  transform: rotateZ(-4deg);
  animation: io-orb-s 20s var(--o-ease) infinite alternate;
}
@keyframes io-orb-s { from { transform: rotateZ(-10deg); } to { transform: rotateZ(6deg); } }
.itm-obiect .io-sfera {
  --d: 30cqi;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .9) 0, rgba(var(--o-rgb), 1) 20%,
    rgba(var(--o-rgb), .62) 52%, rgba(var(--o-rgb2), .34) 80%, rgba(var(--o-rgb2), .1) 100%);
  box-shadow: 0 0 9cqi rgba(var(--o-rgb), .3);
}
.itm-obiect .io-orb { transform: rotateZ(var(--tz)) rotateX(var(--tx)); }
.itm-obiect .io-orb-r { border: 1px solid rgba(var(--o-rgb2), .46); }
.itm-obiect .io-orb-r.io-o0 { border-color: rgba(var(--o-rgb), .46); }
:root[data-theme="light"] .itm-obiect .io-orb-r { border-color: rgba(var(--o-rgb2), .7); }
.itm-obiect .io-orb-rot { transform: rotateZ(var(--a0)); animation: io-orb var(--t, 14s) linear infinite; }
.itm-obiect .io-orb-rot.io-inv { animation-direction: reverse; }
@keyframes io-orb { from { transform: rotateZ(var(--a0)); } to { transform: rotateZ(calc(var(--a0) + 360deg)); } }
.itm-obiect .io-nod3 { --n-rgb: var(--o-rgb); transform: translateX(var(--r)); }
/* Nodul e din trei discuri perpendiculare: de oriunde l-ai privi, unul e din față. */
.itm-obiect .io-nod3 .io-c { --d: 5cqi; background: radial-gradient(closest-side, rgba(var(--n-rgb), 1) 0, rgba(var(--n-rgb), .85) 45%, rgba(var(--n-rgb), 0) 100%); }
.itm-obiect .io-nod3 .io-c.io-x { transform: rotateX(90deg); }
.itm-obiect .io-nod3 .io-c.io-y { transform: rotateY(90deg); }

/* ── CUB: cub translucid cu un nucleu care se rotește invers ── */
.itm-obiect[data-itm-obiect="cub"] .io-s {
  transform: rotateX(-24deg) rotateY(-32deg);
  animation: io-cub 20s linear infinite;
}
@keyframes io-cub {
  0% { transform: rotateX(-24deg) rotateY(-32deg); }
  50% { transform: rotateX(-12deg) rotateY(148deg); }
  100% { transform: rotateX(-24deg) rotateY(328deg); }
}
.itm-obiect .io-fata {
  --w: var(--e); --h: var(--e);
  border: 1px solid rgba(var(--o-rgb), var(--o-l1)); background: rgba(var(--o-rgb), var(--o-f1));
  transform: var(--t);
}
.itm-obiect .io-fata.io-sus2 { background: rgba(var(--o-rgb), .13); }
.itm-obiect .io-cub-ex > .io-fata::before, .itm-obiect .io-cub-ex > .io-fata::after { content: ""; position: absolute; box-sizing: border-box; }
.itm-obiect .io-cub-ex > .io-fata::before { inset: 16%; border: 1px dashed rgba(var(--o-rgb), var(--o-l2)); }
.itm-obiect .io-cub-ex > .io-fata::after { left: 36%; top: 36%; width: 28%; height: 28%; border-radius: 50%; border: 1px solid rgba(var(--o-rgb2), var(--o-l1)); }
.itm-obiect .io-cub-in { transform: rotateX(20deg) rotateY(-30deg); animation: io-cub-in 14s linear infinite; }
@keyframes io-cub-in {
  from { transform: rotateX(20deg) rotateY(-30deg); }
  to { transform: rotateX(380deg) rotateY(-390deg); }
}
.itm-obiect .io-cub-in > .io-fata { border-color: rgba(var(--o-rgb2), .85); background: rgba(var(--o-rgb2), .26); }

/* ── BULE: sfere și un mesaj care plutesc la adâncimi diferite ── */
.itm-obiect .io-plut {
  transform: translate3d(var(--x), var(--y), var(--z));
  animation: io-bula var(--t, 12s) var(--o-ease) infinite alternate; animation-delay: var(--dl, 0s);
}
.itm-obiect .io-bula {
  border: 1px solid rgba(var(--o-rgb), var(--o-l1));
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .55) 0, rgba(var(--o-rgb), .32) 24%,
    rgba(var(--o-rgb), .08) 62%, rgba(var(--o-rgb), .03) 100%);
}
.itm-obiect .io-bula.io-b2 {
  border-color: rgba(var(--o-rgb2), var(--o-l1));
  background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .5) 0, rgba(var(--o-rgb2), .3) 24%,
    rgba(var(--o-rgb2), .08) 62%, rgba(var(--o-rgb2), .03) 100%);
}
@keyframes io-bula {
  from { transform: translate3d(var(--x), var(--y), var(--z)); }
  to { transform: translate3d(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy)), calc(var(--z) + var(--dz))); }
}
.itm-obiect .io-mesaj {
  --w: 30cqi; --h: 16cqi; border-radius: 5cqi 5cqi 5cqi 1.2cqi;
  border: 1px solid rgba(var(--o-rgb2), var(--o-l1)); background: rgba(var(--o-rgb2), .14);
  display: flex; align-items: center; justify-content: center; gap: 2.4cqi;
}
.itm-obiect .io-mesaj > div {
  width: 2.8cqi; height: 2.8cqi; border-radius: 50%; background: rgba(var(--o-rgb2), .95);
  opacity: 1; animation: io-pt 3.6s var(--o-ease) infinite; animation-delay: var(--dl, 0s);
}
@keyframes io-pt { 0%, 100% { opacity: .3; } 40% { opacity: 1; } }

/* ── Telefoane slabe: mișcarea rămâne, efectele scumpe pleacă ── */
@media (hover: none) and (pointer: coarse) {
  .itm-obiect *, .itm-obiect *::before, .itm-obiect *::after { box-shadow: none !important; }
}

/* ── În afara ecranului: oprit (clasa o pune itm-obiect-3d.js) ── */
.itm-obiect.io-pauza *, .itm-obiect.io-pauza *::before, .itm-obiect.io-pauza *::after {
  animation-play-state: paused !important;
}

/* ── Fără mișcare: poza finală, statică ── */
@media (prefers-reduced-motion: reduce) {
  .itm-obiect *, .itm-obiect *::before, .itm-obiect *::after { animation: none !important; }
}

/* Browsere fără unități de container: obiectul nu se poate dimensiona, deci nu apare. */
@supports not (width: 1cqi) { .itm-obiect { display: none; } }