/* Perfume Animation Section — frontend styles. Developed by Hassan Dewan. */

.pas-wrapper {
	display: block;
}

.pas-section {
	position: relative;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	background: #000;
	padding: 0 20px;
	cursor: grab;
}

.pas-section.pas-dragging {
	cursor: grabbing;
	user-select: none;
	-webkit-user-select: none;
}

.pas-section.pas-dragging * {
	user-select: none;
	-webkit-user-select: none;
}

/* Background gradient layers (colors injected per-slide via inline <style>) */
.pas-bg-layer {
	position: absolute;
	left: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}

.pas-bg-layer:before {
	content: "";
	right: 0;
	top: 0;
	width: 0;
	height: 100%;
	z-index: 2;
	position: absolute;
	box-shadow: 0 0 15px 20px #000;
}

.pas-right-layer {
	position: absolute;
	right: 0;
	top: 0;
	width: 50%;
	height: 100%;
	z-index: 0;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

.pas-section .pas-container {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
	height: 100%;
	z-index: 1;
}

/* Text content blocks — stacked on top of each other (desktop: absolute) */
.pas-left-content {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 35%;
	z-index: 3;
}

.pas-content-block {
	position: absolute;
	top: 50%;
	left: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-items: flex-start;
	justify-content: center;
	opacity: 0;
	filter: blur(20px);
	will-change: filter, opacity;
	transform: translateY(-50%);
	/* Only the currently-visible slide's block should be clickable.
	   JS toggles this to 'auto' on the active slide via GSAP tweens
	   below, so hidden slides never intercept clicks on the button
	   underneath the active one. */
	pointer-events: none;
}

.pas-content-block .pas-heading {
	font-size: 40px;
	color: #fff;
	margin: 0;
}

.pas-content-block .pas-desc {
	font-size: 16px;
	line-height: 1.4em;
	color: #fff;
	margin: 0;
}

/* Bottle centering wrapper */
.pas-center-absolute {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 200px;
	aspect-ratio: 655 / 1498;
}

.pas-bottle-wrap {
	position: absolute;
	inset: 0;
	z-index: 2;
	will-change: transform, opacity, filter;
}

.pas-perfume-bottle {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: 100% 100%;
	-webkit-mask-position: center;
	mask-repeat: no-repeat;
	mask-size: 100% 100%;
	mask-position: center;
}

.pas-bottle-label {
	position: absolute;
	width: 100%;
	height: 71%;
	background-size: cover;
	background-position: 50% 50%;
	z-index: 3;
	bottom: 0;
	mix-blend-mode: color-burn;
}

.pas-bottle-overlay {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	z-index: 2;
	pointer-events: none;
}

/* Prev/Next controls — visible on every screen size, pinned bottom-left */
.pas-slider-controls {
	position: absolute;
	bottom: 30px;
	left: 20px;
	z-index: 5;
	display: flex;
	align-items: center;
	gap: 16px;
}

.pas-slider-btn {
	width: 50px;
	height: 50px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: rgba(255, 255, 255, 0.12);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.4);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: background 0.25s ease, transform 0.15s ease, box-shadow 0.25s ease;
}

.pas-slider-btn svg {
	width: 20px;
	height: 20px;
	stroke: #fff;
	fill: none;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.pas-slider-btn:active {
	transform: scale(0.9);
	background: rgba(255, 255, 255, 0.25);
}

.pas-theme-btn {
	display: flex;
	background: #ffffff59;
	padding: 18px 50px;
	font-size: 16px;
	line-height: 1.2em;
	color: #fff;
	border-radius: 50px;
	position: relative;
	text-decoration: none;
	backdrop-filter: blur(10px);
	box-shadow: rgb(255 255 255 / 34%) 0 0 22px;
	transition: 0.5s ease-in-out all;
}

.pas-theme-btn .pas-btn-bg {
	background: #6a350f;
	position: absolute;
	width: 90%;
	height: 80%;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50px;
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
	transition: 0.5s ease-in-out all;
}

.pas-theme-btn .pas-btn-text {
	color: #fff;
	z-index: 3;
	position: relative;
	transition: 0.5s ease-in-out all;
}

/* ===================== RESPONSIVE (MOBILE LAYOUT) ===================== */

@media (max-width: 1200px) {
	.pas-content-block .pas-heading {
		font-size: 30px;
	}

	.pas-content-block .pas-desc {
		font-size: 14px;
	}

	.pas-theme-btn {
		font-size: 14px;
		padding: 15px 40px;
	}
}

@media (max-width: 768px) {

	.pas-right-layer {
		display: none !important;
	}
	
	.pas-section {
		height: auto;
		min-height: auto;
		touch-action: pan-y;
	}

	.pas-section .pas-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: auto;
		min-height: auto;
		gap: 25px;
		padding: 50px 20px;
	}

	.pas-bg-layer {
		width: 100%;
		height: 100%;
	}

	.pas-right-layer {
		width: 100%;
		height: 100%;
	}

	.pas-center-absolute {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		display: grid;
		margin: 0 auto;
		flex-shrink: 0;
	}

	.pas-bottle-wrap {
		position: static;
		inset: auto;
		grid-area: 1 / 1;
		width: 100%;
		height: 100%;
	}

	.pas-left-content {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		display: grid;
		width: 100%;
		text-align: center;
		height: auto !important;
	}

	.pas-content-block {
		position: static;
		grid-area: 1 / 1;
		width: 100%;
		align-items: center;
		justify-content: flex-start;
		text-align: center;
		margin: 0 auto;
		gap: 14px;
		transform: translateY(0);
	}

	.pas-content-block .pas-heading {
		font-size: 22px;
	}

	.pas-content-block .pas-desc {
		font-size: 12px;
	}

	.pas-bg-layer:before {
		opacity: 0;
	}

	.pas-slider-controls {
		position: static;
		bottom: auto;
		left: auto;
		justify-content: center;
		width: 100%;
	}
}

/* Elementor editor: keep pinned sections from breaking the panel while editing */
.elementor-editor-active .pas-section {
	height: auto;
	min-height: 100vh;
}