/* static/baltyk/css/baltyk.css */

.baltyk-section{ padding:18px 0 26px; }
.baltyk-wrap{ width:min(1280px,calc(100% - 32px)); margin:0 auto; }

.baltyk-header{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; margin-bottom:14px;
}

.baltyk-card{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  background: rgba(10,16,34,.7);
  border:1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 60px rgba(0,0,0,.35);
}

.baltyk-map{
  height: clamp(520px,72vh,760px);
  width:100%;
  background: rgba(0,0,0,.25);
}

.baltyk-legend{
  position:absolute; top:14px; right:14px;
  width:300px; max-width: calc(100% - 28px);
  border-radius:16px;
  background: rgba(8,12,26,.82);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
  padding:14px;
  z-index:500;
}

.legend-title{ font-weight:800; letter-spacing:.2px; }
.legend-sub{ font-size:12px; color: rgba(255,255,255,.70); }

.legend-block{ margin-top:10px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.legend-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; }

.legend-toggle{ display:flex; align-items:center; gap:10px; font-weight:650; cursor:pointer; user-select:none; }
.legend-toggle input{ width:16px; height:16px; }

.legend-note{ font-size:12px; color: rgba(255,255,255,.65); }

.legend-scale{ display:flex; flex-direction:column; gap:6px; margin-top:10px; }
.scale-item{ display:flex; align-items:center; gap:10px; font-size:13px; color: rgba(255,255,255,.86); }
.scale-swatch{ width:16px; height:12px; border-radius:4px; border:1px solid rgba(255,255,255,.20); }

.legend-small{ font-size:12px; color: rgba(255,255,255,.70); line-height:1.35; }

.baltyk-arrow{
  width:26px; height:26px;
  position: relative;
  transform-origin: 50% 50%;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  pointer-events:none;
}
.baltyk-arrow .arrow-inner{
  width:26px; height:26px;
}
.baltyk-arrow svg{ width:26px; height:26px; display:block; }

.baltyk-arrow{ width:26px; height:26px; transform-origin:50% 50%; filter: drop-shadow(0 6px 10px rgba(0,0,0,.4)); }
.baltyk-arrow svg{ width:26px; height:26px; display:block; }
.baltyk-arrow .wind-move{ animation: windDrift 1.6s linear infinite; will-change: transform, opacity; }
@keyframes windDrift{
  0%{ transform: translateY(0); opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ transform: translateY(-18px); opacity:0; }
}
50%{transform:translateY(-2px)} }

.baltyk-arrow.waves{ position:relative; opacity:.95; }
.baltyk-arrow.waves .wave-move{ animation: waveBreathe 2.2s ease-in-out infinite; will-change: transform; }
@keyframes waveBreathe{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

.baltyk-arrow.waves .wave-pulse{
  position:absolute; left:50%; top:50%;
  width:18px; height:18px; margin-left:-9px; margin-top:-9px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.28);
  animation: wavePulseCircle 1.8s ease-out infinite;
  pointer-events:none;
}
@keyframes wavePulseCircle{
  0%{ transform:scale(0.55); opacity:.85; }
  100%{ transform:scale(1.45); opacity:0; }
}
50%{transform:scale(1.06)} }

.baltyk-toast{
  position:absolute; left:14px; bottom:14px; z-index:700;
  pointer-events:none; display:none;
  padding:10px 12px; border-radius:12px;
  background: rgba(8,12,26,.84);
  border:1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.90);
  font-size:13px; max-width:420px;
  backdrop-filter: blur(10px);
}

.leaflet-control-attribution{
  background: rgba(8,12,26,.65) !important;
  color: rgba(255,255,255,.70) !important;
  border-radius:10px !important;
  padding:2px 8px !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

.leaflet-popup-content-wrapper{
  border-radius:14px !important;
  background: rgba(8,12,26,.92) !important;
  color: rgba(255,255,255,.92) !important;
  border:1px solid rgba(255,255,255,.10) !important;
}
.leaflet-popup-tip{ background: rgba(8,12,26,.92) !important; }

@media (max-width: 940px){
  .baltyk-legend{ position:static; width:auto; margin:14px; }
  .baltyk-map{ height:64vh; }
}


/* Animacje: wiatr przesuwa strzałkę w kierunku "dokąd" i zapętla */
@keyframes baltykDrift {
  0%   { transform: translateY(8px);  opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(-12px); opacity: 0; }
}

.baltyk-arrow.wind .arrow-inner{
  animation: baltykDrift 1.8s linear infinite;
}

/* Fale: delikatny "pływ" + pulsujące koło */
@keyframes baltykBob {
  0%   { transform: translateY(1px); }
  50%  { transform: translateY(-2px); }
  100% { transform: translateY(1px); }
}
.baltyk-arrow.waves .arrow-inner{
  animation: baltykBob 1.6s ease-in-out infinite;
}

.wave-pulse{
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  margin-left:-5px; margin-top:-5px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.35);
  box-shadow: 0 0 0 rgba(255,255,255,.0);
  opacity:.9;
  animation: baltykPulse 1.4s ease-out infinite;
}

@keyframes baltykPulse{
  0%   { transform: translate(-50%,-50%) scale(0.6); opacity:.9; box-shadow:0 0 0 0 rgba(255,255,255,.0); }
  70%  { transform: translate(-50%,-50%) scale(1.9); opacity:.0; box-shadow:0 0 0 10px rgba(255,255,255,.0); }
  100% { transform: translate(-50%,-50%) scale(2.0); opacity:0; }
}

/* Legenda: ostatnia aktualizacja */
.legend-updated{
  margin-top:6px;
  font-size:12px;
  opacity:.75;
}


/* ==== Baltyk PRO animation tweaks (wind forward drift + stronger icons) ==== */
.baltyk-arrow.wind { width:34px; height:34px; }
.baltyk-arrow.waves { width:32px; height:32px; }

.baltyk-arrow.wind svg{ width:34px; height:34px; }
.baltyk-arrow.waves svg{ width:32px; height:32px; }

/* Wind: move "forward" along arrow direction by translating inner SVG up (because outer div is rotated) */
.baltyk-arrow.wind svg{ transform-origin:50% 50%; animation: windAdvance 1.9s linear infinite; }
@keyframes windAdvance{
  0%{ transform: translateY(6px); opacity: 0; }
  15%{ opacity: .95; }
  85%{ opacity: .95; }
  100%{ transform: translateY(-8px); opacity: 0; }
}

/* Waves: subtle bob + pulse already in SVG */
.baltyk-arrow.waves { opacity: .96; }
.baltyk-arrow.waves svg{ animation: waveBob 2.2s ease-in-out infinite; }
@keyframes waveBob{
  0%,100%{ transform: translateY(0px); }
  50%{ transform: translateY(-2px); }
}