/* Cloud Native Pulse — Podwave-Inspired Custom Styles */

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Import Rubik from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

/* ============================================
   GLOBAL TRANSITIONS
   ============================================ */

a,
.wp-block-button__link,
.wp-block-post-title a,
.cnp-episode-card,
.cnp-research-card {
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}

/* ============================================
   HEADER
   ============================================ */

.cnp-logo img {
	border-radius: 8px;
}

.wp-block-navigation-item a:hover {
	color: #86D2E8 !important;
}

/* Sticky header shadow on scroll */
header .wp-block-group.has-dark-header-background-color {
	transition: box-shadow 0.3s ease;
}

header .wp-block-group.has-dark-header-background-color.scrolled {
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ============================================
   HERO SECTION
   ============================================ */

.cnp-hero-logo img {
	animation: cnp-float 6s ease-in-out infinite;
	border-radius: 16px;
}

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

/* Hero heading slide-in animation */
.has-hero-gradient-gradient-background h1 {
	opacity: 0;
	transform: translateX(-50px);
	animation: cnp-slide-in 0.8s ease-out 0.3s forwards;
}

@keyframes cnp-slide-in {
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

/* Platform badges subtle hover */
.cnp-platform-badge img {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cnp-platform-badge:hover img {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(134, 210, 232, 0.3);
}

/* Hero text shadow for depth */
.has-hero-gradient-gradient-background h1,
.has-hero-gradient-gradient-background h2 {
	text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* ============================================
   AUDIO PLAYER BAR
   ============================================ */

.cnp-audio-bar {
	border-radius: 85px;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cnp-audio-bar:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.cnp-play-btn {
	cursor: pointer;
	width: 42px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	transition: background 0.3s ease, transform 0.3s ease;
}

.cnp-play-btn:hover {
	background: rgba(134, 210, 232, 0.15);
	transform: scale(1.1);
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.cnp-img-stack {
	gap: 1.5rem;
	align-items: center;
}

.cnp-about-img-1 img,
.cnp-about-img-2 img {
	transition: transform 0.5s ease;
	object-fit: cover;
}

.cnp-about-img-1:hover img,
.cnp-about-img-2:hover img {
	transform: scale(1.03);
}

/* About section fade-in */
.cnp-about-images {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.cnp-about-content {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.cnp-visible .cnp-about-images,
.cnp-visible .cnp-about-content {
	opacity: 1;
	transform: translateX(0);
}

/* ============================================
   EPISODE CARDS
   ============================================ */

.cnp-episode-card {
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cnp-episode-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.cnp-episode-card:hover .wp-block-post-title a {
	color: #5ab8d4;
}

/* Episode card fade-in */
.cnp-episode-card {
	opacity: 0;
	transform: translateY(25px);
	transition: opacity 0.6s ease, transform 0.6s ease, box-shadow 0.4s ease;
}

.cnp-visible {
	opacity: 1 !important;
	transform: translateY(0) !important;
}

/* Featured image aspect ratio */
.cnp-episode-card .wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: transform 0.5s ease;
}

.cnp-episode-card:hover .wp-block-post-featured-image img {
	transform: scale(1.05);
}

.cnp-episode-card .wp-block-post-featured-image {
	overflow: hidden;
}

/* ============================================
   RESEARCH CARDS
   ============================================ */

.cnp-research-card {
	position: relative;
	transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.cnp-research-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1) !important;
}

.cnp-research-card:hover .wp-block-post-title a {
	color: #5ab8d4;
}

/* Gradient top border on research cards */
.cnp-research-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #86D2E8, #5ab8d4);
	border-radius: 16px 16px 0 0;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cnp-research-card:hover::before {
	opacity: 1;
}

.cnp-research-card .wp-block-post-featured-image img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* ============================================
   PLAY BUTTON SECTION
   ============================================ */

.cnp-play-section {
	position: relative;
	overflow: hidden;
}

/* Subtle radial glow */
.cnp-play-section::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(134, 210, 232, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

/* Play button with ripple */
.cnp-ripple-play-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #86D2E8;
	color: #111111 !important;
	cursor: pointer;
	position: relative;
	z-index: 1;
	transition: transform 0.3s ease;
}

.cnp-ripple-play-btn:hover {
	transform: scale(1.1);
}

/* Ripple rings */
.cnp-play-btn-wrap {
	position: relative;
}

.cnp-play-btn-wrap::before,
.cnp-play-btn-wrap::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	border: 2px solid #86D2E8;
	pointer-events: none;
}

.cnp-play-btn-wrap::before {
	width: 80px;
	height: 80px;
	animation: cnp-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.cnp-play-btn-wrap::after {
	width: 80px;
	height: 80px;
	animation: cnp-ripple 2s cubic-bezier(0.23, 1, 0.32, 1) infinite 1s;
}

@keyframes cnp-ripple {
	0% {
		width: 80px;
		height: 80px;
		opacity: 0.8;
		border-width: 3px;
	}
	100% {
		width: 160px;
		height: 160px;
		opacity: 0;
		border-width: 1px;
	}
}

/* ============================================
   BUTTONS
   ============================================ */

.wp-block-button__link:hover {
	box-shadow: 0 0 20px rgba(134, 210, 232, 0.4);
}

.has-primary-background-color.wp-block-button__link {
	animation: cnp-pulse-ring 2.5s ease-out infinite;
}

@keyframes cnp-pulse-ring {
	0% { box-shadow: 0 0 0 0 rgba(134, 210, 232, 0.4); }
	70% { box-shadow: 0 0 0 12px rgba(134, 210, 232, 0); }
	100% { box-shadow: 0 0 0 0 rgba(134, 210, 232, 0); }
}

.wp-block-post-title a:hover {
	text-decoration: none;
}

/* ============================================
   PAGINATION
   ============================================ */

.wp-block-query-pagination {
	gap: 1rem;
}

.wp-block-query-pagination a,
.wp-block-query-pagination span {
	padding: 0.5rem 1rem;
	border-radius: 8px;
	border: 1px solid #DFDFDF;
	transition: all 0.3s ease;
}

.wp-block-query-pagination a:hover {
	background-color: #86D2E8;
	color: #111111;
	border-color: #86D2E8;
}

.wp-block-query-pagination .current {
	background-color: #86D2E8;
	color: #111111;
	border-color: #86D2E8;
}

/* ============================================
   VALUE PROPOSITION CARDS
   ============================================ */

.has-dark-alt-background-color .wp-block-column {
	transition: transform 0.3s ease, border-color 0.3s ease;
}

.has-dark-alt-background-color .wp-block-column:hover {
	transform: translateY(-4px);
	border-color: #86D2E8 !important;
}

/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

/* Tablet: 768px-1024px */
@media (max-width: 1024px) {
	.cnp-hero-logo img {
		width: 70px !important;
		height: 70px !important;
	}

	/* Hero font size reduction for tablet */
	.has-hero-gradient-gradient-background h1 {
		font-size: 3.75rem !important;
	}

	.cnp-img-stack {
		flex-direction: column;
		gap: 1rem;
	}

	.cnp-about-img-1 figure,
	.cnp-about-img-2 figure {
		width: 100% !important;
	}

	.cnp-about-img-1 img,
	.cnp-about-img-2 img {
		width: 100% !important;
		height: auto !important;
	}
}

/* Mobile: under 768px */
@media (max-width: 767px) {
	.cnp-hero-logo img {
		width: 56px !important;
		height: 56px !important;
	}

	/* Hero font size reduction for mobile */
	.has-hero-gradient-gradient-background h1 {
		font-size: 2.5rem !important;
	}

	/* Reduce hero padding */
	.has-hero-gradient-gradient-background {
		padding-top: 6rem !important;
		padding-bottom: 5rem !important;
	}

	/* Audio bar full width */
	.cnp-audio-bar {
		border-radius: 16px !important;
	}

	.cnp-about-images {
		margin-bottom: 2rem;
	}

	.cnp-episode-card:hover,
	.cnp-research-card:hover {
		transform: none;
	}

	/* Play button smaller on mobile */
	.cnp-ripple-play-btn {
		width: 64px;
		height: 64px;
		font-size: 1rem !important;
	}

	.cnp-play-btn-wrap::before,
	.cnp-play-btn-wrap::after {
		animation: none;
	}

	/* Hide platform badges on small mobile */
	.cnp-platform-badge {
		display: none;
	}
}

/* Small mobile: under 480px */
@media (max-width: 480px) {
	.has-hero-gradient-gradient-background h1 {
		font-size: 2rem !important;
	}

	.cnp-audio-bar {
		flex-direction: column;
		text-align: center;
		gap: 1rem;
	}
}