/*
 * notifications-overlay.css
 * ------------------------------------------------------------
 * Оверлей по центру экрана для уведомлений администрации и анимаций
 * назначения роли. Подключается на каждой странице сайта вместе с
 * notifications-overlay.js, использует общую палитру сайта (переменные
 * из spell_system/catalog.css).
 * ------------------------------------------------------------ */

.yd-overlay-backdrop{
  position:fixed;
  inset:0;
  background:rgba(20,14,4,.55);
  backdrop-filter:blur(2px);
  z-index:9000;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease;
  overflow:hidden;
}
.yd-overlay-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

/* Полноэкранный слой частиц (молнии/звёзды/искры/осколки) — под карточкой
   по z-index, генерируется и очищается в notifications-overlay.js, сам
   вид/тайминг каждой частицы описан в пресетах анимаций ниже. */
.yd-overlay-fx{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}

.yd-overlay-card{
  position:relative;
  z-index:2;
  max-width:420px;
  width:calc(100% - 48px);
  background:var(--color-paper, #fdf6e8);
  border:1px solid var(--color-line, #c7ad7a);
  border-radius:16px;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
  padding:28px 26px 22px;
  text-align:center;
  transform:scale(.85) translateY(10px);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.yd-overlay-backdrop.is-open .yd-overlay-card{
  transform:scale(1) translateY(0);
}

.yd-overlay-close{
  position:absolute;
  top:10px;
  right:10px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background:var(--color-paper-2, #f4ead0);
  color:var(--color-amber-dark, #7a4a08);
  font-size:17px;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background .15s, color .15s;
}
.yd-overlay-close:hover{
  background:var(--color-amber, #b8720c);
  color:#fff;
}

.yd-overlay-icon{
  font-size:40px;
  margin-bottom:6px;
}
.yd-overlay-title{
  font-family:'Neucha',cursive;
  font-size:24px;
  color:var(--color-amber-dark, #7a4a08);
  margin-bottom:10px;
}
.yd-overlay-text{
  font-size:14.5px;
  line-height:1.55;
  color:var(--color-dark, #2b2013);
  margin-bottom:16px;
}
.yd-overlay-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 22px;
  border-radius:10px;
  border:none;
  background:linear-gradient(135deg,var(--color-amber-soft, #e0a13f),var(--color-amber, #b8720c));
  color:#2b2013;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  transition:transform .1s, box-shadow .15s;
}
.yd-overlay-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(70,45,10,.2);
}

/* ---------- Роль-бейдж в оверлее назначения роли ---------- */
.yd-role-badge{
  display:inline-block;
  padding:5px 18px;
  border-radius:20px;
  font-family:'Neucha',cursive;
  font-size:19px;
  font-weight:700;
  color:#fff;
  margin-bottom:12px;
  box-shadow:0 3px 10px rgba(0,0,0,.25);
}

/* ============================================================
   Пресеты анимаций назначения роли — каждая привязана к css_class
   из role_animations.css_class (см. server/db/seed.js). Анимация
   применяется к .yd-overlay-card через модификатор класса.
   ============================================================ */

/* --- golden-seal: печать проступает золотым сиянием --- */
.role-anim--golden-seal .yd-overlay-card{
  animation: ydGoldenSeal 1s ease-out;
}
@keyframes ydGoldenSeal{
  0%{ box-shadow:0 0 0 0 rgba(184,114,12,0); }
  30%{ box-shadow:0 0 60px 10px rgba(224,161,63,.65); }
  100%{ box-shadow:0 12px 40px rgba(0,0,0,.35); }
}
.role-anim--golden-seal .yd-role-badge{
  background:linear-gradient(135deg,#f0c14b,#b8720c);
  animation: ydBadgePulse 1.6s ease-in-out infinite;
}

/* --- confetti-burst: цветное конфетти вокруг карточки --- */
.role-anim--confetti-burst .yd-overlay-card::before,
.role-anim--confetti-burst .yd-overlay-card::after{
  content:'';
  position:absolute;
  inset:-20px;
  background-image:
    radial-gradient(circle, #e0562f 3px, transparent 4px),
    radial-gradient(circle, #2f8fe0 3px, transparent 4px),
    radial-gradient(circle, #4f9e4a 3px, transparent 4px),
    radial-gradient(circle, #e8c94a 3px, transparent 4px);
  background-size:40px 40px, 55px 55px, 35px 35px, 48px 48px;
  background-position:0 0, 20px 30px, 40px 10px, 10px 45px;
  opacity:0;
  pointer-events:none;
  animation: ydConfettiFall 1.4s ease-out;
  z-index:-1;
}
@keyframes ydConfettiFall{
  0%{ opacity:0; transform:translateY(-30px); }
  30%{ opacity:1; }
  100%{ opacity:0; transform:translateY(40px); }
}

/* --- royal-banner: тёмно-фиолетовый стяг раскрывается сверху --- */
.role-anim--royal-banner .yd-overlay-card{
  animation: ydRoyalUnfurl .7s cubic-bezier(.2,.9,.3,1.2);
  transform-origin:top center;
}
@keyframes ydRoyalUnfurl{
  0%{ transform:scaleY(.1) translateY(-40px); opacity:0; }
  60%{ transform:scaleY(1.05) translateY(4px); opacity:1; }
  100%{ transform:scaleY(1) translateY(0); }
}
.role-anim--royal-banner .yd-role-badge{
  background:linear-gradient(135deg,#7d3fa0,#3d2f66);
}

/* --- arcane-sigil: магическая печать вращается при появлении --- */
.role-anim--arcane-sigil .yd-overlay-icon{
  animation: ydSigilSpin 1s ease-out;
  display:inline-block;
}
@keyframes ydSigilSpin{
  0%{ transform:rotate(-180deg) scale(.4); opacity:0; }
  100%{ transform:rotate(0deg) scale(1); opacity:1; }
}
.role-anim--arcane-sigil .yd-role-badge{
  background:linear-gradient(135deg,#9b3fd4,#5b4d8a);
}

/* --- simple-badge: скромное появление, для младших ролей --- */
.role-anim--simple-badge .yd-overlay-card{
  animation: ydSimpleFade .35s ease-out;
}
@keyframes ydSimpleFade{
  0%{ opacity:0; transform:translateY(6px); }
  100%{ opacity:1; transform:translateY(0); }
}
.role-anim--simple-badge .yd-role-badge{
  background:var(--color-sand-dark, #d8c395);
  color:var(--color-dark, #2b2013);
}

@keyframes ydBadgePulse{
  0%,100%{ box-shadow:0 3px 10px rgba(0,0,0,.25); }
  50%{ box-shadow:0 3px 22px rgba(224,161,63,.7); }
}

/* ============================================================
   Новые полноэкранные пресеты — DOM-частицы для них генерируются
   в notifications-overlay.js (FX_BUILDERS), здесь только их внешний
   вид/тайминг + фон-модификатор самого backdrop, где нужен.
   ============================================================ */

/* --- lightning-storm: молнии по всему экрану + белая вспышка --- */
.role-anim--lightning-storm.yd-overlay-backdrop{
  animation: ydStormDarken .15s ease-out;
}
@keyframes ydStormDarken{ 0%{ background:rgba(10,10,20,.85); } 100%{} }
.yd-fx-bolt{
  position:absolute;
  top:-5%;
  width:3px;
  height:55%;
  background:linear-gradient(180deg, #fff, #cbe8ff 40%, transparent);
  box-shadow:0 0 12px 3px #cbe8ff, 0 0 30px 8px rgba(180,220,255,.6);
  clip-path:polygon(50% 0%, 65% 20%, 45% 22%, 60% 45%, 35% 48%, 55% 75%, 30% 78%, 50% 100%, 20% 82%, 42% 76%, 15% 50%, 40% 46%, 18% 24%, 40% 20%);
  opacity:0;
  animation: ydBoltFlicker .5s ease-out;
}
@keyframes ydBoltFlicker{
  0%{ opacity:0; }
  8%{ opacity:1; }
  14%{ opacity:.2; }
  20%{ opacity:1; }
  30%{ opacity:0; }
  100%{ opacity:0; }
}
.yd-fx-flash{
  position:absolute;
  inset:0;
  background:#e8f2ff;
  animation: ydFlashPulse 1.4s ease-out 2;
}
@keyframes ydFlashPulse{
  0%{ opacity:.9; }
  10%{ opacity:0; }
  100%{ opacity:0; }
}
.role-anim--lightning-storm .yd-overlay-card{
  animation: ydCardShake .5s ease-out;
}
@keyframes ydCardShake{
  0%,100%{ transform:translate(0,0); }
  20%{ transform:translate(-4px,2px); }
  40%{ transform:translate(4px,-2px); }
  60%{ transform:translate(-3px,1px); }
  80%{ transform:translate(3px,-1px); }
}
.role-anim--lightning-storm .yd-role-badge{
  background:linear-gradient(135deg,#7fd3e8,#2f8fe0);
  animation: ydBadgePulse 1.2s ease-in-out infinite;
}

/* --- starfall: звёзды падают по всему экрану --- */
.yd-fx-star{
  position:absolute;
  top:-8%;
  font-size:16px;
  color:#f0e0a8;
  text-shadow:0 0 8px #f0c14b, 0 0 16px rgba(240,193,75,.6);
  animation: ydStarFall linear forwards;
}
@keyframes ydStarFall{
  0%{ transform:translateY(0) rotate(0deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(115vh) rotate(360deg); opacity:0; }
}
.role-anim--starfall .yd-overlay-card{
  animation: ydRoyalUnfurl .8s cubic-bezier(.2,.9,.3,1.2);
}
.role-anim--starfall .yd-role-badge{
  background:linear-gradient(135deg,#f5e7a8,#e8c94a);
  color:#4a3d1a;
  animation: ydBadgePulse 1.8s ease-in-out infinite;
}

/* --- fire-eruption: огненные искры взлетают снизу + тёплое зарево --- */
.yd-fx-heat-glow{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 100%, rgba(224,86,47,.55), transparent 60%);
  animation: ydHeatPulse 1.8s ease-in-out infinite;
}
@keyframes ydHeatPulse{
  0%,100%{ opacity:.6; }
  50%{ opacity:1; }
}
.yd-fx-spark{
  position:absolute;
  bottom:-4%;
  width:5px;
  height:5px;
  border-radius:50%;
  background:radial-gradient(circle, #fff5d6, #e0562f 70%);
  box-shadow:0 0 8px 2px rgba(224,86,47,.8);
  animation: ydSparkRise 1.6s ease-out forwards;
}
@keyframes ydSparkRise{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--drift,0), -85vh) scale(.3); opacity:0; }
}
.role-anim--fire-eruption .yd-overlay-card{
  animation: ydGoldenSeal .9s ease-out;
}
.role-anim--fire-eruption .yd-role-badge{
  background:linear-gradient(135deg,#f0a830,#a3251a);
  animation: ydBadgePulse 1.3s ease-in-out infinite;
}

/* --- frost-shatter: ледяные осколки разлетаются из центра --- */
.yd-fx-shard{
  position:absolute;
  top:50%;
  left:50%;
  width:10px;
  height:26px;
  background:linear-gradient(180deg, #eaffff, #7fd3e8);
  clip-path:polygon(50% 0%, 100% 30%, 70% 100%, 30% 100%, 0% 30%);
  box-shadow:0 0 6px rgba(127,211,232,.8);
  opacity:0;
  animation: ydShardFly .7s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes ydShardFly{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) rotate(0deg) translateY(0);
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(calc(var(--angle) + 180deg))
      translate(0, calc(var(--dist) * -1));
  }
}
.role-anim--frost-shatter .yd-overlay-backdrop{
  animation: ydFrostFlash .3s ease-out;
}
@keyframes ydFrostFlash{
  0%{ background:rgba(200,235,245,.5); }
  100%{}
}
.role-anim--frost-shatter .yd-overlay-card{
  animation: ydSimpleFade .3s ease-out;
}
.role-anim--frost-shatter .yd-role-badge{
  background:linear-gradient(135deg,#eaffff,#2f8fe0);
  color:#0a2540;
}

/* --- void-portal: тёмный портал с частицами, затягивающими внутрь --- */
.yd-fx-portal-ring{
  position:absolute;
  top:50%;
  left:50%;
  width:60px;
  height:60px;
  border-radius:50%;
  border:3px solid #9b3fd4;
  box-shadow:0 0 30px 10px rgba(155,63,212,.5), inset 0 0 20px rgba(155,63,212,.6);
  transform:translate(-50%,-50%) scale(0);
  animation: ydPortalGrow .6s ease-out forwards;
}
@keyframes ydPortalGrow{
  0%{ transform:translate(-50%,-50%) scale(0); opacity:1; }
  70%{ transform:translate(-50%,-50%) scale(9); opacity:.5; }
  100%{ transform:translate(-50%,-50%) scale(14); opacity:0; }
}
.yd-fx-void-particle{
  position:absolute;
  top:50%;
  left:50%;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#c9a0e8;
  box-shadow:0 0 6px #9b3fd4;
  animation: ydVoidSuck .8s ease-in forwards;
}
@keyframes ydVoidSuck{
  0%{
    opacity:1;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translate(220px, 0);
  }
  100%{
    opacity:0;
    transform:
      translate(-50%,-50%)
      rotate(var(--angle))
      translate(0, 0);
  }
}
.role-anim--void-portal .yd-overlay-card{
  animation: ydSigilSpin .6s ease-out .3s backwards;
}
.role-anim--void-portal .yd-role-badge{
  background:linear-gradient(135deg,#5b4d8a,#1a1230);
}