/**
 * Occasion Banner — frontend styles.
 *
 * All styles are scoped to .occ-banner so they cannot collide with
 * any theme (GeneratePress, Astra, block themes, …).
 */

.occ-banner {
	--occ-bg1: #111827;
	--occ-bg2: #3b2f63;
	--occ-text: #ffffff;
	--occ-cta-bg: #f59e0b;
	--occ-cta-text: #111827;
	--occ-z: 999999;
	--occ-height: 44px;
	--occ-font-size: 14px;
	--occ-speed: 16s;

	position: relative;
	width: 100%;
	min-height: var(--occ-height);
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	font-family: inherit;
	font-size: var(--occ-font-size);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
	color: var(--occ-text);
	background-image: linear-gradient(100deg, var(--occ-bg1), var(--occ-bg2), var(--occ-bg3, var(--occ-bg2)));
	background-size: 220% 100%;
	background-repeat: no-repeat;
	box-shadow: 0 1px 12px rgba(0, 0, 0, 0.18);
	-webkit-tap-highlight-color: transparent;
}

/* Positioning ---------------------------------------------------------- */

.occ-banner--sticky.occ-banner--top {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--occ-z);
}

.occ-banner--sticky.occ-banner--bottom {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: var(--occ-z);
}

/* Late injection (theme without wp_body_open) — always overlays. */
.occ-banner--late {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var(--occ-z);
}
.occ-banner--late.occ-banner--top { top: 0; }
.occ-banner--late.occ-banner--bottom { bottom: 0; }

/* Inline (shortcode / block inside a layout) */
.occ-banner--inline {
	position: relative;
	border-radius: 10px;
}

.occ-banner__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	box-sizing: border-box;
	padding: 6px 14px;
	min-height: var(--occ-height);
}

.occ-banner--closable .occ-banner__inner {
	padding-right: 42px;
}

/* Background image layers (admin-picked) */

.occ-banner__bgimg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.occ-banner__imgoverlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, var(--occ-img-alpha, 0.45));
	pointer-events: none;
}

/* Icon ------------------------------------------------------------------- */

.occ-banner__icon {
	display: inline-flex;
	align-items: center;
	font-size: calc(var(--occ-font-size) * 1.2);
	line-height: 1;
	flex: 0 0 auto;
	animation: occ-float 2.4s ease-in-out infinite;
}

@keyframes occ-float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-3px); }
}

/* Text ------------------------------------------------------------------- */

.occ-banner__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}

.occ-banner__line {
	display: inline-block;
	white-space: nowrap;
}

/* CTA --------------------------------------------------------------------- */

