/* Pan Peryskop — animacje i keyframes */

/* --- hero word rotator --- */
.rotator { position: relative; display: inline-block; }
.rotator .w {
  display: inline-block;
  white-space: nowrap;
  position: absolute; left: 0; top: 0;
  opacity: 0;
  filter: blur(6px);
  transform: translateY(0.4em);
  transition: opacity 0.5s var(--ease), filter 0.5s var(--ease), transform 0.5s var(--ease);
}
.rotator .w.is-in { opacity: 1; filter: blur(0); transform: none; }
.rotator .w.is-out { opacity: 0; filter: blur(6px); transform: translateY(-0.4em); }

/* --- marquee (EVpin: 60s, mask-fade edges, pause on hover) --- */
.marquee {
  position: relative;
  overflow: hidden;
  overflow: clip;
  contain: paint;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%);
}
.marquee-track { display: flex; width: max-content; gap: 8px; animation: pp-marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes pp-marquee { to { transform: translateX(-50%); } }

/* --- shimmer (skeletons) --- */
@keyframes pp-shimmer { to { background-position: -200% 0; } }
.sk {
  border-radius: 8px;
  background: linear-gradient(100deg, rgba(0,0,0,0.05) 40%, rgba(0,0,0,0.11) 50%, rgba(0,0,0,0.05) 60%);
  background-size: 200% 100%;
  animation: pp-shimmer 1.4s infinite;
}
.dark .sk { background: linear-gradient(100deg, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.11) 50%, rgba(255,255,255,0.05) 60%); background-size: 200% 100%; }

/* --- flip clock --- */
@keyframes pp-flip {
  0% { transform: rotateX(0); background: #17181a; }
  50% { transform: rotateX(-90deg); background: #222428; }
  100% { transform: rotateX(0); background: #17181a; }
}
.flip-digit.flipping { animation: pp-flip 0.4s var(--ease); }

/* --- pin pop-in --- */
@keyframes pp-popin {
  0% { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
  60% { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
.map-pin.pin-in { animation: pp-popin 0.4s var(--ease); }

/* --- ring draw (TTL progress) --- */
@keyframes pp-ringdraw {
  from { stroke-dashoffset: 0; }
}
.map-pin .ring { animation: pp-ringdraw 0.8s var(--ease); }

/* --- hover lift --- */
.lift { transition: transform 0.35s var(--ease), box-shadow 0.35s ease; }
.lift:hover { transform: translateY(-6px); }

/* --- icon wiggle (features hover) --- */
@keyframes pp-wiggle {
  0%, 100% { transform: rotate(0); }
  25% { transform: rotate(-8deg); }
  75% { transform: rotate(8deg); }
}