.app[data-holiday="easter"] {
  --easter-surface: rgba(255, 255, 255, 0.74);
  --easter-surface-strong: rgba(255, 255, 255, 0.92);
  --easter-surface-soft: rgba(255, 255, 255, 0.5);
  --easter-text: #29322d;
  --easter-muted: #6f7a73;
  --easter-line: rgba(74, 89, 77, 0.18);
  --easter-primary: #ff5757;
  --easter-primary-dark: #e9474b;
  --easter-accent: #80c98f;
  --easter-accent-soft: #dff3df;
  --easter-calendar: #e8f5fb;
  --easter-weekend: #f6f6f2;
  --easter-grass-1: #badf9f;
  --easter-grass-2: #81bd79;
  --easter-grass-3: #5f9f63;
  --easter-basket: #b87a46;
  --easter-basket-dark: #805131;
}

.app[data-theme="light"][data-holiday="easter"] {
  background:
    radial-gradient(circle at 79% 9%, rgba(244, 203, 255, 0.3), transparent 23%),
    radial-gradient(circle at 13% 75%, rgba(222, 255, 198, 0.44), transparent 25%),
    radial-gradient(circle at 48% 8%, rgba(255, 218, 107, 0.36), transparent 24%),
    linear-gradient(155deg, #fffaf0 0%, #f9f6dd 48%, #edf8e8 100%);
}

.app[data-theme="dark"][data-holiday="easter"] {
  --easter-surface: rgba(30, 41, 52, 0.78);
  --easter-surface-strong: rgba(38, 49, 62, 0.94);
  --easter-surface-soft: rgba(34, 45, 57, 0.58);
  --easter-text: #f5f7f2;
  --easter-muted: #b6c0b9;
  --easter-line: rgba(220, 235, 225, 0.16);
  --easter-primary: #ff6868;
  --easter-primary-dark: #ff4f56;
  --easter-accent: #83d2a0;
  --easter-accent-soft: rgba(102, 191, 131, 0.16);
  --easter-calendar: rgba(95, 164, 194, 0.16);
  --easter-weekend: rgba(255, 255, 255, 0.045);
  --easter-grass-1: #416e58;
  --easter-grass-2: #2e5b4b;
  --easter-grass-3: #23483d;
  background:
    radial-gradient(circle at 79% 9%, rgba(185, 117, 214, 0.16), transparent 23%),
    radial-gradient(circle at 13% 75%, rgba(120, 212, 142, 0.16), transparent 25%),
    radial-gradient(circle at 48% 8%, rgba(255, 204, 102, 0.2), transparent 24%),
    linear-gradient(155deg, #151c25 0%, #1a2430 48%, #1b3028 100%);
}

.app[data-holiday="easter"] .calendar-panel,
.app[data-holiday="easter"] .search-panel,
.app[data-holiday="easter"] .result-panel {
  --card: var(--easter-surface-strong);
  --background: var(--easter-surface-strong);
  --muted: var(--easter-surface-soft);
  --muted-foreground: var(--easter-muted);
  --accent: var(--easter-calendar);
  --foreground: var(--easter-text);
  --card-foreground: var(--easter-text);
  --border: var(--easter-line);
  --input: var(--easter-line);
  color: var(--easter-text);
}

.app[data-holiday="easter"] .calendar-panel,
.app[data-holiday="easter"] .result-panel {
  background: var(--easter-surface);
  border-radius: 26px;
  box-shadow: 0 24px 55px rgba(82, 91, 64, 0.14);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}

.app[data-theme="light"][data-holiday="easter"] .calendar-panel {
  background: rgb(255 255 255 / 23%);
}

.app[data-theme="dark"][data-holiday="easter"] .calendar-panel,
.app[data-theme="dark"][data-holiday="easter"] .result-panel {
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

.app[data-holiday="easter"] .day-cell.active {
  color: #ffffff;
  background: linear-gradient(150deg, #ff6666, var(--easter-primary-dark));
  box-shadow: 0 10px 25px rgba(255, 79, 84, 0.28);
}

.app[data-holiday="easter"] .mode-button.active,
.app[data-holiday="easter"] .primary-button {
  color: #ffffff;
  background: linear-gradient(135deg, var(--easter-primary), var(--easter-primary-dark));
  box-shadow: 0 11px 26px rgba(255, 79, 84, 0.24);
}

.app[data-holiday="easter"] .garland {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(circle at 52% 0%, rgba(255, 241, 174, 0.46), transparent 28rem),
    radial-gradient(circle at 84% 78%, rgba(255, 230, 145, 0.26), transparent 20rem),
    radial-gradient(circle at 10% 78%, rgba(128, 201, 143, 0.24), transparent 20rem);
}

.app[data-theme="dark"][data-holiday="easter"] .garland {
  background:
    radial-gradient(circle at 52% 0%, rgba(255, 204, 102, 0.16), transparent 28rem),
    radial-gradient(circle at 84% 78%, rgba(255, 230, 145, 0.12), transparent 20rem),
    radial-gradient(circle at 10% 78%, rgba(128, 201, 143, 0.14), transparent 20rem);
}

.app[data-holiday="easter"] .garland::before {
  content: "";
  position: fixed;
  right: 2%;
  bottom: 64px;
  width: min(410px, 36vw);
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 230, 145, 0.42), rgba(255, 218, 112, 0.14) 45%, transparent 72%);
  filter: blur(16px);
}

.app[data-holiday="easter"] .garland::after {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  bottom: 28px;
  height: 86px;
  background:
    radial-gradient(circle at 7% 70%, #fff6c8 0 5px, transparent 6px),
    radial-gradient(circle at 18% 56%, #f9c1ca 0 5px, transparent 6px),
    radial-gradient(circle at 34% 68%, #fff6c8 0 5px, transparent 6px),
    radial-gradient(circle at 53% 54%, #f9c1ca 0 5px, transparent 6px),
    radial-gradient(circle at 69% 70%, #fff6c8 0 5px, transparent 6px),
    radial-gradient(circle at 91% 56%, #f9c1ca 0 5px, transparent 6px);
  opacity: 0.84;
  animation: easter-flower-sway 4.8s ease-in-out infinite;
}

.app[data-holiday="easter"] .flag-wave {
  position: fixed;
  left: -8vw;
  right: -8vw;
  bottom: -84px;
  z-index: 1;
  height: 285px;
  background: linear-gradient(180deg, transparent 0 30%, var(--easter-grass-1) 31%, var(--easter-grass-2) 72%, var(--easter-grass-3) 100%);
  border-radius: 48% 52% 0 0 / 34% 38% 0 0;
  box-shadow:
    inset 0 16px 30px rgba(255, 255, 255, 0.12),
    0 -10px 20px rgba(42, 91, 51, 0.12);
}

.app[data-holiday="easter"] .flag-wave::before,
.app[data-holiday="easter"] .flag-wave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 48% 52% 0 0 / 34% 38% 0 0;
}

.app[data-holiday="easter"] .flag-wave::before {
  top: 60px;
  height: 120px;
  background: linear-gradient(180deg, var(--easter-grass-1), var(--easter-grass-2));
  opacity: 0.95;
  transform: rotate(-1.2deg);
}

.app[data-holiday="easter"] .flag-wave::after {
  top: 118px;
  height: 148px;
  background: linear-gradient(180deg, var(--easter-grass-2), var(--easter-grass-3));
  border-radius: 44% 56% 0 0 / 42% 48% 0 0;
  transform: rotate(0.8deg);
}

.app[data-holiday="easter"] .snowfall {
  --rabbit-offset-x: 0;
  position: fixed;
  right: clamp(238px, 23vw, 360px);
  bottom: clamp(42px, 7vh, 82px);
  z-index: 2;
  width: clamp(96px, 9vw, 138px);
  aspect-ratio: 420 / 568;
  display: block;
  background: url("../../Img/easter-rabbit.svg") center / contain no-repeat;
  filter: drop-shadow(0 18px 18px rgba(70, 47, 30, 0.18));
  animation: easter-rabbit-breathe 4.6s ease-in-out infinite;
}

.app[data-holiday="easter"] .holiday-ribbon {
  position: fixed;
  right: clamp(24px, 5vw, 76px);
  bottom: clamp(32px, 6vh, 68px);
  z-index: 3;
  width: clamp(132px, 13vw, 210px);
  height: clamp(118px, 12vw, 184px);
  opacity: 0.95;
  background: url("../../Img/Easter.svg") center / contain no-repeat;
  filter: drop-shadow(0 17px 18px rgba(91, 57, 33, 0.2));
  animation: easter-breathe 4.6s ease-in-out infinite;
}

.app[data-holiday="easter"] .holiday-ribbon::before {
  content: "";
  position: absolute;
  inset: 18px;
  z-index: -1;
  background: radial-gradient(circle, rgba(255, 230, 145, 0.42), rgba(255, 218, 112, 0.14) 45%, transparent 72%);
  border-radius: 50%;
  filter: blur(18px);
}

@keyframes easter-breathe {
  0%, 100% { transform: scale(0.98); }
  50% { transform: scale(1.035); }
}

@keyframes easter-rabbit-breathe {
  0%, 100% { transform: translateX(var(--rabbit-offset-x)) translateY(0) rotate(0); }
  50% { transform: translateX(var(--rabbit-offset-x)) translateY(-8px) rotate(-1deg); }
}

@keyframes easter-flower-sway {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@media (max-width: 760px) {
  .app[data-holiday="easter"] .calendar-panel,
  .app[data-holiday="easter"] .result-panel {
    border-radius: 22px;
  }

  .app[data-holiday="easter"] .flag-wave {
    bottom: -92px;
    height: 230px;
  }

  .app[data-holiday="easter"] .snowfall {
    --rabbit-offset-x: -50%;
    left: 50%;
    right: auto;
    bottom: 24px;
    width: 104px;
  }

  .app[data-holiday="easter"] .holiday-ribbon {
    display: none;
  }
}

@media (max-width: 460px) {
  .app[data-holiday="easter"] .snowfall {
    width: 90px;
    opacity: 0.86;
  }
}