/* ============================================
   AR DATA — Service Tile Animations
   Each tile has its own themed motion graphic.
   On hover the animation speeds up & gets brighter.
   ============================================ */

.service-tile {
  --anim-speed: 1;
  --anim-brightness: 0.7;
}
.service-tile:hover {
  --anim-speed: 0.45;
  --anim-brightness: 1;
}
.service-tile .visual {
  position: relative;
  height: 110px;
  margin-top: auto;
  overflow: hidden;
}
.service-tile .visual svg {
  width: 100%;
  height: 100%;
  display: block;
  opacity: var(--anim-brightness);
  transition: opacity .35s;
}

/* ------- 01 Web ------- */
.anim-web .ln {
  transform-origin: left center;
  animation: webDraw calc(3.2s * var(--anim-speed)) ease-out infinite;
}
.anim-web .ln-1 { animation-delay: 0s; }
.anim-web .ln-2 { animation-delay: calc(0.25s * var(--anim-speed)); }
.anim-web .ln-3 { animation-delay: calc(0.5s * var(--anim-speed)); }
.anim-web .ln-4 { animation-delay: calc(0.85s * var(--anim-speed)); }
@keyframes webDraw {
  0%, 100% { transform: scaleX(0); opacity: 0.3; }
  18% { transform: scaleX(1); opacity: 1; }
  85% { transform: scaleX(1); opacity: 1; }
}
.anim-web .cursor {
  animation: blink calc(0.7s * var(--anim-speed)) steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ------- 02 eCommerce ------- */
.anim-shop .prod { transform-origin: center; }
.anim-shop .prod-active {
  animation: shopPulse calc(1.8s * var(--anim-speed)) ease-in-out infinite;
}
@keyframes shopPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.08); opacity: 0.9; }
}
.anim-shop .price {
  animation: priceFloat calc(2.4s * var(--anim-speed)) ease-out infinite;
  opacity: 0;
}
@keyframes priceFloat {
  0%   { opacity: 0; transform: translateY(0); }
  10%  { opacity: 1; }
  70%  { opacity: 1; transform: translateY(-30px); }
  100% { opacity: 0; transform: translateY(-40px); }
}

/* ------- 03 Mobile ------- */
.anim-mobile .scroll-content {
  animation: mobileScroll calc(4s * var(--anim-speed)) linear infinite;
}
@keyframes mobileScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-40px); }
}
.anim-mobile .notif {
  animation: notifPulse calc(1.6s * var(--anim-speed)) ease-out infinite;
}
@keyframes notifPulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(2.5); opacity: 0; }
}

/* ------- 04 Gestiune ------- */
.anim-erp .row {
  transform-origin: left;
  animation: erpRow calc(2.4s * var(--anim-speed)) ease-out infinite;
}
.anim-erp .row-1 { animation-delay: 0s; }
.anim-erp .row-2 { animation-delay: calc(0.2s * var(--anim-speed)); }
.anim-erp .row-3 { animation-delay: calc(0.4s * var(--anim-speed)); }
.anim-erp .row-4 { animation-delay: calc(0.6s * var(--anim-speed)); }
@keyframes erpRow {
  0%, 100% { transform: scaleX(0.2); opacity: 0.3; }
  30%, 70% { transform: scaleX(1); opacity: 1; }
}

/* ------- 05 AI ------- */
.anim-ai .node {
  transform-origin: center;
  transform-box: fill-box;
  animation: aiNode calc(1.8s * var(--anim-speed)) ease-in-out infinite;
}
.anim-ai .node-1 { animation-delay: 0s; }
.anim-ai .node-2 { animation-delay: calc(0.2s * var(--anim-speed)); }
.anim-ai .node-3 { animation-delay: calc(0.4s * var(--anim-speed)); }
.anim-ai .node-4 { animation-delay: calc(0.6s * var(--anim-speed)); }
.anim-ai .node-out { animation-delay: calc(0.8s * var(--anim-speed)); }
@keyframes aiNode {
  0%, 100% { transform: scale(0.7); opacity: 0.5; }
  50%      { transform: scale(1.4); opacity: 1; }
}
.anim-ai .link {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: aiFire calc(2s * var(--anim-speed)) linear infinite;
}
.anim-ai .link-2 { animation-delay: calc(0.2s * var(--anim-speed)); }
.anim-ai .link-3 { animation-delay: calc(0.4s * var(--anim-speed)); }
.anim-ai .link-4 { animation-delay: calc(0.6s * var(--anim-speed)); }
@keyframes aiFire {
  0%, 100% { stroke-dashoffset: 60; opacity: 0.2; }
  50%      { stroke-dashoffset: 0;  opacity: 0.9; }
}

