/* =============================================================================
   home-fx-2026.css — MaeloRO 08/10/2026. Portada: capa de efectos "3D" y de luz (se carga la ULTIMA, despues de
   home-2026.css, junto con maeloro-fx.js). Solo aspecto: mismos colores (oro, lila, menta; azul Jedi / rojo Sith),
   mismos textos y enlaces. Todo lo que se mueve esta dentro de (prefers-reduced-motion: no-preference) o lo pone
   el JS solo cuando hay raton. Para desactivarla: quitar el <link> de index.php.
   ============================================================================= */

/* ---------- 0. aparicion al hacer scroll (el JS pone .mro-aparece solo a lo que esta fuera de la vista) ---------- */
.mro-aparece { opacity: 0; transform: translateY(18px); }
.mro-aparece.mro-visto {
	opacity: 1;
	transform: none;
	transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
	transition-delay: calc(var(--mro-orden, 0) * 70ms);
}

/* ---------- 1. botones del hero: inclinacion 3D hacia el raton + destello que lo sigue + halo de su color ---------- */
.mro-sheen {
	position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
	background: radial-gradient(140px circle at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, .34), transparent 62%);
	mix-blend-mode: soft-light; opacity: 0; transition: opacity .25s ease;
}
.mro-tilt > .mro-sheen { opacity: 1; }
.mro-raton .button-group .btn { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, filter .3s ease; }
.mro-raton .button-group .btn.mro-tilt {
	transform: perspective(700px) rotateX(calc(var(--ty, 0) * -1 * var(--mro-max, 6deg))) rotateY(calc(var(--tx, 0) * var(--mro-max, 6deg))) translateY(-3px) scale(1.03);
	transition: transform .12s linear, box-shadow .3s ease, filter .3s ease;
	will-change: transform;
	box-shadow: var(--h3d-bevel-gold-hover), 0 0 34px rgba(255, 215, 0, .32);
}
.mro-raton .button-row a[href*="discord.gg"].mro-tilt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -12px rgba(0, 0, 0, .95), 0 0 34px rgba(88, 101, 242, .55); }
.mro-raton #forumButton.mro-tilt { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 14px 28px -12px rgba(0, 0, 0, .95), 0 0 34px rgba(182, 156, 255, .5); }
.mro-raton #playButton.mro-tilt { box-shadow: 0 0 0 2px rgba(140, 90, 20, .40) inset, 0 14px 30px rgba(0, 0, 0, .45), 0 0 44px rgba(255, 215, 0, .55); }

/* ---------- 2. golpe dorado al pulsar (tambien en telefono) ---------- */
.mro-pos { position: relative; }
.mro-golpe {
	position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 244, 200, .95) 0%, rgba(255, 215, 0, .55) 45%, transparent 70%);
	animation: mroGolpe .65s ease-out forwards;
}
@keyframes mroGolpe {
	0% { transform: scale(1); opacity: .9; }
	100% { transform: scale(14); opacity: 0; }
}

/* ---------- 3. pildoras de estado: iconos del juego, encendido en cadena y "senal" que recorre ---------- */
.server-item { position: relative; overflow: hidden; }
.server-item p { display: inline-flex; align-items: center; gap: 8px; }
.server-item p::before {
	content: ''; flex: 0 0 18px; width: 18px; height: 18px;
	background: center / contain no-repeat; image-rendering: pixelated;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .7));
}
.server-list .server-item:nth-child(1) p::before { background-image: url('ro-ui/menu-option-1.png'); }
.server-list .server-item:nth-child(2) p::before { background-image: url('ro-ui/menu-status-1.png'); }
.server-list .server-item:nth-child(3) p::before { background-image: url('ro-ui/menu-map-1.png'); }
.server-item::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(100deg, transparent 30%, rgba(127, 240, 200, .18) 50%, transparent 70%);
	transform: translateX(-120%);
}
/* jugadores online: caras del juego; mercaderes: bolsa de zeny */
.online-pill::before {
	content: ''; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 22px;
	background: url('ro-ui/face1.png') center / cover no-repeat; image-rendering: pixelated;
	box-shadow: 0 0 0 1px rgba(127, 240, 200, .5), 0 1px 3px rgba(0, 0, 0, .7);
}
.online-pill.merchant-pill::before { background-image: url('ro-ui/icon-gold.png'); background-size: contain; border-radius: 0; box-shadow: none; }
.online-pill-num { font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: no-preference) {
	.server-list .server-item { animation: mroEncender .9s ease-out both; }
	.server-list .server-item:nth-child(2) { animation-delay: .15s; }
	.server-list .server-item:nth-child(3) { animation-delay: .3s; }
	.server-item::after { animation: mroSenal 8s ease-in-out infinite; }
	.server-list .server-item:nth-child(2)::after { animation-delay: .35s; }
	.server-list .server-item:nth-child(3)::after { animation-delay: .7s; }
	@keyframes mroEncender {
		0% { opacity: 0; transform: translateY(8px); box-shadow: var(--h3d-pill), 0 0 0 rgba(127, 240, 200, 0); }
		55% { box-shadow: var(--h3d-pill), 0 0 26px rgba(127, 240, 200, .55); }
		100% { opacity: 1; transform: none; }
	}
	@keyframes mroSenal {
		0%, 70% { transform: translateX(-120%); }
		85%, 100% { transform: translateX(120%); }
	}
}

