/* ==========================================================================
   Melodiossa — Preloader temático (crochet / ovillo de lana)
   Conserva la clase .preloader (el fadeOut de script.js sigue funcionando).
   ========================================================================== */

.preloader.melo-preloader {
	display: flex;
	align-items: center;
	justify-content: center;
	background:
		radial-gradient(60% 60% at 50% 38%, #ffffff 0%, var(--melo-cream, #efe8df) 100%);
}

.melo-preloader__inner {
	--melo-pink: #ff91a4;
	--melo-pink-dark: #f4718a;
	--melo-ink: #4b4342;
	text-align: center;
	padding: 20px;
}

/* ------------------------------------------------------------- Ovillo */
.melo-preloader__yarn {
	width: 120px;
	height: 120px;
	margin: 0 auto 26px;
	animation: meloYarnBob 2.4s ease-in-out infinite;
}

.melo-preloader__yarn svg {
	width: 100%;
	height: 100%;
	overflow: visible;
	display: block;
}

/* La bola gira sobre su centro */
.melo-preloader__ball {
	transform-origin: 60px 58px;
	animation: meloYarnSpin 3.2s linear infinite;
}

/* El hilo que cuelga se "teje" (dibujo progresivo) */
.melo-preloader__thread {
	stroke-dasharray: 90;
	stroke-dashoffset: 90;
	animation: meloThread 2.4s ease-in-out infinite;
}

/* --------------------------------------------------------- Marca / texto */
.melo-preloader__brand {
	font-family: 'Leckerli One', cursive;
	font-size: 34px;
	line-height: 1;
	color: var(--melo-pink-dark);
	letter-spacing: 0.5px;
}

.melo-preloader__tag {
	margin-top: 10px;
	font-family: 'ABeeZee', sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--melo-ink);
	opacity: 0.8;
}

.melo-preloader__tag b {
	font-weight: 400;
	opacity: 0;
	animation: meloDot 1.4s infinite;
}

.melo-preloader__tag b:nth-child(1) { animation-delay: 0s; }
.melo-preloader__tag b:nth-child(2) { animation-delay: 0.2s; }
.melo-preloader__tag b:nth-child(3) { animation-delay: 0.4s; }

/* ------------------------------------------------------- Barra de progreso */
.melo-preloader__bar {
	position: relative;
	width: 180px;
	height: 4px;
	margin: 22px auto 0;
	border-radius: 999px;
	background: rgba(255, 145, 164, 0.22);
	overflow: hidden;
}

.melo-preloader__bar::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 40%;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--melo-pink), var(--melo-pink-dark));
	animation: meloBar 1.3s ease-in-out infinite;
}

/* ---------------------------------------------------------------- Keyframes */
@keyframes meloYarnSpin {
	to { transform: rotate(360deg); }
}

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

@keyframes meloThread {
	0%        { stroke-dashoffset: 90; }
	55%, 100% { stroke-dashoffset: 0; }
}

@keyframes meloDot {
	0%, 100% { opacity: 0; }
	40%      { opacity: 1; }
}

@keyframes meloBar {
	0%   { left: -40%; }
	100% { left: 100%; }
}

/* --------------------------------------------- Accesibilidad: menos movimiento */
@media (prefers-reduced-motion: reduce) {
	.melo-preloader__yarn { animation: none; }
	.melo-preloader__ball { animation: meloYarnSpin 6s linear infinite; }
	.melo-preloader__thread,
	.melo-preloader__tag b,
	.melo-preloader__bar::before { animation: none; }
	.melo-preloader__thread { stroke-dashoffset: 0; }
	.melo-preloader__tag b { opacity: 1; }
}

@media (max-width: 575px) {
	.melo-preloader__yarn { width: 100px; height: 100px; margin-bottom: 22px; }
	.melo-preloader__brand { font-size: 28px; }
}