/* ===============================
   🎄 CHRISTMAS THEME
   =============================== */

/* enyhe piros-zöld glow */
:root {
  --xmas-red: #b91c1c;
  --xmas-green: #166534;
  --xmas-gold: #facc15;
}

/* header kap egy ünnepi fényt */

/* gombok */
.btn-get-started,
.cta-btn {
  background: linear-gradient(135deg, var(--xmas-red), var(--xmas-green));
  border: none;
}

/* portfolio kártyák */
.portfolio-wrap {
  position: relative;
}

.portfolio-wrap::after {
  content: "❄";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  opacity: 0.4;
}

/* NEW badge karácsonyibb */
.new-badge {
  background: var(--xmas-red);
  color: white;
}

/* FUTURE badge */
.future-badge {
  background: var(--xmas-green);
  color: white;
}

/* footer kis fény */
#footer {
  box-shadow: inset 0 10px 30px rgba(250, 204, 21, 0.15);
}

@keyframes snowfall {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(110vh);
  }
}

/* ===========================
   🎄 CHRISTMAS MODE
   =========================== */
/*
.xmas #header {
  box-shadow: 0 0 18px rgba(250, 204, 21, 0.4);
  border-bottom: 2px solid #facc15;
}
*/

.xmas .btn-get-started,
.xmas .cta-btn {
  background: linear-gradient(135deg, #166534, #b91c1c);
}

.xmas .portfolio-wrap::after {
  content: "❄";
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 18px;
  opacity: 0.5;
}

.xmas .new-badge {
  background: #b91c1c;
}

.xmas .future-badge {
  background: #166534;
}

.xmas body::before {
  content: "❄ ❅ ❆ ❄ ❅ ❆";
  position: fixed;
  top: -20px;
  left: 0;
  width: 100%;
  font-size: 22px;
  opacity: 0.15;
  text-align: center;
  /* animation: snowText 12s linear infinite; */
  pointer-events: none;
}

@keyframes snowText {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(120vh);
  }
}

#xmas-icon {
  display: none;
}

@keyframes bell {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(5deg); }
  50%  { transform: rotate(-5deg); }
  75%  { transform: rotate(3deg); }
  100% { transform: rotate(0deg); }
}

.xmas #header::after {
  content: "";
  position: absolute;

  top: 60px;
  left: 160px;

  width: 420px;
  height: 150px;

  background: url("../images/theme/xmas.png") no-repeat center;
  background-size: contain;

  pointer-events: none;    /* nem kattintható */
  z-index: 50;             /* a header felett */
  opacity: 0.9;

  /* 🔔 ANIMÁCIÓ */
  animation: bell 3s ease-in-out infinite;
  transform-origin: top center;
}

@media (max-width: 768px) {
  .xmas #header::after {
    top: 70px;
    left: 50%;
    transform: translateX(-50%);

    width: 220px;
    height: 80px;

    animation-duration: 5s; /* halkabb */
  }
}

@media (max-width: 480px) {
  .xmas #header::after {
    top: 80px;
    width: 180px;
    height: 60px;
    opacity: 0.8;
  }
}