/* =========================================================
   Notification (applies to #notification)
   Uses token classes like:
     .notif--pos-bottom-center
     .notif--size-normal
     .notif--bg-dark-glass
     .notif--in-slide-up
     .notif--out-fade-out
     .notif--pulse
   Uses CSS vars:
     --notif-accent
     --notif-font
     --ui-scale  (set by UIScaler)
   ========================================================= */

#notification {
  /* scale alias (so you can later clamp it if desired) */
  --notif-scale: var(--ui-scale, 1);

  position: fixed;
  z-index: 1000;
  display: none;

  /* Base look */
  color: #fff;
  padding: calc(12px * var(--notif-scale)) calc(18px * var(--notif-scale));
  border-radius: calc(10px * var(--notif-scale));
  line-height: 1.25;
  max-width: min(calc(520px * var(--notif-scale)), 92vw);
  box-sizing: border-box;
  word-wrap: break-word;

  /* Nice defaults */
  background: rgba(0, 0, 0, 0.35);
  border-left: calc(4px * var(--notif-scale)) solid var(--notif-accent, transparent);

  /* Font (creator-controlled) */
  font-family: var(--notif-font, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);

  /* Animation baseline */
  opacity: 0;
  transform: translate(-50%, -50%) translateY(0) scale(1);
  transition: opacity 0.25s ease, transform 0.35s ease, box-shadow 0.35s ease;
}

/* -----------------------------------------
   Positions
   ----------------------------------------- */

/* Center */
#notification.notif--pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(0) scale(1);
}

/* Top/Bottom center */
#notification.notif--pos-top-center {
  top: calc(24px * var(--notif-scale));
  left: 50%;
  transform: translate(-50%, 0) translateY(0) scale(1);
}
#notification.notif--pos-bottom-center {
  bottom: calc(24px * var(--notif-scale));
  left: 50%;
  transform: translate(-50%, 0) translateY(0) scale(1);
}

/* Corners */
#notification.notif--pos-top-left {
  top: calc(24px * var(--notif-scale));
  left: calc(24px * var(--notif-scale));
  transform: translate(0, 0) translateY(0) scale(1);
}
#notification.notif--pos-top-right {
  top: calc(24px * var(--notif-scale));
  right: calc(24px * var(--notif-scale));
  left: auto;
  transform: translate(0, 0) translateY(0) scale(1);
}
#notification.notif--pos-bottom-left {
  bottom: calc(24px * var(--notif-scale));
  left: calc(24px * var(--notif-scale));
  transform: translate(0, 0) translateY(0) scale(1);
}
#notification.notif--pos-bottom-right {
  bottom: calc(24px * var(--notif-scale));
  right: calc(24px * var(--notif-scale));
  left: auto;
  transform: translate(0, 0) translateY(0) scale(1);
}

/* -----------------------------------------
   Sizes
   ----------------------------------------- */
#notification.notif--size-small {
  font-size: calc(0.9em * var(--notif-scale));
  padding: calc(10px * var(--notif-scale)) calc(14px * var(--notif-scale));
}
#notification.notif--size-normal {
  font-size: calc(1.0em * var(--notif-scale));
  padding: calc(12px * var(--notif-scale)) calc(18px * var(--notif-scale));
}
#notification.notif--size-large {
  font-size: calc(1.15em * var(--notif-scale));
  padding: calc(14px * var(--notif-scale)) calc(20px * var(--notif-scale));
}

/* -----------------------------------------
   Background styles
   ----------------------------------------- */

/* Dark glass */
#notification.notif--bg-dark-glass {
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(calc(6px * var(--notif-scale)));
  -webkit-backdrop-filter: blur(calc(6px * var(--notif-scale)));
  box-shadow: 0 calc(10px * var(--notif-scale)) calc(30px * var(--notif-scale)) rgba(0,0,0,0.18);
}

/* Light paper */
#notification.notif--bg-light-paper {
  background: rgba(255, 255, 255, 0.92);
  color: #111;
  box-shadow: 0 calc(10px * var(--notif-scale)) calc(30px * var(--notif-scale)) rgba(0,0,0,0.14);
}

/* Solid dark */
#notification.notif--bg-solid-dark {
  background: rgba(0, 0, 0, 0.78);
  box-shadow: 0 calc(10px * var(--notif-scale)) calc(30px * var(--notif-scale)) rgba(0,0,0,0.22);
}

