/**
 * Onyxbloom Theme Custom CSS
 *
 * Art Deco Design System
 */

/* ========================================
   ART DECO PATTERN BACKGROUND
   ======================================== */

.art-deco-pattern {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 40px,
			rgba(212, 175, 55, 0.03) 40px,
			rgba(212, 175, 55, 0.03) 41px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 40px,
			rgba(212, 175, 55, 0.03) 40px,
			rgba(212, 175, 55, 0.03) 41px
		);
}

/* ========================================
   SUNBURST EFFECT
   ======================================== */

.sunburst {
	background: radial-gradient(
		ellipse at 50% 0%,
		rgba(212, 175, 55, 0.15) 0%,
		rgba(212, 175, 55, 0.08) 30%,
		transparent 60%
	);
}

.sunburst-bottom {
	background: radial-gradient(
		ellipse at 50% 100%,
		rgba(212, 175, 55, 0.15) 0%,
		rgba(212, 175, 55, 0.08) 30%,
		transparent 60%
	);
}

/* ========================================
   GOLD GLOW EFFECTS
   ======================================== */

.gold-glow {
	box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}

.gold-glow-intense {
	box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

/* ========================================
   STEPPED CORNERS (Art Deco decorative corners)
   ======================================== */

.stepped-corners {
	position: relative;
}

.stepped-corners::before,
.stepped-corners::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(212, 175, 55, 0.3);
	transition: all 0.5s ease-out;
}

.stepped-corners::before {
	top: 8px;
	right: 8px;
	border-bottom: none;
	border-left: none;
}

.stepped-corners::after {
	bottom: 8px;
	left: 8px;
	border-top: none;
	border-right: none;
}

.stepped-corners:hover::before,
.stepped-corners:hover::after {
	border-color: rgba(212, 175, 55, 1);
	width: 28px;
	height: 28px;
}

/* ========================================
   DIAMOND CONTAINER (45° rotated)
   ======================================== */

.diamond-container {
	transform: rotate(45deg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.diamond-content {
	transform: rotate(-45deg);
}

/* ========================================
   DOUBLE FRAME (nested borders)
   ======================================== */

.double-frame {
	border: 1px solid rgba(212, 175, 55, 0.5);
	padding: 6px;
}

.double-frame-inner {
	border: 3px solid #0A0A0A;
}

/* ========================================
   SECTION DIVIDER WITH DIAMOND
   ======================================== */

.section-divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 1rem;
}

.section-divider::before,
.section-divider::after {
	content: '';
	width: 60px;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

/* ========================================
   VERTICAL DIVIDER
   ======================================== */

.vertical-divider {
	position: absolute;
	width: 1px;
	height: 100%;
	background: linear-gradient(180deg, transparent, rgba(212, 175, 55, 0.2), transparent);
}

/* ========================================
   TEXT GRADIENT
   ======================================== */

.text-gold-gradient {
	background: linear-gradient(135deg, #F2E8C4 0%, #D4AF37 50%, #B8962E 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

/* Gold Outline Button */
.is-style-gold-outline .wp-block-button__link,
.is-style-gold-outline.wp-block-button__link {
	background: transparent;
	color: #D4AF37;
	border: 2px solid #D4AF37;
	padding: 1rem 2.5rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: all 0.4s ease-out;
}

.is-style-gold-outline .wp-block-button__link:hover,
.is-style-gold-outline.wp-block-button__link:hover {
	background: #D4AF37;
	color: #0A0A0A;
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
	transform: translateY(-2px);
}

/* Gold Solid Button */
.is-style-gold-solid .wp-block-button__link,
.is-style-gold-solid.wp-block-button__link {
	background: #D4AF37;
	color: #0A0A0A;
	border: 2px solid #D4AF37;
	padding: 1rem 2.5rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	transition: all 0.4s ease-out;
}

.is-style-gold-solid .wp-block-button__link:hover,
.is-style-gold-solid.wp-block-button__link:hover {
	background: #F2E8C4;
	border-color: #F2E8C4;
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.5);
	transform: translateY(-2px);
}

/* ========================================
   GROUP BLOCK STYLES
   ======================================== */

.is-style-art-deco-pattern {
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent,
			transparent 40px,
			rgba(212, 175, 55, 0.03) 40px,
			rgba(212, 175, 55, 0.03) 41px
		),
		repeating-linear-gradient(
			-45deg,
			transparent,
			transparent 40px,
			rgba(212, 175, 55, 0.03) 40px,
			rgba(212, 175, 55, 0.03) 41px
		);
}

.is-style-stepped-corners {
	position: relative;
}

.is-style-stepped-corners::before,
.is-style-stepped-corners::after {
	content: '';
	position: absolute;
	width: 20px;
	height: 20px;
	border: 2px solid rgba(212, 175, 55, 0.3);
	transition: all 0.5s ease-out;
}

.is-style-stepped-corners::before {
	top: 8px;
	right: 8px;
	border-bottom: none;
	border-left: none;
}

.is-style-stepped-corners::after {
	bottom: 8px;
	left: 8px;
	border-top: none;
	border-right: none;
}

.is-style-stepped-corners:hover::before,
.is-style-stepped-corners:hover::after {
	border-color: rgba(212, 175, 55, 1);
	width: 28px;
	height: 28px;
}

.is-style-sunburst {
	background: radial-gradient(
		ellipse at 50% 0%,
		rgba(212, 175, 55, 0.15) 0%,
		rgba(212, 175, 55, 0.08) 30%,
		transparent 60%
	);
}

/* ========================================
   SEPARATOR STYLES
   ======================================== */

.is-style-diamond {
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent !important;
}

.is-style-diamond::before,
.is-style-diamond::after {
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.5), transparent);
}

