/* ============================================================================
   M2arc — the M2 mascot. Top-right onboarding overlay.
   Lives outside .om2gle-app's clipped frame so he can float over everything.
   Animations are direct ports of the design file character sheet.
============================================================================ */

.om2gle-mascot {
	position: fixed;
	right: 18px;
	top: 18px;
	z-index: 9000;
	display: flex;
	align-items: flex-end;
	gap: 12px;
	font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
	pointer-events: none;
	animation: om2-mascot-enter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.om2gle-mascot[hidden] {
	display: none !important;
}

@keyframes om2-mascot-enter {
	0%   { opacity: 0; transform: translateY(-40px); }
	100% { opacity: 1; transform: translateY(0); }
}

/* ——— mascot stage (the floating character) ——— */
.om2gle-mascot-stage {
	width: 160px;
	height: 200px;
	flex-shrink: 0;
	position: relative;
	filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.55));
	pointer-events: auto;
	cursor: pointer;
	order: 2;
}

.om2gle-mascot-svg {
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
}

/* Hide the floor shadow — we're floating on a dark page, no fake floor needed. */
.om2gle-mascot .floor-shadow { display: none; }

/* ——— transform-box prep for all animated parts ——— */
.om2gle-mascot .character,
.om2gle-mascot .leg,
.om2gle-mascot .leg-l,
.om2gle-mascot .leg-r,
.om2gle-mascot .arm,
.om2gle-mascot .head,
.om2gle-mascot .mouth,
.om2gle-mascot .eye,
.om2gle-mascot .hat,
.om2gle-mascot .wave,
.om2gle-mascot .body-grp,
.om2gle-mascot .brow-l,
.om2gle-mascot .brow-r,
.om2gle-mascot .arm-l,
.om2gle-mascot .arm-r,
.om2gle-mascot .eye-l,
.om2gle-mascot .eye-r {
	transform-box: fill-box;
}

.om2gle-mascot .character { transform-origin: 50% 90%; }