/* Solid light */
#notification.notif--bg-solid-light {
  background: rgba(255, 255, 255, 1);
  color: #111;
  box-shadow: 0 calc(10px * var(--notif-scale)) calc(30px * var(--notif-scale)) rgba(0,0,0,0.12);
}

/* Accent background (uses --notif-accent) */
#notification.notif--bg-accent {
  background: var(--notif-accent, rgba(0,0,0,0.6));
  color: #fff;
  border-left-color: rgba(255,255,255,0.55);
  box-shadow: 0 calc(10px * var(--notif-scale)) calc(30px * var(--notif-scale)) rgba(0,0,0,0.22);
}

/* -----------------------------------------
   Entrance states
   We drive entrance by adding .notif--show
   plus the selected in-* class.
   ----------------------------------------- */

/* Default show (if no entrance class) */
#notification.notif--show {
  opacity: 1;
}

/* Fade In */
#notification.notif--in-fade-in {
  opacity: 0;
}
#notification.notif--show.notif--in-fade-in {
  opacity: 1;
}

/* Slide Up */
#notification.notif--in-slide-up {
  opacity: 0;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(calc(14px * var(--notif-scale)));
}
#notification.notif--show.notif--in-slide-up {
  opacity: 1;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(0);
}

/* Slide Down */
#notification.notif--in-slide-down {
  opacity: 0;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(calc(-14px * var(--notif-scale)));
}
#notification.notif--show.notif--in-slide-down {
  opacity: 1;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(0);
}

/* Pop */
#notification.notif--in-pop {
  opacity: 0;
  transform: var(--notif-base-transform, translate(-50%, -50%)) scale(0.96);
}
#notification.notif--show.notif--in-pop {
  opacity: 1;
  transform: var(--notif-base-transform, translate(-50%, -50%)) scale(1);
}

/* None */
#notification.notif--in-none {
  opacity: 1;
  transition: none;
}
#notification.notif--show.notif--in-none {
  opacity: 1;
}

/* -----------------------------------------
   Exit states
   When hiding, add .notif--hide
   plus the selected out-* class.
   ----------------------------------------- */

#notification.notif--hide {
  opacity: 0;
}

/* Fade Out */
#notification.notif--out-fade-out.notif--hide {
  opacity: 0;
}

/* Slide Up out */
#notification.notif--out-slide-up.notif--hide {
  opacity: 0;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(calc(-14px * var(--notif-scale)));
}

/* Slide Down out */
#notification.notif--out-slide-down.notif--hide {
  opacity: 0;
  transform: var(--notif-base-transform, translate(-50%, -50%)) translateY(calc(14px * var(--notif-scale)));
}

/* None */
#notification.notif--out-none {
  transition: none;
}
#notification.notif--out-none.notif--hide {
  opacity: 0;
  transition: none;
}

/* -----------------------------------------
   Pulse (gentle, non-tacky)
   ----------------------------------------- */
#notification.notif--pulse.notif--show {
  animation: notifPulse 1.6s ease-in-out infinite;
}

@keyframes notifPulse {
  0% {
    box-shadow: 0 calc(10px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) rgba(0,0,0,0.16);
  }
  50% {
    box-shadow: 0 calc(12px * var(--ui-scale, 1)) calc(34px * var(--ui-scale, 1)) rgba(0,0,0,0.28);
  }
  100% {
    box-shadow: 0 calc(10px * var(--ui-scale, 1)) calc(30px * var(--ui-scale, 1)) rgba(0,0,0,0.16);
  }
}

/* -----------------------------------------
   Transform base per position
   We store the "base transform" as a variable
   so entrance/exit translateY/scale doesn't
   break corner positions.
   ----------------------------------------- */

/* Center base */
#notification.notif--pos-center {
  --notif-base-transform: translate(-50%, -50%);
}

/* Top/Bottom center base */
#notification.notif--pos-top-center,
#notification.notif--pos-bottom-center {
  --notif-base-transform: translate(-50%, 0);
}

/* Corners base */
#notification.notif--pos-top-left,
#notification.notif--pos-top-right,
#notification.notif--pos-bottom-left,
#notification.notif--pos-bottom-right {
  --notif-base-transform: translate(0, 0);
}

/* Apply base transform consistently */
#notification {
  transform: var(--notif-base-transform, translate(-50%, -50%));
}

/* -----------------------------------------
   Reduced motion accessibility
   ----------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #notification {
    transition: none !important;
    animation: none !important;
  }
}