/* ArcyTattoo v2 - efekty graficzne (pyl, igla, zloty tusz, siec kontaktu).
   Tylko warstwa wizualna - nie zmienia layoutu ani tresci. */

:root { --fx-gold: 201,168,76; } /* zloty pyl (zgodny ze zlotem marki) */

/* ===== PYL: globalne, subtelne tlo czastek ===== */
#fx-dust {
  position: fixed;
  inset: 0;
  z-index: -1;             /* za trescia, nad czarnym tlem body */
  pointer-events: none;
  opacity: 0.73;           /* delikatnie i spojnie wszedzie (jasniej/wyrazniej) */
}

/* ===== ZLOTY TUSZ: plynace linie (akcent w tle sekcji) ===== */
.ink-river { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.ink-river svg { width: 100%; height: 100%; }
.ink-stream {
  stroke: rgba(var(--fx-gold), 1);
  stroke-width: 1.2; fill: none; stroke-linecap: round;
  stroke-dasharray: 2200; stroke-dashoffset: 2200;
  filter: drop-shadow(0 0 6px rgba(var(--fx-gold), 0.25));
  animation: fx-drawStream 11s ease-in-out infinite;
}
.ink-stream:nth-child(1){ animation-delay:0s;  opacity:.5 }
.ink-stream:nth-child(2){ animation-delay:2.5s;animation-duration:13s; opacity:.32 }
.ink-stream:nth-child(3){ animation-delay:4.5s;animation-duration:10s; opacity:.26 }
@keyframes fx-drawStream {
  0%   { stroke-dashoffset:2200; opacity:0 }
  20%  { opacity:.5 }
  80%  { opacity:.45 }
  100% { stroke-dashoffset:0; opacity:0 }
}

/* ===== IGLA: linia procesu + igla + kropki tuszu ===== */
.proc-flow { position: relative; height: 18px; pointer-events: none; }
.proc-flow .rail {
  position: absolute; inset: 0; height: 1px; top: 50%;
  background: linear-gradient(90deg, transparent, rgba(var(--fx-gold),.28) 12%, rgba(var(--fx-gold),.28) 88%, transparent);
}
.proc-flow .draw {
  position: absolute; left: 0; top: 50%; height: 2px; width: 0; transform: translateY(-50%);
  background: linear-gradient(90deg, rgba(var(--fx-gold),.1), rgba(var(--fx-gold),.9));
  box-shadow: 0 0 10px rgba(var(--fx-gold),.5);
  transition: width 2.4s cubic-bezier(.22,1,.36,1);
}
.proc-flow.is-in .draw { width: 100%; }
.proc-flow .needle {
  position: absolute; top: 50%; left: 0; width: 2px; height: 26px;
  transform: translate(-50%,-50%);
  background: linear-gradient(180deg, transparent, rgba(var(--fx-gold),1), transparent);
  filter: blur(.4px); opacity: 0;
}
.proc-flow.is-in .needle { animation: fx-needle 2.6s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes fx-needle { 0%{left:0;opacity:0} 8%{opacity:1} 92%{opacity:1} 100%{left:100%;opacity:0} }
.proc-ink {
  position: absolute; top: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: rgba(var(--fx-gold),1); transform: translate(-50%,-50%) scale(0);
  box-shadow: 0 0 10px rgba(var(--fx-gold),.6); opacity: 0;
}
.proc-flow.is-in .proc-ink { animation: fx-ink .7s ease-out forwards; }
@keyframes fx-ink { 0%{opacity:0;transform:translate(-50%,-50%) scale(0)} 60%{opacity:1;transform:translate(-50%,-50%) scale(1.25)} 100%{opacity:.9;transform:translate(-50%,-50%) scale(1)} }

/* ===== KONTAKT: siec polaczen w tle ===== */
#fx-net { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .8; }

/* Animowana zlota ramka na karcie (forma/aside) - delikatna, przy hover/focus */
.fx-frame { position: relative; }
.fx-frame::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from 0deg, transparent 0%, rgba(var(--fx-gold),.9) 18%, transparent 38%, transparent 62%, rgba(var(--fx-gold),.9) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .5s ease; pointer-events: none;
  animation: fx-rotate 5s linear infinite;
}
.fx-frame:hover::after, .fx-frame:focus-within::after { opacity: .55; }
@keyframes fx-rotate {
  from { background: conic-gradient(from 0deg,   transparent 0%, rgba(var(--fx-gold),.9) 18%, transparent 38%, transparent 62%, rgba(var(--fx-gold),.9) 82%, transparent 100%); }
  to   { background: conic-gradient(from 360deg, transparent 0%, rgba(var(--fx-gold),.9) 18%, transparent 38%, transparent 62%, rgba(var(--fx-gold),.9) 82%, transparent 100%); }
}

/* ===== STYLE: karty 3D tilt (lekki ruch przy kursorze) ===== */
.fx-tilt-grid { perspective: 1000px; }
.fx-tilt {
  transform-style: preserve-3d;
  transition: transform .3s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease;
  will-change: transform;
}
.fx-tilt.is-tilting { transition: transform .08s linear, box-shadow .3s ease; }
.fx-tilt:hover { box-shadow: 0 24px 50px -20px rgba(var(--fx-gold),.28); }
.fx-tilt .fx-glow {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(180px circle at var(--mx,50%) var(--my,50%), rgba(var(--fx-gold),.14), transparent 60%);
  opacity: 0; transition: opacity .3s ease;
}
.fx-tilt:hover .fx-glow { opacity: 1; }

/* ===== PROCES: auto-progress (aktywna karta + pasek) ===== */
.proc-card { transition: background-color .5s ease, box-shadow .5s ease; }
.proc-card.proc-active {
  background-color: rgba(var(--fx-gold), .05);
  box-shadow: inset 0 0 0 1.5px rgba(var(--fx-gold), .55), 0 0 30px -8px rgba(var(--fx-gold), .3);
}
.proc-card.proc-active .proc-num { color: rgba(var(--fx-gold), 1); text-shadow: 0 0 18px rgba(var(--fx-gold), .4); }
/* w trybie auto pasek/kropki steruje JS per-klatka (bez lagu transition) */
.proc-flow.auto .draw { transition: none; }
.proc-flow.auto .needle { animation: none; opacity: 1; transition: none; }
.proc-flow.auto .proc-ink { animation: none; opacity: .35; transform: translate(-50%,-50%) scale(.8); transition: opacity .3s ease, transform .3s ease; }
.proc-flow.auto .proc-ink.on { opacity: 1; transform: translate(-50%,-50%) scale(1.25); box-shadow: 0 0 14px rgba(var(--fx-gold),.7); }

/* ===== OPINIE: wielki cudzyslow - delikatny dryf ===== */
.fx-quote { animation: fx-float 9s ease-in-out infinite; }
@keyframes fx-float { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(14px) } }