/* ------- 06 BI ------- */
.anim-bi .bar {
  transform-origin: center bottom;
  animation: biBar calc(2.4s * var(--anim-speed)) ease-in-out infinite;
}
.anim-bi .bar-1 { animation-delay: 0s; }
.anim-bi .bar-2 { animation-delay: calc(0.12s * var(--anim-speed)); }
.anim-bi .bar-3 { animation-delay: calc(0.24s * var(--anim-speed)); }
.anim-bi .bar-4 { animation-delay: calc(0.36s * var(--anim-speed)); }
.anim-bi .bar-5 { animation-delay: calc(0.48s * var(--anim-speed)); }
.anim-bi .bar-6 { animation-delay: calc(0.60s * var(--anim-speed)); }
@keyframes biBar {
  0%, 100% { transform: scaleY(0.3); }
  50%      { transform: scaleY(1); }
}
.anim-bi .trend {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: biTrend calc(3.2s * var(--anim-speed)) ease-in-out infinite;
}
@keyframes biTrend {
  0%, 100% { stroke-dashoffset: 200; opacity: 0.3; }
  50%      { stroke-dashoffset: 0; opacity: 1; }
}

/* ------- 07 Calc/Servere ------- */
.anim-server .led {
  transform-origin: center;
  transform-box: fill-box;
  animation: ledBlink calc(1.5s * var(--anim-speed)) ease-in-out infinite;
}
.anim-server .led-1 { animation-delay: 0s; }
.anim-server .led-2 { animation-delay: calc(0.4s * var(--anim-speed)); }
.anim-server .led-3 { animation-delay: calc(0.8s * var(--anim-speed)); }
.anim-server .led-4 { animation-delay: calc(0.2s * var(--anim-speed)); }
@keyframes ledBlink {
  0%, 100% { transform: scale(0.5); opacity: 0.3; }
  50%      { transform: scale(1.2); opacity: 1; }
}
.anim-server .scan {
  animation: serverScan calc(3.5s * var(--anim-speed)) linear infinite;
  transform-origin: left;
}
@keyframes serverScan {
  0%   { transform: scaleX(0) translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { transform: scaleX(1) translateX(0); opacity: 0; }
}

/* ------- 08 Gaming PC ------- */
.anim-gaming .case-glow {
  animation: rgbCycle calc(4s * var(--anim-speed)) linear infinite;
}
@keyframes rgbCycle {
  0%   { stop-color: #ff2d3d; }
  33%  { stop-color: #3361ff; }
  66%  { stop-color: #00d4ff; }
  100% { stop-color: #ff2d3d; }
}
.anim-gaming .case-glow-2 {
  animation: rgbCycle2 calc(4s * var(--anim-speed)) linear infinite;
}
@keyframes rgbCycle2 {
  0%   { stop-color: #3361ff; }
  33%  { stop-color: #00d4ff; }
  66%  { stop-color: #ff2d3d; }
  100% { stop-color: #3361ff; }
}
.anim-gaming .fan {
  transform-origin: center;
  transform-box: fill-box;
  animation: fanSpin calc(2s * var(--anim-speed)) linear infinite;
}
@keyframes fanSpin { to { transform: rotate(360deg); } }
.anim-gaming .stat-line {
  transform-origin: left;
  animation: webDraw calc(2.4s * var(--anim-speed)) ease-out infinite;
}
.anim-gaming .stat-1 { animation-delay: 0s; }
.anim-gaming .stat-2 { animation-delay: calc(0.4s * var(--anim-speed)); }

/* ------- 09 Integrări ------- */
.anim-int .packet {
  animation: pkt calc(2.2s * var(--anim-speed)) linear infinite;
  offset-rotate: 0deg;
}
.anim-int .pkt-1 { offset-path: path('M 50 40 L 100 40'); animation-delay: 0s; }
.anim-int .pkt-2 { offset-path: path('M 100 40 L 150 40'); animation-delay: calc(1.1s * var(--anim-speed)); }
@keyframes pkt {
  0% { offset-distance: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { offset-distance: 100%; opacity: 0; }
}
.anim-int .box-center {
  transform-origin: center;
  transform-box: fill-box;
  animation: boxPulse calc(1.5s * var(--anim-speed)) ease-in-out infinite;
}
@keyframes boxPulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* ------- 10 Cloud (homepage tile) ------- */
.anim-cloud .layer { transform-origin: center; transform-box: fill-box; }
.anim-cloud .layer-1 { animation: layerPulse calc(3.5s * var(--anim-speed)) ease-in-out infinite; }
.anim-cloud .layer-2 { animation: layerPulse calc(3.5s * var(--anim-speed)) ease-in-out infinite calc(0.3s * var(--anim-speed)); }
.anim-cloud .layer-3 { animation: layerPulse calc(3.5s * var(--anim-speed)) ease-in-out infinite calc(0.6s * var(--anim-speed)); }
@keyframes layerPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50%      { transform: scale(1.06); opacity: 0.8; }
}
.anim-cloud .data-orb {
  animation: orbDrop calc(2s * var(--anim-speed)) ease-in infinite;
}
@keyframes orbDrop {
  0%   { transform: translateY(-30px); opacity: 0; }
  10%  { opacity: 1; }
  60%  { transform: translateY(20px); opacity: 0.8; }
  100% { transform: translateY(20px); opacity: 0; }
}

/* Pause when scrolled offscreen via reveal class (perf) */
.service-tile:not(.in) .visual svg * { animation-play-state: paused; }