/* Watr App Showcase Styles */

.watr-app-showcase-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
	margin: 0;
}

.watr-phone-frame {
	position: relative;
	width: 354px;
	height: 767px;
	background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
	border-radius: 54px;
	padding: 7px;
	box-shadow: 
		0 25px 70px rgba(0, 0, 0, 0.6),
		0 0 0 6px #0a0a0a,
		inset 0 0 0 3px #3a3a3a,
		inset 0 2px 10px rgba(255, 255, 255, 0.05);
}

/* Volume up button (left side) */
.watr-phone-frame::before {
	content: '';
	position: absolute;
	left: -6px;
	top: 180px;
	width: 6px;
	height: 45px;
	background: linear-gradient(to right, #0f0f0f 0%, #1a1a1a 50%, #2a2a2a 100%);
	border-radius: 4px 0 0 4px;
	box-shadow: 
		inset 0 0 4px rgba(0, 0, 0, 0.8),
		0 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

/* Volume down button (left side, below volume up) */
.watr-phone-frame::after {
	content: '';
	position: absolute;
	left: -6px;
	top: 255px;
	width: 6px;
	height: 45px;
	background: linear-gradient(to right, #0f0f0f 0%, #1a1a1a 50%, #2a2a2a 100%);
	border-radius: 4px 0 0 4px;
	box-shadow: 
		inset 0 0 4px rgba(0, 0, 0, 0.8),
		0 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

/* Power button (right side) */
.watr-phone-viewport::before {
	content: '';
	position: absolute;
	right: -6px;
	top: 153px;
	width: 6px;
	height: 60px;
	background: linear-gradient(to left, #0f0f0f 0%, #1a1a1a 50%, #2a2a2a 100%);
	border-radius: 0 4px 4px 0;
	box-shadow: 
		inset 0 0 4px rgba(0, 0, 0, 0.8),
		0 2px 4px rgba(0, 0, 0, 0.3);
	z-index: 10;
}

/* SIM card tray (right side, below power button) */
.watr-phone-viewport::after {
	content: '';
	position: absolute;
	right: -5px;
	top: 221px;
	width: 4px;
	height: 32px;
	background: linear-gradient(to left, #0f0f0f 0%, #1a1a1a 50%, #2a2a2a 100%);
	border-radius: 0 2px 2px 0;
	box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.6);
	z-index: 10;
}

.watr-phone-viewport {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 47px;
	background: #000;
}

.watr-screen-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 0.5s ease-in-out;
	will-change: transform, opacity;
	overflow: hidden;
}

.watr-screen-container.is-active {
	opacity: 1;
}

.watr-screen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%;
	object-fit: cover;
	will-change: transform, opacity;
}

/* Splash screen logo */
.watr-splash-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 150px;
	height: auto;
	z-index: 10;
	opacity: 0;
}

/* Screen 1 - Typing animation and button click */
.watr-screen-container[data-screen-index="0"].is-active .watr-screen {
	animation: none;
}

/* Typing overlay for screen 2 (login screen) */
.watr-typing-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 20;
}

.watr-phone-input {
	position: absolute;
	top: calc(28% - 35px);
	left: calc(50% - 40px);
	transform: translateX(-50%);
	width: 85%;
	max-width: 320px;
	height: 50px;
	background: transparent;
	border: none;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	padding-left: 95px; /* Account for country code selector (+966) */
	font-size: 18px;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
}

.watr-typed-text {
	color: #000;
	font-weight: 400;
	letter-spacing: 1px;
}

.watr-typing-cursor {
	color: #000;
	font-weight: 300;
	animation: watr-cursor-blink 1s infinite;
	margin-left: 2px;
}

@keyframes watr-cursor-blink {
	0%, 50% {
		opacity: 1;
	}
	51%, 100% {
		opacity: 0;
	}
}

/* Pointer/cursor for button click - white circle with shadow */
.watr-pointer {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 25;
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
}

/* Screen 1 animations - pointer click */
.watr-screen-container[data-screen-index="0"].is-active .watr-pointer {
	animation: watr-pointer-move-click 0.75s ease-in-out 1.05s forwards;
}

@keyframes watr-pointer-move-click {
	0% {
		opacity: 0;
		top: 28%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);
	}
	20% {
		opacity: 1;
		top: 28%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		top: 52%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	60% {
		transform: translate(-50%, -50%) scale(0.9);
	}
	65% {
		transform: translate(-50%, -50%) scale(1.1);
	}
	70% {
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 1;
		top: 52%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Screen 2 - Scroll down (2x faster) */
.watr-screen-container[data-screen-index="1"].is-active .watr-screen {
	animation: watr-scroll-down 1.67s ease-in-out forwards;
}

/* Scroll pointer for screen 2 (image 3) */
.watr-scroll-pointer {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 25;
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
	left: 50%;
}

/* Screen 2 scroll pointer animation - moves down while scrolling, then clicks a card */
.watr-screen-container[data-screen-index="1"].is-active .watr-scroll-pointer {
	animation: watr-scroll-pointer-move-click 2.25s ease-in-out forwards;
}

/* Screen 3 - Offers screen */
.watr-screen-container[data-screen-index="2"].is-active .watr-screen {
	animation: none;
}

/* Offer cards for screen 4 (offers screen) */
.watr-offer-cards {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 20;
}

.watr-offer-card {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	width: 90%;
	max-width: 340px;
	height: auto;
	opacity: 0;
	will-change: transform, opacity;
}

.watr-offer-card-1 {
	top: 20%;
}

.watr-offer-card-2 {
	top: 45%;
}

/* Screen 3 offer cards zoom animation */
.watr-screen-container[data-screen-index="2"].is-active .watr-offer-card-1 {
	animation: watr-offer-zoom 0.75s ease-out 0.15s forwards;
}

.watr-screen-container[data-screen-index="2"].is-active .watr-offer-card-2 {
	animation: watr-offer-zoom 0.75s ease-out 0.9s forwards;
}

@keyframes watr-offer-zoom {
	0% {
		opacity: 0;
		transform: translateX(-50%) scale(0.8);
	}
	50% {
		opacity: 1;
		transform: translateX(-50%) scale(1.05);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) scale(1);
	}
}

/* Pointer for clicking offer card */
.watr-offer-pointer {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 25;
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
	left: 50%;
}

/* Screen 3 pointer click animation on offer card */
.watr-screen-container[data-screen-index="2"].is-active .watr-offer-pointer {
	animation: watr-offer-pointer-click 0.6s ease-in-out 1.75s forwards;
}

@keyframes watr-offer-pointer-click {
	0% {
		opacity: 0;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%) scale(0.8);
	}
	30% {
		opacity: 1;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	60% {
		top: 25%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	70% {
		transform: translate(-50%, -50%) scale(0.9);
	}
	75% {
		transform: translate(-50%, -50%) scale(1.1);
	}
	80% {
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 1;
		top: 25%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Screen 4 - Scroll down then click button */
.watr-screen-container[data-screen-index="3"].is-active .watr-screen {
	animation: watr-scroll-down-payment 1.75s ease-in-out forwards;
}

/* Pointer for screen 5 (payment screen) */
.watr-payment-pointer {
	position: absolute;
	width: 24px;
	height: 24px;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
	cursor: pointer;
	z-index: 25;
	opacity: 0;
	pointer-events: none;
	transform-origin: center center;
	left: 50%;
}

/* Screen 4 pointer animation - scroll then click button */
.watr-screen-container[data-screen-index="3"].is-active .watr-payment-pointer {
	animation: watr-payment-scroll-click 2.1s ease-in-out forwards;
}

/* Screen 5 - Fast fade only */
.watr-screen-container[data-screen-index="5"].is-active .watr-screen {
	animation: none;
}

/* Screen 5 - Chat screen with keyboard and typing */
.watr-screen-container[data-screen-index="4"].is-active .watr-screen {
	animation: none;
}

/* Chat overlay for screen 6 */
.watr-chat-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 20;
}

/* Arabic keyboard SVG */
.watr-arabic-keyboard {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 200px;
	opacity: 0;
}

.watr-screen-container[data-screen-index="4"].is-active .watr-arabic-keyboard {
	opacity: 1;
	animation: watr-keyboard-fade-in 0.3s ease-out forwards;
}

/* Keyboard keys click animation */
.watr-keyboard-key {
	fill: #fff;
	transition: fill 0.1s ease;
}

.key {
	fill: #fff;
	transition: fill 0.1s ease;
}

.key.pressed {
	fill: #d0d0d0;
}

/* Chat message text */
.watr-chat-message {
	position: absolute;
	bottom: 220px;
	left: 50%;
	transform: translateX(-50%);
	width: 85%;
	max-width: 320px;
	background: #fff;
	border-radius: 20px;
	padding: 12px 16px;
	font-size: 16px;
	color: #000;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-weight: 400;
	text-align: right;
	direction: rtl;
	opacity: 0;
}

.watr-screen-container[data-screen-index="4"].is-active .watr-chat-message {
	opacity: 1;
	animation: watr-chat-fade-in 0.3s ease-out 0.5s forwards;
}

.watr-chat-text {
	color: #000;
	font-weight: 400;
}

.watr-chat-cursor {
	color: #000;
	font-weight: 300;
	animation: watr-cursor-blink 1s infinite;
	margin-right: 2px;
}

@keyframes watr-keyboard-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes watr-key-press {
	0%, 100% {
		fill: #fff;
	}
	50% {
		fill: #d0d0d0;
	}
}

@keyframes watr-chat-fade-in {
	0% {
		opacity: 0;
		transform: translateX(-50%) translateY(10px);
	}
	100% {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

/* Screen 7 - Fast fade only */
.watr-screen-container[data-screen-index="7"].is-active .watr-screen {
	animation: none;
}

/* Logo fade and scale animation */
@keyframes watr-logo-fade-scale {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(0.5);
	}
	50% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1.1);
	}
	100% {
		opacity: 1;
		transform: translate(-50%, -50%) scale(1);
	}
}

/* Scroll down animations - simulating natural app scrolling */
/* Screen 2 (image 3) - keep original faster scroll */
@keyframes watr-scroll-down {
	0% {
		transform: translateY(0);
	}
	100% {
		/* Scroll to bottom - adjust percentage based on image height */
		transform: translateY(-35%);
	}
}

/* Screen 5 scroll animation - scroll only 50px */
@keyframes watr-scroll-down-payment {
	0% {
		transform: translateY(0);
	}
	100% {
		/* Scroll only 50px upward */
		transform: translateY(-50px);
	}
}

/* Screen 5 pointer animation - scroll then click button */
@keyframes watr-payment-scroll-click {
	0% {
		opacity: 1;
		top: 30%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	50% {
		opacity: 1;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	60% {
		top: calc(92% + 50px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	65% {
		top: calc(92% + 50px);
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
	}
	70% {
		top: calc(92% + 50px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1.1);
	}
	75% {
		top: calc(92% + 50px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 1;
		top: calc(92% + 50px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
}

@keyframes watr-scroll-pointer-move-click {
	0% {
		opacity: 1;
		top: 20%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	75% {
		opacity: 1;
		top: 85%;
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	80% {
		top: calc(60% + 30px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	85% {
		top: calc(60% + 30px);
		left: 50%;
		transform: translate(-50%, -50%) scale(0.9);
	}
	90% {
		top: calc(60% + 30px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1.1);
	}
	95% {
		top: calc(60% + 30px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
	100% {
		opacity: 1;
		top: calc(60% + 30px);
		left: 50%;
		transform: translate(-50%, -50%) scale(1);
	}
}


/* Responsive adjustments */
@media (max-width: 768px) {
	.watr-app-showcase-wrapper {
		padding: 0;
		margin: 0;
	}
	
	.watr-phone-frame {
		width: 288px;
		height: 625px;
		border-radius: 45px;
		padding: 5px;
	}
	
	.watr-phone-viewport {
		border-radius: 40px;
	}
	
	.watr-phone-frame::before,
	.watr-phone-frame::after {
		display: none;
	}
	
	.watr-app-showcase-wrapper::before,
	.watr-app-showcase-wrapper::after {
		display: none;
	}
}

@media (max-width: 480px) {
	.watr-phone-frame {
		width: 252px;
		height: 546px;
		border-radius: 40px;
		padding: 5px;
	}
	
	.watr-phone-viewport {
		border-radius: 36px;
	}
}