/* ---------- 4. banner: respira despacio y sigue al raton; ascuas de la Fuerza ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 700px) {
	header .logo {
		transform-origin: 50% 35%;
		animation: mroBannerRespira 28s ease-in-out infinite alternate;
		transition: transform .6s ease;
	}
	@keyframes mroBannerRespira {
		from { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)) scale(1); }
		to { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 6px)) scale(1.035); }
	}
	/* las estrellas que ya habia parpadean a destiempo en vez de todas a la vez */
	header::before { animation-duration: 3.2s; }
}
.mro-ascuas { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.mro-ascuas i {
	position: absolute; left: var(--x); bottom: -10px; width: var(--r); height: var(--r); border-radius: 50%; opacity: 0;
	background: #ffd86a; box-shadow: 0 0 6px 2px rgba(255, 215, 0, .55);
	animation: mroAscua var(--d) linear infinite; animation-delay: var(--e);
}
.mro-ascuas i.az { background: #9fd8ff; box-shadow: 0 0 6px 2px rgba(70, 165, 255, .6); }
.mro-ascuas i.ro { background: #ffb0b0; box-shadow: 0 0 6px 2px rgba(255, 60, 70, .6); }
@keyframes mroAscua {
	0% { transform: translateY(0) translateX(0); opacity: 0; }
	10% { opacity: .85; }
	50% { transform: translateY(-45vh) translateX(12px); opacity: .6; }
	100% { transform: translateY(-90vh) translateX(-8px); opacity: 0; }
}

/* ---------- 5. barra superior: el filo se vuelve un sable cuando el hero ya no esta a la vista ---------- */
.top-bar::after { transition: opacity .4s ease, box-shadow .4s ease; }
body.mro-scrolled .top-bar::after {
	background: linear-gradient(90deg, transparent 2%, rgba(60, 160, 255, .9) 18%, rgba(255, 215, 0, .95) 50%, rgba(255, 45, 60, .9) 82%, transparent 98%);
	box-shadow: 0 0 10px rgba(255, 215, 0, .35), 0 0 18px rgba(120, 160, 255, .25);
}
/* marca en la barra tambien en telefono (el texto se oculta a <=600px) */
@media (max-width: 600px) {
	.top-bar .nav-brand-link::before, .top-bar > div:first-child::before {
		content: ''; display: inline-block; width: 26px; height: 26px; margin-right: 6px; vertical-align: middle;
		background: url('ro-ui/app-icon-32.png') center / contain no-repeat; border-radius: 6px;
		box-shadow: 0 0 10px rgba(255, 215, 0, .25);
	}
}

/* ---------- 6. tarjetas "Midgard today", Why play, Server Info, WoE: inclinacion suave con el raton ---------- */
.mro-raton .pulse-tile, .mro-raton .feature-mini, .mro-raton .info-col, .mro-raton .woe-day { transform-style: preserve-3d; }
.mro-raton .pulse-tile.mro-tilt, .mro-raton .feature-mini.mro-tilt, .mro-raton .info-col.mro-tilt, .mro-raton .woe-day.mro-tilt {
	transform: perspective(900px) rotateX(calc(var(--ty, 0) * -1 * var(--mro-max, 4deg))) rotateY(calc(var(--tx, 0) * var(--mro-max, 4deg))) translateY(-3px);
	transition: transform .12s linear, box-shadow .25s ease, border-color .25s ease;
	border-color: rgba(255, 215, 0, .5) !important;
}
.pulse-tile, .feature-mini, .info-col, .woe-day { position: relative; overflow: hidden; }

/* ---------- 7. la tarjeta de Windows sin icono en el titulo (la unica): el mando del juego ---------- */
#wconsoleSection > h2::before { background-image: url('ro-ui/menu-battle-1.png'); }
@media (hover: hover) { #wconsoleSection:hover > h2::before { background-image: url('ro-ui/menu-battle-2.png'); } }

/* ---------- 8. Why play en telefono: la quinta tarjeta ocupa las dos columnas en vez de quedar sola ---------- */
@media (max-width: 700px) {
	.features-grid > .feature-mini:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* ---------- 9. sin movimiento: todo quieto y visible ---------- */
@media (prefers-reduced-motion: reduce) {
	.mro-aparece { opacity: 1; transform: none; }
	.mro-ascuas, .mro-golpe, .mro-sheen { display: none; }
}