/* Notification bars — copied unchanged from the DSN Showcase V4 theme (assets/css/style.css). */

/* ---- Notification bar entrance animations --------------------------------
   Each bar picks its own direction in Theme Options → Notifications
   (dsn_render_notification_bar()); with 2+ bars in the slider, main.js's
   initNotificationSlider() replays this every time a bar becomes the
   visible one, not just on first page load. */
@keyframes dsn-notif-in-top {
	from { transform: translateY(-100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes dsn-notif-in-bottom {
	from { transform: translateY(100%); opacity: 0; }
	to { transform: translateY(0); opacity: 1; }
}
@keyframes dsn-notif-in-left {
	from { transform: translateX(-100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
@keyframes dsn-notif-in-right {
	from { transform: translateX(100%); opacity: 0; }
	to { transform: translateX(0); opacity: 1; }
}
.dsn-notif-anim-top {
	animation: dsn-notif-in-top 0.5s ease both;
}
.dsn-notif-anim-bottom {
	animation: dsn-notif-in-bottom 0.5s ease both;
}
.dsn-notif-anim-left {
	animation: dsn-notif-in-left 0.5s ease both;
}
.dsn-notif-anim-right {
	animation: dsn-notif-in-right 0.5s ease both;
}
@media (prefers-reduced-motion: reduce) {
	.dsn-notif-anim-top,
	.dsn-notif-anim-bottom,
	.dsn-notif-anim-left,
	.dsn-notif-anim-right {
		animation: none;
	}
}

/* ---- Notification bar background types (Theme Options → Notifications,
   "Background Type") --------------------------------------------------
   Image: --dsn-notif-bg-desktop / --dsn-notif-bg-mobile are set inline
   per bar (see dsn_render_notification_bar() in inc/template-tags.php);
   defining the actual background-image here — rather than inline — is
   what lets a plain CSS media query pick between the two. var()'s second
   argument is a fallback, so a bar with no mobile image just keeps using
   the desktop one below the breakpoint too. */
.dsn-notif-bg-image {
	background-size: cover;
	background-position: center;
	background-image: var( --dsn-notif-bg-mobile, var( --dsn-notif-bg-desktop ) );
}
@media (min-width: 768px) {
	.dsn-notif-bg-image {
		background-image: var( --dsn-notif-bg-desktop );
	}
}

/* Texture: a light, repeating overlay on top of the row's own Background
   Color (set via a separate background-color, so these can layer above
   it) — subtle by design, meant for a dark/saturated base color. */
.dsn-notif-texture-dots {
	background-image: radial-gradient( rgba( 255, 255, 255, 0.28 ) 1px, transparent 1.5px );
	background-size: 13px 13px;
}
.dsn-notif-texture-diagonal {
	background-image: repeating-linear-gradient( 45deg, rgba( 255, 255, 255, 0.16 ) 0, rgba( 255, 255, 255, 0.16 ) 2px, transparent 2px, transparent 10px );
}
.dsn-notif-texture-grid {
	background-image:
		linear-gradient( rgba( 255, 255, 255, 0.16 ) 1px, transparent 1px ),
		linear-gradient( 90deg, rgba( 255, 255, 255, 0.16 ) 1px, transparent 1px );
	background-size: 16px 16px;
}
.dsn-notif-texture-waves {
	background-image: repeating-radial-gradient( circle at 0 0, transparent 0, rgba( 255, 255, 255, 0.14 ) 9px, transparent 10px );
	background-size: 20px 20px;
}