/* ============================================================
   VIŠAVČ — UI Extras
   1. Site-wide rope climber
   2. Floating social buttons
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   1. SITE-WIDE ROPE CLIMBER
═══════════════════════════════════════════════════════════ */

.site-climber {
  position: fixed;
  top: 0;
  right: 20px;
  left: auto;
  width: 150px;       /* desktop container — keep >= figure width */
  height: 100vh;
  z-index: 50;
  pointer-events: none;
  display: block;
  transition: opacity 0.3s ease;
}

/* When JS adds .on-left — flip to left side */
.site-climber.on-left {
  right: auto;
  left: 0;
}

/* Rope */
.site-climber__rope {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    rgba(139,105,20,0.9),
    rgba(101,77,15,0.65),
    rgba(80,60,10,0.3)
  );
  border-radius: 2px;
}

.site-climber__rope::before {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    transparent 0px, transparent 8px,
    rgba(0,0,0,0.28) 8px, rgba(0,0,0,0.28) 9px
  );
  border-radius: 2px;
}

/* Anchor knot */
.site-climber__anchor {
  position: absolute;
  top: calc(var(--navbar-height) + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  background: var(--color-earth);
  border-radius: 50%;
  border: 2px solid var(--color-earth-light);
  box-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

/* ── Sway keyframes ──────────────────────────────────────── */

@keyframes climber-sway {
  0%   { transform: translateX(-50%) rotate(-2.5deg); }
  25%  { transform: translateX(-50%) rotate(2.5deg);  }
  50%  { transform: translateX(-50%) rotate(-1.5deg); }
  75%  { transform: translateX(-50%) rotate(2deg);    }
  100% { transform: translateX(-50%) rotate(-2.5deg); }
}

@keyframes climber-sway-left {
  0%   { transform: translateX(-50%) scaleX(-1) rotate(-2.5deg); }
  25%  { transform: translateX(-50%) scaleX(-1) rotate(2.5deg);  }
  50%  { transform: translateX(-50%) scaleX(-1) rotate(-1.5deg); }
  75%  { transform: translateX(-50%) scaleX(-1) rotate(2deg);    }
  100% { transform: translateX(-50%) scaleX(-1) rotate(-2.5deg); }
}

/* Figure — JS sets top via inline style on scroll */
.site-climber__figure {
  position: absolute;
  left: 50%;
  top: calc(var(--navbar-height) + 30px);
  width: 120px;       /* ← DESKTOP size — change this number */
  transform: translateX(-50%);
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.6));
  transform-origin: 50% 0%;
  animation: climber-sway 4.5s ease-in-out infinite;
}

/* On left side: mirror */
.site-climber.on-left .site-climber__figure {
  transform-origin: 50% 0%;
  animation: climber-sway-left 4.5s ease-in-out infinite;
}

/* Pause sway while scrolling */
.site-climber__figure.scrolling {
  animation: none !important;
  transform: translateX(-50%);
}
.site-climber.on-left .site-climber__figure.scrolling {
  transform: translateX(-50%) scaleX(-1);
}

/* ── MOBILE overrides (must come AFTER base figure rule) ── */
@media (max-width: 768px) {
  .site-climber {
    right: -20px;
    width: 130px;     /* mobile container */
  }
  .site-climber__figure {
    width: 100px;      /* ← MOBILE size — change this number */
  }
  .site-climber.on-left {
    left: -20px !important;
    right: auto;
  }
}

/* ── Limb animations ──────────────────────────────────────── */

/* Arms — pivot defined via inline style on <g> in SVG */
#climber-left-arm {
  animation: left-arm-grip 2.8s ease-in-out infinite;
}

@keyframes left-arm-grip {
  0%   { transform: rotate(0deg);   }
  40%  { transform: rotate(-14deg); }
  70%  { transform: rotate(7deg);   }
  100% { transform: rotate(0deg);   }
}

#climber-right-arm {
  animation: chainsaw-swing 3.5s ease-in-out infinite;
}

@keyframes chainsaw-swing {
  0%   { transform: rotate(0deg);  }
  45%  { transform: rotate(10deg); }
  75%  { transform: rotate(-6deg); }
  100% { transform: rotate(0deg);  }
}

/* Legs — pivot defined via inline style on <g> in SVG */
#climber-left-leg {
  animation: left-leg-brace 3.2s ease-in-out infinite;
  animation-delay: 0.4s;
}

@keyframes left-leg-brace {
  0%   { transform: rotate(0deg);  }
  40%  { transform: rotate(-7deg); }
  70%  { transform: rotate(4deg);  }
  100% { transform: rotate(0deg);  }
}

#climber-right-leg {
  animation: right-leg-brace 3.2s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes right-leg-brace {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(7deg); }
  70%  { transform: rotate(-4deg);}
  100% { transform: rotate(0deg); }
}

/* Pause all limb animations while scrolling */
.site-climber__figure.scrolling #climber-left-arm,
.site-climber__figure.scrolling #climber-right-arm,
.site-climber__figure.scrolling #climber-left-leg,
.site-climber__figure.scrolling #climber-right-leg {
  animation: none;
}


/* ═══════════════════════════════════════════════════════════
   2. FLOATING SOCIAL BUTTONS
═══════════════════════════════════════════════════════════ */

.floating-contacts {
  position: fixed;
  bottom: 2.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: center;
  transition: opacity 0.4s ease;
}

@media (max-width: 768px) {
  .floating-contacts {
    bottom: 1.5rem;
    right: 1rem;
  }
  body { padding-bottom: 0; }
}

.floating-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  font-size: 1.3rem;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
  text-decoration: none;
  animation: float-in 0.6s cubic-bezier(0.16,1,0.3,1) both;
  position: relative;
}

.floating-btn:hover { transform: scale(1.12) translateY(-2px); }

.floating-btn--instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  animation-delay: 0.08s;
}
.floating-btn--instagram:hover { box-shadow: 0 6px 24px rgba(214,36,159,0.4); }

.floating-btn--facebook {
  background: #1877F2;
  animation-delay: 0.18s;
}
.floating-btn--facebook:hover { box-shadow: 0 6px 24px rgba(24,119,242,0.4); }

.floating-btn--call {
  background: var(--color-accent);
  animation-delay: 0s;
}
.floating-btn--call:hover {
  box-shadow: 0 6px 24px var(--color-accent-glow);
}

.floating-btn::before {
  content: attr(data-label);
  position: absolute;
  right: 58px;
  background: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.73rem;
  font-family: var(--font-body);
  font-weight: 600;
  white-space: nowrap;
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  box-shadow: var(--shadow-sm);
}
.floating-btn:hover::before { opacity: 1; }

@keyframes float-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}