/* ===== Page preloader ===== */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  background:
    radial-gradient(60% 45% at 50% 42%, var(--teal-soft) 0%, transparent 70%),
    var(--bg);
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.preloader.is-done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.preloader.is-done .preloader__mark {
  transform: scale(1.35);
  opacity: 0;
}
html.is-preloading,
html.is-preloading body { overflow: hidden; }

/* Logo mark: three bars that grow like a rising chart */
.preloader__mark {
  position: relative;
  width: 84px;
  height: 84px;
  border-radius: 24px;
  background: var(--teal);
  box-shadow: var(--shadow-3);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 7px;
  padding: 0 0 20px;
  transition: transform .45s cubic-bezier(.3, 0, .2, 1), opacity .45s ease;
  animation: preloader-float 2.4s ease-in-out infinite;
}
.preloader__mark::after {
  /* soft pulse ring */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 30px;
  border: 2px solid var(--teal);
  opacity: 0;
  animation: preloader-ring 1.8s ease-out infinite;
}
.preloader__bar {
  width: 11px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .92);
  transform-origin: bottom;
  animation: preloader-bar 1.2s cubic-bezier(.5, 0, .3, 1) infinite;
}
.preloader__bar:nth-child(1) { height: 22px; }
.preloader__bar:nth-child(2) { height: 32px; animation-delay: .15s; }
.preloader__bar:nth-child(3) { height: 44px; animation-delay: .3s; background: #7ee2a0; }

/* Coin with ₴ dropping onto the tallest bar */
.preloader__coin {
  position: absolute;
  top: -14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #f4c542;
  color: #7a5608;
  font: 800 12px/22px var(--font-body);
  text-align: center;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
  animation: preloader-coin 1.2s cubic-bezier(.5, 0, .5, 1) infinite;
}

.preloader__text {
  min-height: 1.5em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
  padding-inline: 16px;
  transition: opacity .2s ease;
}
.preloader__text.is-swap { opacity: 0; }

.preloader__progress {
  width: min(220px, 60vw);
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.preloader__progress span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--cta));
  animation: preloader-progress 1.1s ease-in-out infinite;
}

@keyframes preloader-bar {
  0%, 100% { transform: scaleY(.35); }
  50%      { transform: scaleY(1); }
}
@keyframes preloader-coin {
  0%   { transform: translateY(-18px) rotateY(0); opacity: 0; }
  25%  { opacity: 1; }
  55%  { transform: translateY(8px) rotateY(180deg); opacity: 1; }
  75%  { transform: translateY(4px) rotateY(360deg); opacity: 1; }
  100% { transform: translateY(10px) rotateY(360deg); opacity: 0; }
}
@keyframes preloader-ring {
  0%   { transform: scale(.9); opacity: .55; }
  100% { transform: scale(1.35); opacity: 0; }
}
@keyframes preloader-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}
@keyframes preloader-progress {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* ===== Skeleton cards (shown in the grid while re-fetching) ===== */
.offer-card--skeleton {
  pointer-events: none;
}
.skeleton {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--surface-2) 0%, var(--bg-soft) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.3s linear infinite;
}
.skeleton--logo  { height: 72px; width: 70%; margin: 0 auto; }
.skeleton--name  { height: 16px; width: 45%; }
.skeleton--title { height: 12px; width: 80%; margin-top: 8px; }
.skeleton--chips { height: 24px; width: 90%; margin-top: 10px; border-radius: 999px; }
.skeleton--btn   { height: 40px; margin-top: 6px; border-radius: 999px; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ===== Error state ===== */
.load-error {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 16px;
  text-align: center;
  color: var(--ink-soft);
  font-size: 14px;
}
.load-error .btn--cta { width: auto; padding-inline: 22px; }

.stale-note {
  grid-column: 1 / -1;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

/* ===== Card reveal after load / re-sort ===== */
.offer-card.is-enter {
  animation: card-enter .45s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes card-enter {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}