/* ============================================================
   Radio DM • 11 listopada — Święto Niepodległości
   Delikatnie wkomponowane w ciemny klimat strony
   Subtelny biało-czerwony akcent + realistyczna flaga
   Nie niszczy motywu, wideo ani neonowego stylu
   Pojawia się 11 listopada 00:00, znika po północy
   Powtarzalne co rok
   ============================================================ */

/* Subtelny biało-czerwony ambient — nie zasłania strony */
body.rdm-11listopad-active::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 12% 18%, rgba(255, 255, 255, 0.09), transparent 45%),
    radial-gradient(ellipse at 88% 82%, rgba(220, 20, 40, 0.14), transparent 50%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%, transparent 60%, rgba(220, 20, 40, 0.08) 100%);
  mix-blend-mode: soft-light;
  animation: ambient11 24s ease-in-out infinite alternate;
}

@keyframes ambient11 {
  0% { opacity: 0.55; }
  100% { opacity: 0.85; }
}

/* Wiadomość — wtopiona, elegancka na ciemnym tle */
.rdm-11-mention {
  position: fixed;
  top: 58px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8700;
  display: none;
  align-items: center;
  gap: 10px;
  color: #ffe8e8;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.45),
    0 0 12px rgba(220, 20, 40, 0.55),
    0 1px 2px rgba(0, 0, 0, 0.6);
  opacity: 0;
  animation: mention11In 1.5s ease-out 0.4s forwards;
  max-width: 92vw;
  white-space: nowrap;
  pointer-events: none;
}

body.rdm-11listopad-active .rdm-11-mention {
  display: flex;
}

@keyframes mention11In {
  to { opacity: 0.88; }
}

.rdm-11-mention .flag-dot {
  width: 12px;
  height: 8px;
  background: linear-gradient(180deg, #fff 50%, #dc143c 50%);
  border-radius: 1px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  flex-shrink: 0;
}

/* Flaga — piękna, realistyczna, delikatnie wkomponowana */
.rdm-flag-wrap {
  position: fixed;
  top: 16%;
  right: 4%;
  z-index: 8400;
  display: none;
  pointer-events: none;
  perspective: 1000px;
}

body.rdm-11listopad-active .rdm-flag-wrap {
  display: block;
}

.rdm-flag {
  width: 168px;
  height: 112px;
  position: relative;
  transform-style: preserve-3d;
  animation: flagWave 3.6s ease-in-out infinite;
  filter: drop-shadow(0 14px 26px rgba(0, 0, 0, 0.4));
}

@keyframes flagWave {
  0%, 100% {
    transform: rotateY(-6deg) rotateX(1deg) skewY(-0.6deg);
  }
  28% {
    transform: rotateY(7deg) rotateX(-0.8deg) skewY(1.4deg);
  }
  52% {
    transform: rotateY(-4deg) rotateX(0.4deg) skewY(-0.3deg);
  }
  78% {
    transform: rotateY(9deg) rotateX(-1.2deg) skewY(1.8deg);
  }
}

.rdm-flag-pole {
  position: absolute;
  left: -6px;
  top: -10px;
  width: 6px;
  height: 142px;
  background: linear-gradient(180deg, #d4d4d4, #8a8a8a 40%, #a8a8a8);
  border-radius: 3px;
  box-shadow: 2px 0 7px rgba(0, 0, 0, 0.28);
  z-index: 2;
}

.rdm-flag-pole::after {
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 11px;
  height: 11px;
  background: radial-gradient(circle, #ececec, #666);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rdm-flag-cloth {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 49.5%, #dc143c 50.5%, #c41e3a 100%);
  border-radius: 0 4px 4px 0;
  overflow: hidden;
  animation: clothRipple 3.2s ease-in-out infinite;
  box-shadow:
    inset 0 0 20px rgba(0, 0, 0, 0.07),
    5px 5px 14px rgba(0, 0, 0, 0.22);
}

@keyframes clothRipple {
  0%, 100% {
    transform: scaleX(1) skewX(0deg);
  }
  32% {
    transform: scaleX(0.97) skewX(1.8deg);
  }
  62% {
    transform: scaleX(1.02) skewX(-1.4deg);
  }
}

.rdm-flag-cloth::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.16) 28%,
    transparent 48%,
    rgba(0, 0, 0, 0.05) 68%,
    transparent 88%
  );
  animation: highlightSweep 4.2s ease-in-out infinite;
}

@keyframes highlightSweep {
  0% { transform: translateX(-22%); }
  100% { transform: translateX(22%); }
}

.rdm-flag-folds {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 20px,
    rgba(0, 0, 0, 0.035) 22px,
    transparent 24px
  );
  animation: foldsShift 4.8s ease-in-out infinite;
  pointer-events: none;
}

@keyframes foldsShift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (max-width: 1000px) {
  .rdm-flag-wrap {
    top: 18%;
    right: 2.5%;
    transform: scale(0.78);
    transform-origin: top right;
  }
}

@media (max-width: 700px) {
  .rdm-11-mention {
    top: 98px;
    font-size: 0.72rem;
  }
  .rdm-flag-wrap {
    display: none !important;
  }
}