/* ═══════════════════════════════════════════════════════════
   SERVICES — animated illustrations
   Small looping line illustrations that replace the service
   images on the services, Meta Ads and Google Ads pages (EN + LT).
   Pure SVG + CSS.
   ═══════════════════════════════════════════════════════════ */

.svc-visual {
  aspect-ratio: 4/3;
  position: relative;
  margin-bottom: 24px;
}
.svc-illo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
}

/* Shared strokes */
.il-line  { fill: none; stroke: rgba(246,242,240,.16); stroke-width: 1; }
.il-bar   { fill: rgba(246,242,240,.13); }
.il-red   { fill: #E8001C; }
.il-card  { fill: rgba(14,11,9,.55); stroke: rgba(246,242,240,.2); stroke-width: 1; }

/* ─── 01 · META — people drift toward the buyer core ──────── */
.il-meta .ring-3 { stroke-dasharray: 2 7; animation: ilSpin 80s linear infinite; transform-box: fill-box; transform-origin: center; }
.il-meta .ring-1 { stroke: rgba(232,0,28,.45); }
.il-meta .dot {
  fill: #aba49f;
  animation: ilDrop 6s var(--d, 0s) cubic-bezier(.45,0,.7,.6) infinite;
}
.il-meta .dot.hit { animation-name: ilHit; }
.il-meta .core { fill: #E8001C; filter: drop-shadow(0 0 6px rgba(232,0,28,.8)); }
.il-meta .pulse {
  fill: none; stroke: #E8001C; stroke-width: 1;
  transform-box: fill-box; transform-origin: center;
  animation: ilPulse 2s ease-out infinite;
}
@keyframes ilHit {
  0%   { transform: translateX(132px); opacity: 0; fill: #aba49f; }
  15%  { opacity: 1; }
  65%  { fill: #E8001C; }
  100% { transform: translateX(0); opacity: 1; fill: #E8001C; }
}
@keyframes ilDrop {
  0%   { transform: translateX(132px); opacity: 0; }
  15%  { opacity: .7; }
  55%  { transform: translateX(var(--stop, 80px)); opacity: .5; }
  75%, 100% { transform: translateX(var(--stop, 80px)); opacity: 0; }
}
@keyframes ilPulse {
  0%   { transform: scale(.6); opacity: .9; }
  100% { transform: scale(2.6); opacity: 0; }
}
@keyframes ilSpin { to { transform: rotate(360deg); } }

/* ─── 02 · GOOGLE — the lens finds the buying keyword ─────── */
.il-google .lens { animation: ilLens 9s cubic-bezier(.65,0,.35,1) infinite; }
.il-google .lens circle { fill: rgba(14,11,9,.35); stroke: #f6f2f0; stroke-width: 2; }
.il-google .lens line { stroke: #f6f2f0; stroke-width: 5; stroke-linecap: round; }
.il-google .hl { opacity: 0; }
.il-google .hl-1 { fill: rgba(246,242,240,.45); animation: ilHl1 9s linear infinite; }
.il-google .hl-2 { fill: rgba(246,242,240,.45); animation: ilHl2 9s linear infinite; }
.il-google .hl-3 { fill: #E8001C; animation: ilHl3 9s linear infinite; }
.il-google .spark {
  fill: none; stroke: #E8001C; stroke-width: 1; opacity: 0;
  transform-box: fill-box; transform-origin: center;
  animation: ilSpark 9s ease-out infinite;
}
@keyframes ilLens {
  0%, 8%    { transform: translate(98px, 118px); }
  22%, 30%  { transform: translate(172px, 118px); }
  44%, 84%  { transform: translate(245px, 118px); }
  100%      { transform: translate(98px, 118px); }
}
@keyframes ilHl1 { 0%, 8% { opacity: 1; } 14%, 94% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ilHl2 { 0%, 18% { opacity: 0; } 22%, 30% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ilHl3 { 0%, 40% { opacity: 0; } 45%, 84% { opacity: 1; } 90%, 100% { opacity: 0; } }
@keyframes ilSpark {
  0%, 44% { transform: scale(.6); opacity: 0; }
  46%     { opacity: .9; }
  62%, 100% { transform: scale(1.5); opacity: 0; }
}

/* ─── 03 · CHATGPT — an ad appears under the answer ───────── */
.il-chat .ask    { animation: ilAsk 9s var(--ease-out) infinite; }
.il-chat .reply  { animation: ilReply 9s var(--ease-out) infinite; }
.il-chat .typing { animation: ilTyping 9s linear infinite; }
.il-chat .typing circle { fill: #f6f2f0; animation: ilBounce .9s ease-in-out infinite; }
.il-chat .typing circle:nth-child(2) { animation-delay: .15s; }
.il-chat .typing circle:nth-child(3) { animation-delay: .3s; }
.il-chat .answer { animation: ilAnswer 9s linear infinite; }
.il-chat .ad     { animation: ilAd 9s var(--ease-out) infinite; }
.il-chat .ad .il-card { stroke: rgba(232,0,28,.6); }
@keyframes ilAsk    { 0%, 3% { opacity: 0; transform: translateY(8px); } 8%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilReply  { 0%, 14% { opacity: 0; transform: translateY(8px); } 19%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilTyping { 0%, 16% { opacity: 1; } 36%, 100% { opacity: 0; } }
@keyframes ilAnswer { 0%, 35% { opacity: 0; } 40%, 100% { opacity: 1; } }
@keyframes ilAd     { 0%, 50% { opacity: 0; transform: translateY(12px); } 56%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; } }
@keyframes ilBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ─── 03/04 · CREATIVES — three variants, one winner ──────── */
.il-creative .fill {
  fill: #E8001C;
  transform-box: fill-box; transform-origin: left center;
  animation: ilGrow 8s cubic-bezier(.3,.1,.2,1) infinite;
}
.il-creative .v { animation: ilLose 8s ease infinite; }
.il-creative .v.win { animation-name: ilWin; }
.il-creative .v.win .il-card { animation: ilWinStroke 8s ease infinite; }
@keyframes ilGrow {
  0%, 6%    { transform: scaleX(0); }
  38%, 88%  { transform: scaleX(var(--w)); }
  96%, 100% { transform: scaleX(0); }
}
@keyframes ilLose { 0%, 42% { opacity: 1; } 48%, 86% { opacity: .3; } 94%, 100% { opacity: 1; } }
@keyframes ilWin  { 0%, 42% { transform: none; } 50%, 86% { transform: translateY(-8px); } 94%, 100% { transform: none; } }
@keyframes ilWinStroke {
  0%, 42%   { stroke: rgba(246,242,240,.2); }
  50%, 86%  { stroke: #E8001C; }
  94%, 100% { stroke: rgba(246,242,240,.2); }
}

/* Still frame for visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  .svc-illo * { animation: none !important; }
  .il-meta .dot { transform: translateX(var(--rest, 90px)); opacity: .6; }
  .il-meta .dot.hit { fill: #E8001C; opacity: 1; }
  .il-google .lens { transform: translate(245px, 118px); }
  .il-google .hl-3 { opacity: 1; }
  .il-chat .typing { opacity: 0; }
  .il-creative .fill { transform: scaleX(var(--w)); }
  .il-creative .v { opacity: .3; }
  .il-creative .v.win { opacity: 1; transform: translateY(-8px); }
  .il-creative .v.win .il-card { stroke: #E8001C; }
}