.occ-banner__cta {
	position: relative;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 5px 14px;
	margin-right: 4px;
	border-radius: 999px;
	background: var(--occ-cta-bg);
	color: var(--occ-cta-text);
	font-size: calc(var(--occ-font-size) * 0.95);
	font-weight: 800;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.occ-banner__cta:hover,
.occ-banner__cta:focus {
	transform: translateY(-1px) scale(1.04);
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* Close button -------------------------------------------------------------- */

.occ-banner__close {
	position: absolute;
	z-index: 4;
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	color: inherit;
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	opacity: 0.75;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.occ-banner__close:hover,
.occ-banner__close:focus {
	opacity: 1;
	background: rgba(0, 0, 0, 0.42);
}

/* Particle canvas ------------------------------------------------------------ */

.occ-banner__fx-canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
}

/* ============================= FRAMER MOTION ============================== */

.occ-fm .occ-banner__stage {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.occ-fm {
	position: relative;
	width: 100%;
	height: 100%;
}

/* Background layers (animated by Framer) */
.occ-fm__layers {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.occ-fm__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(100deg, var(--occ-bg1), var(--occ-bg2), var(--occ-bg3, var(--occ-bg2)));
	background-size: 220% 100%;
	background-repeat: no-repeat;
	transform-origin: top center;
	will-change: transform, opacity;
}

.occ-fm__bgimg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center center;
	background-repeat: no-repeat;
	will-change: transform, opacity;
}

.occ-fm__imgoverlay {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}

.occ-fm__glowflow {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-image: linear-gradient(100deg, var(--occ-bg1), var(--occ-bg2), var(--occ-bg3, var(--occ-bg2)));
	background-size: 220% 100%;
	will-change: background-position;
}

.occ-fm__glow {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(70% 160% at 50% 0%, rgba(255, 255, 255, 0.25), transparent 70%);
	pointer-events: none;
	will-change: opacity, transform;
}

/* Content row */
.occ-fm__row {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 6px 14px;
	box-sizing: border-box;
	min-height: var(--occ-height);
}

.occ-banner--closable .occ-fm__row {
	padding-right: 42px;
}

.occ-fm__icon {
	display: inline-flex;
	align-items: center;
	font-size: calc(var(--occ-font-size) * 1.2);
	line-height: 1;
	flex: 0 0 auto;
	will-change: transform;
}

.occ-fm__text {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-align: center;
}

.occ-fm__text--left {
	text-align: left;
}

.occ-fm__msg {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	will-change: transform, opacity;
}

.occ-fm__wave {
	display: inline-block;
}

.occ-fm__wave span {
	display: inline-block;
	will-change: transform;
}

.occ-fm__type {
	display: inline-block;
}

.occ-fm__caret {
	display: inline-block;
	width: 2px;
	height: 1em;
	background: currentColor;
	margin-left: 2px;
	vertical-align: -0.12em;
}

/* Ticker */
.occ-fm__ticker {
	display: inline-flex;
	white-space: nowrap;
	will-change: transform;
}

.occ-fm__chunk {
	display: inline-block;
	white-space: nowrap;
	padding-right: 3rem;
}

/* Particles */
.occ-fm__fx {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.occ-fm__particle {
	position: absolute;
	top: 0;
	line-height: 1;
	will-change: transform, opacity;
}

.occ-fm__particle--confetti {
	display: block;
}

@media (max-width: 767px) {
	.occ-fm__row {
		padding-left: 10px;
		gap: 8px;
	}
}

/* ============================= ANIMATIONS ================================= */

/* --- Marquee (infinite ticker) ------------------------------------------- */

.occ-anim-marquee .occ-banner__text {
	text-align: left;
}

.occ-banner__track {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	animation: occ-marquee var(--occ-speed) linear infinite;
	will-change: transform;
}

.occ-banner__chunk {
	display: inline-block;
	padding-right: 3rem;
	white-space: nowrap;
}

@keyframes occ-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Pause on hover — feels premium. */
.occ-banner:hover .occ-banner__track {
	animation-play-state: paused;
}

/* --- Flip (rotating messages) --------------------------------------------- */

.occ-flip {
	display: grid;
	width: 100%;
}

.occ-flip__item {
	grid-area: 1 / 1;
	opacity: 0;
	transform: translateY(0.9em);
	transition: opacity 0.45s ease, transform 0.45s ease;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.occ-flip__item.is-active {
	opacity: 1;
	transform: translateY(0);
}

/* --- Typewriter -------------------------------------------------------------- */

.occ-banner__line.typing::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 1em;
	background: currentColor;
	margin-left: 2px;
	vertical-align: -0.12em;
	animation: occ-blink 1s steps(1) infinite;
}

@keyframes occ-blink {
	50% { opacity: 0; }
}

/* --- Letter wave ----------------------------------------------------------------- */

.occ-banner__line.occ-wave span {
	display: inline-block;
	animation: occ-wave 1.8s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * 0.05s);
}

@keyframes occ-wave {
	0%, 100% { transform: translateY(0); }
	30%      { transform: translateY(-0.3em); }
	60%      { transform: translateY(0.08em); }
}

/* --- Shine (light sweep across the text) ------------------------------------------- */

.occ-anim-shine .occ-banner__text {
	position: relative;
}

.occ-anim-shine .occ-banner__text::after {
	content: "";
	position: absolute;
	inset: -60% -25%;
	background: linear-gradient(100deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 68%);
	transform: translateX(-130%);
	pointer-events: none;
	animation: occ-sweep 3s ease-in-out infinite;
}

@keyframes occ-sweep {
	0%       { transform: translateX(-130%); }
	55%, 100% { transform: translateX(130%); }
}

/* --- Heartbeat --------------------------------------------------------------------- */

.occ-anim-heartbeat .occ-banner__inner {
	animation: occ-beat 1.8s ease-in-out infinite;
}

@keyframes occ-beat {
	0%, 48%, 100% { transform: scale(1); }
	12%           { transform: scale(1.035); }
	24%           { transform: scale(1); }
	36%           { transform: scale(1.035); }
}

/* --- Neon ------------------------------------------------------------------------------ */

.occ-anim-neon .occ-banner__line {
	text-shadow: 0 0 4px currentColor, 0 0 14px currentColor;
	animation: occ-neon 2.4s ease-in-out infinite;
}

@keyframes occ-neon {
	0%, 100% {
		opacity: 1;
		text-shadow: 0 0 4px currentColor, 0 0 14px currentColor, 0 0 30px currentColor;
	}
	42% {
		opacity: 0.82;
		text-shadow: 0 0 2px currentColor, 0 0 6px currentColor;
	}
	50% {
		opacity: 0.92;
		text-shadow: 0 0 3px currentColor, 0 0 8px currentColor;
	}
	58% {
		opacity: 1;
		text-shadow: 0 0 5px currentColor, 0 0 16px currentColor, 0 0 34px currentColor;
	}
}

/* --- Glow (breathing light) --------------------------------------------------------------- */

.occ-anim-glow .occ-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: radial-gradient(70% 160% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%);
	pointer-events: none;
	animation: occ-breathe 3.2s ease-in-out infinite;
}

@keyframes occ-breathe {
	0%, 100% { opacity: 0.25; }
	50%      { opacity: 0.85; }
}

/* --- Flowing gradient ------------------------------------------------------------------------ */

.occ-anim-gradient {
	animation: occ-gradflow var(--occ-speed) ease-in-out infinite;
}

@keyframes occ-gradflow {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* --- Bounce (icon) --------------------------------------------------------------------------------- */

.occ-anim-bounce .occ-banner__icon {
	animation: occ-bounce 1.2s ease-in-out infinite;
}

@keyframes occ-bounce {
	0%, 100% { transform: translateY(0); }
	35%      { transform: translateY(-6px); }
	60%      { transform: translateY(2px); }
}

/* ============================= STATE ========================================== */

/* Hide animation (dismiss / auto-hide) */
.occ-banner.is-hiding {
	opacity: 0;
	transition: opacity 0.4s ease;
}

.occ-banner--top.is-hiding:not(.occ-banner--sticky):not(.occ-banner--inline) {
	transform: translateY(-100%);
}
.occ-banner--bottom.is-hiding:not(.occ-banner--sticky):not(.occ-banner--inline) {
	transform: translateY(100%);
}

/* Devices */
@media (max-width: 767px) {
	.occ-banner {
		font-size: calc(var(--occ-font-size) * 0.85);
		min-height: 38px;
	}
	.occ-banner__inner {
		padding-left: 10px;
		gap: 8px;
	}
	.occ-banner__cta {
		padding: 4px 10px;
	}
}

.occ-banner--no-mobile {
	display: none;
}

@media (min-width: 768px) {
	.occ-banner--no-desktop {
		display: none;
	}
}

/* Accessibility: respect reduced motion --------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.occ-banner,
	.occ-banner *,
	.occ-banner::before,
	.occ-banner::after {
		animation: none !important;
		transition: none !important;
	}
}