.is-style-diamond::after {
	margin-left: 1rem;
}

/* ========================================
   IMAGE STYLES
   ======================================== */

.is-style-double-frame {
	padding: 6px;
	border: 1px solid rgba(212, 175, 55, 0.5);
}

.is-style-double-frame img {
	border: 3px solid #0A0A0A;
}

.is-style-gold-glow {
	box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
	transition: box-shadow 0.5s ease-out;
}

.is-style-gold-glow:hover {
	box-shadow: 0 0 25px rgba(212, 175, 55, 0.4);
}

/* ========================================
   COLUMN CARD STYLE
   ======================================== */

.is-style-card-deco {
	background: #141414;
	border: 1px solid rgba(212, 175, 55, 0.3);
	position: relative;
	transition: all 0.5s ease-out;
}

.is-style-card-deco:hover {
	border-color: rgba(212, 175, 55, 1);
	transform: translateY(-8px);
	box-shadow: 0 0 30px rgba(212, 175, 55, 0.15);
}

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

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes expandWidth {
	from {
		width: 0;
	}
	to {
		width: 60px;
	}
}

.animate-fade-in-up {
	animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-fade-in {
	animation: fadeIn 0.8s ease-out forwards;
}

/* Animation Delays */
.animation-delay-100 { animation-delay: 0.1s; }
.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-300 { animation-delay: 0.3s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-500 { animation-delay: 0.5s; }
.animation-delay-600 { animation-delay: 0.6s; }

/* ========================================
   RESPONSIVE ADJUSTMENTS
   ======================================== */

@media (max-width: 768px) {
	.stepped-corners::before,
	.stepped-corners::after,
	.is-style-stepped-corners::before,
	.is-style-stepped-corners::after {
		width: 16px;
		height: 16px;
	}

	.stepped-corners:hover::before,
	.stepped-corners:hover::after,
	.is-style-stepped-corners:hover::before,
	.is-style-stepped-corners:hover::after {
		width: 20px;
		height: 20px;
	}
}

/* ========================================
   EDITOR STYLES
   ======================================== */

.wp-block-site-title {
	font-family: 'Marcellus', serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
}

.wp-block-navigation-item {
	text-transform: uppercase;
	letter-spacing: 0.2em;
}