/* ——— Idle pose ——— */
.om2gle-mascot.pose-idle .character { animation: om2-idle-bob 3.6s ease-in-out infinite; }
.om2gle-mascot.pose-idle .head      { animation: om2-idle-head 4.4s ease-in-out infinite; transform-origin: 50% 100%; }
.om2gle-mascot.pose-idle .eye-l,
.om2gle-mascot.pose-idle .eye-r     { animation: om2-blink 5s ease-in-out infinite; transform-origin: 50% 50%; }
.om2gle-mascot.pose-idle .arm-l     { animation: om2-arm-sway-l 4s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-idle .arm-r     { animation: om2-arm-sway-r 4s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-idle .hat       { animation: om2-hat-tip 4.4s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes om2-idle-bob   { 0%, 100% { transform: translateY(0) scale(1, 1); }     50% { transform: translateY(-3px) scale(1.01, 0.99); } }
@keyframes om2-idle-head  { 0%, 100% { transform: rotate(-1.2deg); }                50% { transform: rotate(1.2deg); } }
@keyframes om2-blink      { 0%, 92%, 100% { transform: scaleY(1); }                 95% { transform: scaleY(0.08); } }
@keyframes om2-arm-sway-l { 0%, 100% { transform: rotate(2deg); }                   50% { transform: rotate(-4deg); } }
@keyframes om2-arm-sway-r { 0%, 100% { transform: rotate(-2deg); }                  50% { transform: rotate(4deg); } }
@keyframes om2-hat-tip    { 0%, 100% { transform: rotate(-2deg); }                  50% { transform: rotate(2deg); } }

/* ——— Talking pose ——— */
.om2gle-mascot.pose-talk .character    { animation: om2-talk-bob 0.6s ease-in-out infinite; }
.om2gle-mascot.pose-talk .mouth-closed { animation: om2-mouth-closed 0.42s steps(1) infinite; }
.om2gle-mascot.pose-talk .mouth-open   { animation: om2-mouth-open 0.42s steps(1) infinite; }
.om2gle-mascot.pose-talk .brow-l       { animation: om2-brow-up-l 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.om2gle-mascot.pose-talk .brow-r       { animation: om2-brow-up-r 1.4s ease-in-out infinite; transform-origin: 50% 100%; }
.om2gle-mascot.pose-talk .wave-1       { animation: om2-wave-emit 1.4s ease-out infinite; }
.om2gle-mascot.pose-talk .wave-2       { animation: om2-wave-emit 1.4s ease-out infinite 0.35s; }
.om2gle-mascot.pose-talk .wave-3       { animation: om2-wave-emit 1.4s ease-out infinite 0.7s; }
.om2gle-mascot.pose-talk .wave-l1      { animation: om2-wave-emit-l 1.4s ease-out infinite 0.1s; }
.om2gle-mascot.pose-talk .wave-l2      { animation: om2-wave-emit-l 1.4s ease-out infinite 0.55s; }
.om2gle-mascot.pose-talk .arm-l        { animation: om2-arm-gesture-l 1.8s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-talk .arm-r        { animation: om2-arm-gesture-r 1.8s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-talk .hat          { animation: om2-hat-bounce 0.6s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes om2-talk-bob      { 0%, 100% { transform: translateY(0); }                          50% { transform: translateY(-2px); } }
@keyframes om2-mouth-closed  { 0%, 55% { opacity: 1; }                                          56%, 100% { opacity: 0; } }
@keyframes om2-mouth-open    { 0%, 55% { opacity: 0; }                                          56%, 100% { opacity: 1; } }
@keyframes om2-brow-up-l     { 0%, 100% { transform: translateY(0) rotate(-4deg); }            50% { transform: translateY(-3px) rotate(-6deg); } }
@keyframes om2-brow-up-r     { 0%, 100% { transform: translateY(0) rotate(4deg); }             50% { transform: translateY(-3px) rotate(6deg); } }
@keyframes om2-wave-emit     { 0% { transform: translateX(0) scale(0.6); opacity: 0; }         25% { opacity: 0.9; } 100% { transform: translateX(60px) scale(1.4); opacity: 0; } }
@keyframes om2-wave-emit-l   { 0% { transform: translateX(0) scale(0.6); opacity: 0; }         25% { opacity: 0.9; } 100% { transform: translateX(-60px) scale(1.4); opacity: 0; } }
@keyframes om2-arm-gesture-l { 0%, 100% { transform: rotate(-8deg); }                          50% { transform: rotate(-22deg); } }
@keyframes om2-arm-gesture-r { 0%, 100% { transform: rotate(10deg); }                          50% { transform: rotate(28deg); } }
@keyframes om2-hat-bounce    { 0%, 100% { transform: translateY(0) rotate(-1deg); }            50% { transform: translateY(-2px) rotate(2deg); } }

/* ——— Walking pose ——— */
.om2gle-mascot.pose-walk .om2gle-mascot-svg { animation: om2-walk-traverse 4s ease-in-out infinite; }
.om2gle-mascot.pose-walk .character         { animation: om2-walk-bob 0.6s ease-in-out infinite; }
.om2gle-mascot.pose-walk .leg-l             { animation: om2-leg-swing-l 0.6s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-walk .leg-r             { animation: om2-leg-swing-r 0.6s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-walk .arm-l             { animation: om2-arm-swing-l 0.6s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-walk .arm-r             { animation: om2-arm-swing-r 0.6s ease-in-out infinite; transform-origin: 50% 0%; }
.om2gle-mascot.pose-walk .hat               { animation: om2-hat-walk 0.6s ease-in-out infinite; transform-origin: 50% 100%; }
.om2gle-mascot.pose-walk .head              { animation: om2-head-walk 0.6s ease-in-out infinite; transform-origin: 50% 100%; }

@keyframes om2-walk-traverse {
	0%   { transform: translateX(-12%); }
	50%  { transform: translateX(12%); }
	100% { transform: translateX(-12%); }
}
@keyframes om2-walk-bob    { 0%, 100% { transform: translateY(0); }              50% { transform: translateY(-4px); } }
@keyframes om2-leg-swing-l { 0%, 100% { transform: rotate(28deg); }              50% { transform: rotate(-28deg); } }
@keyframes om2-leg-swing-r { 0%, 100% { transform: rotate(-28deg); }             50% { transform: rotate(28deg); } }
@keyframes om2-arm-swing-l { 0%, 100% { transform: rotate(-24deg); }             50% { transform: rotate(24deg); } }
@keyframes om2-arm-swing-r { 0%, 100% { transform: rotate(24deg); }              50% { transform: rotate(-24deg); } }
@keyframes om2-hat-walk    { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(-1px); } }
@keyframes om2-head-walk   { 0%, 100% { transform: rotate(-1.5deg); }            50% { transform: rotate(1.5deg); } }

/* ——— Speech bubble ——— */
.om2gle-mascot-bubble {
	position: relative;
	order: 1;
	pointer-events: auto;
	max-width: 320px;
	min-width: 260px;
	margin-bottom: 24px;
	padding: 16px 18px 14px;
	background: linear-gradient(180deg, #1d2030 0%, #161821 100%);
	border: 1px solid rgba(201, 155, 92, 0.45);
	border-radius: 14px;
	color: #e8e9ee;
	box-shadow:
		0 18px 40px -12px rgba(0, 0, 0, 0.7),
		0 1px 0 rgba(255, 255, 255, 0.04) inset,
		0 0 0 4px rgba(201, 155, 92, 0.05);
	animation: om2-bubble-pop 0.42s cubic-bezier(0.16, 1, 0.3, 1) 0.18s both;
}

@keyframes om2-bubble-pop {
	0%   { opacity: 0; transform: translateY(8px) scale(0.96); }
	100% { opacity: 1; transform: translateY(0)   scale(1); }
}

/* Tail pointing to the mascot */
.om2gle-mascot-bubble::after {
	content: "";
	position: absolute;
	right: -10px;
	bottom: 24px;
	width: 18px; height: 18px;
	background: linear-gradient(135deg, transparent 50%, #161821 50%);
	border-right: 1px solid rgba(201, 155, 92, 0.45);
	border-bottom: 1px solid rgba(201, 155, 92, 0.45);
	transform: rotate(-45deg);
	border-radius: 0 0 4px 0;
}

.om2gle-mascot-bubble-eyebrow {
	font-size: 10px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	font-weight: 800;
	color: #E8C58A;
	margin-bottom: 8px;
}

.om2gle-mascot-bubble-title {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.15;
	color: #fdfbf3;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}

.om2gle-mascot-bubble-text {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.5;
	color: #c7c9d1;
}

.om2gle-mascot-bubble-text strong {
	color: #E8C58A;
	font-weight: 700;
}

.om2gle-mascot-bubble-actions {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.om2gle-mascot-btn {
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	padding: 9px 14px;
	border-radius: 999px;
	cursor: pointer;
	border: 1px solid transparent;
	transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.om2gle-mascot-btn:disabled {
	opacity: 0.6;
	cursor: progress;
}

.om2gle-mascot-btn-primary {
	background: linear-gradient(180deg, #E8C58A, #C99B5C);
	color: #1A1612;
	box-shadow: 0 6px 16px -6px rgba(201, 155, 92, 0.55);
}

.om2gle-mascot-btn-primary:hover:not(:disabled) {
	transform: translateY(-1px);
	background: linear-gradient(180deg, #F0D29E, #D6A969);
}

.om2gle-mascot-btn-ghost {
	background: transparent;
	color: #c7c9d1;
	border-color: rgba(232, 197, 138, 0.35);
}

.om2gle-mascot-btn-ghost:hover:not(:disabled) {
	border-color: rgba(232, 197, 138, 0.75);
	color: #fdfbf3;
}

.om2gle-mascot-close {
	position: absolute;
	top: 8px;
	right: 10px;
	width: 22px;
	height: 22px;
	border: 0;
	background: transparent;
	color: #8a8fa3;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 120ms ease, background 120ms ease;
}

.om2gle-mascot-close:hover {
	color: #fdfbf3;
	background: rgba(255, 255, 255, 0.06);
}

/* ——— In-bubble auth form ——— */
.om2gle-mascot-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 10px;
}

.om2gle-mascot-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.om2gle-mascot-field-label {
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8a8fa3;
	font-weight: 600;
}

.om2gle-mascot-field input[type="text"],
.om2gle-mascot-field input[type="email"],
.om2gle-mascot-field input[type="password"] {
	font: inherit;
	font-size: 13.5px;
	color: #fdfbf3;
	background: rgba(10, 11, 14, 0.55);
	border: 1px solid rgba(201, 155, 92, 0.25);
	border-radius: 8px;
	padding: 10px 12px;
	width: 100%;
	transition: border-color 120ms ease, background 120ms ease;
}

.om2gle-mascot-field input:focus {
	outline: none;
	border-color: rgba(232, 197, 138, 0.85);
	background: rgba(10, 11, 14, 0.75);
}

.om2gle-mascot-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #c7c9d1;
	cursor: pointer;
	user-select: none;
}

.om2gle-mascot-check input { accent-color: #E8C58A; }

.om2gle-mascot-error {
	background: rgba(239, 68, 68, 0.10);
	border: 1px solid rgba(239, 68, 68, 0.55);
	color: #ffb4b4;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 12px;
	line-height: 1.4;
}

/* ——— FAB (re-open after dismiss) ——— */
.om2gle-mascot-fab {
	position: fixed;
	right: 18px;
	top: 18px;
	z-index: 8999;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	border: 1px solid rgba(232, 197, 138, 0.55);
	background: linear-gradient(180deg, #1d2030, #0e0f13);
	color: #E8C58A;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	box-shadow:
		0 12px 28px -8px rgba(0, 0, 0, 0.65),
		0 0 0 4px rgba(201, 155, 92, 0.06);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 160ms ease, border-color 160ms ease;
}

.om2gle-mascot-fab[hidden] { display: none; }
.om2gle-mascot-fab:hover {
	transform: translateY(-2px);
	border-color: rgba(232, 197, 138, 0.95);
}

/* ——— mobile ——— */
@media (max-width: 720px) {
	.om2gle-mascot {
		right: 12px;
		top: 12px;
		align-items: flex-end;
	}
	.om2gle-mascot-bubble {
		max-width: min(78vw, 280px);
		min-width: 0;
		margin-bottom: 12px;
		padding: 14px 14px 12px;
	}
	.om2gle-mascot-bubble-title { font-size: 19px; }
	.om2gle-mascot-stage {
		width: 110px;
		height: 140px;
	}
	.om2gle-mascot-bubble::after {
		bottom: 18px;
		right: -8px;
		width: 14px; height: 14px;
	}
}

/* ——— reduced motion ——— */
@media (prefers-reduced-motion: reduce) {
	.om2gle-mascot,
	.om2gle-mascot * {
		animation: none !important;
	}
	.om2gle-mascot .mouth-open { opacity: 0; }
	.om2gle-mascot .mouth-closed { opacity: 1; }
}