/* =====================================================
   «День собран на 100%» (day_bloom.js): цветок дня
   распускается на весь экран. Тёмный фон одинаковый в
   светлой и тёмной теме: на нём цветок и светится.
   Слои снизу вверх: затемнение → сцена с цветком →
   холст с искрами → подписи.
   ===================================================== */

.dbl {
  position: fixed;
  inset: 0;
  /* Выше шторок и поздравлений (до 4000), ниже тостов. */
  z-index: 5000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px calc(56px + env(safe-area-inset-bottom));
  color: #fff;
  overflow: hidden;
  outline: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}

.dbl-shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 80% at 50% 40%, rgba(22, 26, 38, 0.72), rgba(3, 4, 8, 0.93) 70%);
  -webkit-backdrop-filter: blur(10px) saturate(0.7);
  backdrop-filter: blur(10px) saturate(0.7);
  animation: dblFade 0.55s ease-out both;
}
@keyframes dblFade { from { opacity: 0; } to { opacity: 1; } }

.dbl-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

/* ----- Сцена ----------------------------------------- */
.dbl-stage {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(80vw, 50vh, 380px);
  height: min(80vw, 50vh, 380px);
}

/* Тёплое свечение и медленно вращающееся цветное кольцо за цветком —
   те же пять цветов, что у лепестков. */