/* ===== CTA: animowana linia obiegajaca obwod (zacheta do kliku) ===== */
.cta-spark { position: relative; }
.cta-spark-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1; overflow: visible;
}
.cta-spark-svg rect {
  fill: none; stroke: rgba(var(--fx-gold), .95); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 14 86;                 /* pathLength=100 -> 14% komety, 86% przerwy */
  filter: drop-shadow(0 0 6px rgba(var(--fx-gold), .55));
  transition: stroke-width .3s ease, stroke .3s ease;
}
.cta-spark-svg .c1 { animation: cta-run1 12s linear infinite; }
.cta-spark-svg .c2 { animation: cta-run2 12s linear infinite; opacity: .8; } /* druga kometa - staly odstep 1/2 obwodu (offset w wartosci, nie w czasie) */
/* odstep zakodowany w wartosci dashoffset (-50 = pol obwodu) -> zostaje staly przy kazdej predkosci, takze na hover */
@keyframes cta-run1 { from { stroke-dashoffset: 0; }   to { stroke-dashoffset: -100; } }
@keyframes cta-run2 { from { stroke-dashoffset: -50; } to { stroke-dashoffset: -150; } }
.cta-spark:hover .cta-spark-svg rect { stroke: rgba(var(--fx-gold), 1); stroke-width: 2.6; }
.cta-spark:hover .cta-spark-svg .c1,
.cta-spark:hover .cta-spark-svg .c2 { animation-duration: 2.2s; }  /* przyspiesz przy najechaniu */

/* ===== CTA: popiersie - bicie serca po najechaniu ===== */
.cta-bust { transform-origin: center; will-change: transform; cursor: pointer; }
.cta-bust:hover { animation: cta-heartbeat 1.3s ease-in-out infinite; }
@keyframes cta-heartbeat {            /* podwojny skurcz (lub-dub) i odpoczynek */
  0%   { transform: scale(1); }
  12%  { transform: scale(1.12); }
  24%  { transform: scale(1); }
  36%  { transform: scale(1.08); }
  50%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* Szanuj preferencje: brak ruchu */
@media (prefers-reduced-motion: reduce) {
  #fx-dust { opacity: .3; }
  .ink-stream, .proc-flow .needle, .proc-flow.is-in .proc-ink, .fx-frame::after, .fx-quote { animation: none !important; }
  .cta-spark-svg .c1, .cta-spark-svg .c2 { animation: none !important; stroke-dasharray: none; opacity: .35; }
  .cta-bust:hover { animation: none !important; }
  .proc-flow .draw { transition: none; width: 100%; }
  .ink-stream { stroke-dashoffset: 0; opacity: .25; }
  .fx-tilt { transition: none !important; }
}