/* Coffee Vending Machine — style.css */

.cvm-wrap {
	max-width: 460px;
	margin: 0 auto;
	font-family: Georgia, serif;
	user-select: none;
}

/* ── Intro screen ────────────────────────────────────────────────────────────── */

.cvm-intro {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 340px;
	padding: 48px 32px;
	background: #fff;
	text-align: center;
	opacity: 1;
	transition: opacity 0.6s ease, transform 0.6s ease;
}

.cvm-intro.fade-out {
	opacity: 0;
	transform: scale(0.97);
	pointer-events: none;
}

.cvm-intro-msg {
	font-family: 'Dancing Script', cursive;
	font-size: 1.55rem;
	line-height: 1.7;
	color: #6b3a2a;
	margin: 0 0 40px;
	max-width: 360px;
}

.cvm-intro-btn {
	padding: 13px 44px;
	font-family: Georgia, serif;
	font-size: 0.9rem;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #fff;
	background: #953528;
	border: none;
	border-radius: 40px;
	cursor: pointer;
	transition: background 0.2s, transform 0.15s;
}

.cvm-intro-btn:hover {
	background: #7a2b1e;
	transform: scale(1.05);
}

.cvm-intro-btn:active {
	transform: scale(0.97);
}

/* ── Machine wrapper (fades in after intro) ──────────────────────────────────── */

.cvm-machine {
	display: none;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cvm-machine.visible {
	opacity: 1;
	transform: scale(1);
}

/* ── Stage ─────────────────────────────────────────────────────────────────── */

.cvm-stage {
	position: relative;
	width: 100%;
}

.cvm-scene {
	position: relative;
	width: 100%;
}

/* Cup scene: hidden until transition */
.cvm-cup-scene {
	display: none;
	opacity: 0;
	transform: scale(1.04);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.cvm-cup-scene.visible {
	opacity: 1;
	transform: scale(1);
}

/* Machine fades out */
.cvm-machine-scene.fade-out {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.cvm-machine-img,
.cvm-cup-img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── Hotspot (over the gray keypad rectangle on the right panel) ──────────── */

.cvm-hotspot {
	position: absolute;
	top: 33%;
	left: 69%;
	width: 21%;
	height: 26%;
	cursor: pointer;
	border-radius: 6px;
	transition: background 0.2s;
	animation: cvm-pulse 2.2s ease-in-out infinite;
}

.cvm-hotspot:hover {
	background: rgba(255, 255, 255, 0.18);
	outline: 2px solid rgba(255, 255, 255, 0.5);
	animation: none;
}

@keyframes cvm-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5); }
	50%       { box-shadow: 0 0 0 10px rgba(255, 255, 255, 0); }
}

/* ── SVG latte art overlay ─────────────────────────────────────────────────── */

.cvm-latte-svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	overflow: visible;
}

/* Foam message: large, handwritten, on top of the foam circle */
.cvm-foam-text {
	font-family: 'Dancing Script', cursive;
	font-size: 38px;
	font-weight: 700;
	fill: #834b11;
	filter: drop-shadow(0 1px 2px rgba(255, 240, 200, 0.6));
	letter-spacing: 1px;
}

/* Recipient: large, bold, in the white cup body area */
.cvm-recipient-text {
	font-family: 'Dancing Script', cursive;
	font-size: 25px;
	font-weight: 700;
	fill: #6c6764;
	filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.5));
	letter-spacing: 1.5px;
}

/* ── Coffee pour animation (machine scene) ──────────────────────────────────
   A continuous coffee stream from the dispensing nozzle into the cup.
   Coordinates measured from the machine PNG:
     - Cup horizontal center: ~35.5% from left
     - Stream start (window top): ~54.6% from top
     - Stream end (cup rim):      ~59.7% from top
*/
.cvm-drip {
	position: absolute;
	left: 35.5%;
	top: 54.6%;
	width: 1.2%;
	height: 5.1%;
	transform: translateX(-50%);
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	transition: opacity 200ms ease-out;
}

.cvm-machine-scene.cvm-pouring .cvm-drip {
	opacity: 1;
}

.cvm-drip::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			to bottom,
			rgba(74, 36, 16, 0.4) 0%,
			#4a2410 15%,
			#6b3a1f 50%,
			#4a2410 85%,
			rgba(74, 36, 16, 0.4) 100%
		);
	background-size: 100% 50%;
	background-repeat: repeat-y;
	animation: cvm-pour 0.5s linear infinite;
}

@keyframes cvm-pour {
	from { background-position: 0 0; }
	to   { background-position: 0 50%; }
}