.dbl-halo {
  position: absolute;
  inset: -30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 228, 160, 0.4),
    rgba(255, 196, 120, 0.12) 50%, transparent 74%);
  opacity: 0;
  transform: scale(0.55);
  transition: opacity 1s ease, transform 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.dbl-halo::after {
  content: '';
  position: absolute;
  inset: 22%;
  border-radius: 50%;
  background: conic-gradient(#22c55e, #4ade80, #38bdf8, #f59e0b, #8b5cf6, #22c55e);
  filter: blur(38px);
  opacity: 0.42;
  animation: dblSpin 16s linear infinite;
  will-change: transform;
}

.dbl-rays {
  position: absolute;
  inset: -62%;
  border-radius: 50%;
  background: repeating-conic-gradient(rgba(255, 240, 205, 0.13) 0deg 2.5deg,
    transparent 2.5deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 74%);
  mask-image: radial-gradient(closest-side, #000 22%, transparent 74%);
  opacity: 0;
  transition: opacity 1.6s ease 0.1s;
  animation: dblSpin 70s linear infinite;
  will-change: transform;
}
@keyframes dblSpin { to { transform: rotate(360deg); } }

.dbl-ring {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  border: 2px solid rgba(255, 246, 220, 0.9);
  box-shadow: 0 0 26px rgba(255, 226, 160, 0.55), inset 0 0 26px rgba(255, 226, 160, 0.35);
  opacity: 0;
}
.dbl-ring-2 {
  border-color: rgba(167, 139, 250, 0.7);
  box-shadow: 0 0 30px rgba(56, 189, 248, 0.45);
}

.dbl-flash {
  position: absolute;
  inset: 18%;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff, rgba(255, 244, 214, 0.85) 32%,
    rgba(255, 214, 140, 0) 72%);
  opacity: 0;
  pointer-events: none;
}

.dbl-fly {
  position: absolute;
  inset: 0;
  transition: transform 0.62s cubic-bezier(0.55, 0, 0.25, 1), opacity 0.22s ease 0.42s;
  will-change: transform;
}
/* Тени у цветка нет намеренно: фильтр на родителе пересчитывал бы все пять
   анимируемых лепестков на каждом кадре, а на тёмном фоне её и не видно. */
.dbl-bloom {
  position: absolute;
  inset: 0;
}

.dbl-petal,
.dbl-flower,
.dbl-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Лепесток — вся картинка под маской своего сектора. Растёт из середины
   с поворотом по часовой стрелке и пружинит на месте. */
.dbl-petal {
  opacity: 0;
  will-change: transform, opacity;
}
.dbl-petal.on {
  animation: dblPetal 0.78s cubic-bezier(0.2, 0.8, 0.25, 1) both;
}
@keyframes dblPetal {
  0% { opacity: 0; transform: rotate(-44deg) scale(0.1); filter: brightness(2.6); }
  40% { opacity: 1; }
  62% { transform: rotate(5deg) scale(1.08); filter: brightness(1.35); }
  82% { transform: rotate(-1.5deg) scale(0.985); filter: brightness(1.05); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* Когда встал последний лепесток, под ними проявляется цельная картинка:
   на стыках масок остаются полупрозрачные швы, у цельной их нет. */
.dbl-flower {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.dbl.settled .dbl-flower { opacity: 1; }
.dbl.settled .dbl-petal { visibility: hidden; transition: visibility 0s linear 0.35s; }
.dbl.settled .dbl-bloom { animation: dblBreathe 6s ease-in-out infinite; }
@keyframes dblBreathe {
  0%, 100% { transform: none; }
  50% { transform: scale(1.03) rotate(2deg); }
}

.dbl.bloomed .dbl-halo { opacity: 1; transform: none; }
.dbl.bloomed .dbl-rays { opacity: 1; }
.dbl.bloomed .dbl-ring { animation: dblRing 1.05s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.dbl.bloomed .dbl-ring-2 { animation-delay: 0.14s; animation-duration: 1.25s; }
.dbl.bloomed .dbl-flash { animation: dblFlash 0.9s ease-out both; }
@keyframes dblRing {
  0% { opacity: 0.95; transform: scale(0.22); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes dblFlash {
  0% { opacity: 0; transform: scale(0.3); }
  22% { opacity: 0.95; }
  100% { opacity: 0; transform: scale(1.9); }
}

/* Картинка не загрузилась: крупно распускается векторный цветок карточки. */
.dbl.no-img .dbl-petal,
.dbl.no-img .dbl-flower { display: none; }
.dbl-svg { opacity: 0; }
.dbl.bloomed .dbl-svg { animation: dblPetal 0.9s cubic-bezier(0.2, 0.8, 0.25, 1) both; }

/* ----- Подписи --------------------------------------- */
.dbl-copy {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 360px;
  margin-top: clamp(18px, 4.5vh, 40px);
  text-align: center;
  pointer-events: none;
}
.dbl-title {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transform: translateY(14px) scale(0.96);
  transition: opacity 0.6s ease 0.12s, transform 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.12s;
}
.dbl-score {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 232, 178, 0.92);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease 0.3s, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
}
.dbl.bloomed .dbl-title,
.dbl.bloomed .dbl-score { opacity: 1; transform: none; }

.dbl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}
.dbl-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-pill, 999px);
  background: rgba(255, 255, 255, 0.07);
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  opacity: 0;
  transform: translateY(8px) scale(0.9);
  transition: opacity 0.35s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.dbl-chip i {
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--c);
  box-shadow: 0 0 10px var(--c);
}
.dbl-chip.on {
  opacity: 1;
  transform: none;
  animation: dblChip 1s ease-out both;
}
@keyframes dblChip {
  0% { border-color: var(--c); box-shadow: 0 0 14px -2px var(--c); }
  100% { border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 0 14px -2px transparent; }
}

.dbl-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(20px + env(safe-area-inset-bottom));
  z-index: 3;
  font-size: 12.5px;
  text-align: center;
  color: rgba(255, 255, 255, 0.46);
  opacity: 0;
  transition: opacity 0.8s ease 1.6s;
  pointer-events: none;
}
.dbl.bloomed .dbl-hint { opacity: 1; }

/* ----- Уход ------------------------------------------ */
.dbl.out { pointer-events: none; }
.dbl.out .dbl-shade { animation: dblFadeOut 0.5s ease 0.1s both; }
@keyframes dblFadeOut { from { opacity: 1; } to { opacity: 0; } }
.dbl.out .dbl-copy,
.dbl.out .dbl-hint,
.dbl.out .dbl-halo,
.dbl.out .dbl-rays,
.dbl.out .dbl-fx {
  opacity: 0;
  transition: opacity 0.22s ease;
}
.dbl.out-home .dbl-fly { opacity: 0; }
.dbl.out-away .dbl-fly {
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.4s ease-in, opacity 0.3s ease 0.05s;
}

/* Маленький цветок карточки принимает улетевший цветок. */
.ds-flower.dbl-pop { animation: dblPop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes dblPop {
  0% { transform: scale(1.45); filter: brightness(1.6) drop-shadow(0 0 10px rgba(255, 220, 140, 0.8)); }
  100% { transform: none; filter: none; }
}

/* Собранный день: цветок в карточке чуть светится — на него можно нажать и
   посмотреть праздник ещё раз. */
.day-score.is-full .ds-flower {
  filter: drop-shadow(0 0 5px rgba(250, 204, 21, 0.45));
}

/* Без движения: цветок и подписи сразу на месте, только плавное появление. */
.dbl.calm .dbl-petal { display: none; }
.dbl.calm .dbl-svg { animation: none; opacity: 1; }
.dbl.calm .dbl-flower,
.dbl.calm .dbl-title,
.dbl.calm .dbl-score,
.dbl.calm .dbl-chip,
.dbl.calm .dbl-hint,
.dbl.calm .dbl-halo { transition: none; animation: none; }
.dbl.calm .dbl-halo::after,
.dbl.calm .dbl-rays,
.dbl.calm .dbl-ring,
.dbl.calm .dbl-flash,
.dbl.calm .dbl-bloom { animation: none; }
.dbl.calm .dbl-ring,
.dbl.calm .dbl-flash { display: none; }
.dbl.calm.out .dbl-fly { transition: opacity 0.2s ease; }