@underpostnet/cyberia 3.3.0 → 3.3.76

package/src/client/components/cyberia-portal/MainBodyCyberiaPortal.js

@@ -1,23 +1,189 @@
+// MainBodyCyberiaPortal.js — Cyberia portal landing.
+//
+// A "landing-style" world selector: the hero keeps the pixel-art particle
+// field, grid, logo and title, and instead of a background video it surfaces
+// the first three playable worlds from the same registry the full
+// InstanceSelectionView consumes (`defaultInstanceProvider`, limited to 3).
+//
+// Each world is a space-framed thumbnail card (starfield frame + rotating
+// beam) with a staggered pixel-step entrance and its own float loop. Clicking a
+// card selects it: the selected world's thumbnail becomes the blurred hero
+// backdrop and the single CTA enters that world directly. The full selector
+// modal stays reachable through the secondary "browse all worlds" link.
+
 import { range } from '../core/CommonJs.js';
 import { ThemeEvents, darkTheme } from '../core/Css.js';
 import { EventsUI } from '../core/EventsUI.js';
+import { NotificationManager } from '../core/NotificationManager.js';
 import { getProxyPath } from '../core/Router.js';
 import { htmls, s } from '../core/VanillaJs.js';
+import {
+  defaultInstanceProvider,
+  placeholderThumbnail,
+  DEFAULT_CLIENT_BASE_URL,
+  STATUS_META,
+} from '../cyberia/InstanceSelectionView.js';
+
+const LANDING_WORLD_LIMIT = 3;
+
+const statusMeta = (status) => STATUS_META[status] || STATUS_META.offline;
+
+const escapeHtml = (value = '') =>
+  String(value).replace(
+    /[&<>"']/g,
+    (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' })[c],
+  );
+
+const worldCard = (instance, index, selected) => {
+  const meta = statusMeta(instance.status);
+  return html`
+    <button
+      class="hero-world hero-world-${index} ${selected ? 'hero-world-selected' : ''} ${
+        instance.playable ? '' : 'hero-world-unavailable'
+      }"
+      data-instance-id="${escapeHtml(instance.id)}"
+      type="button"
+      title="${escapeHtml(instance.name)}"
+      style="--world-index: ${index};"
+    >
+      <span class="hero-world-frame"></span>
+      <span class="hero-world-inner">
+        <img
+          class="hero-world-img"
+          src="${escapeHtml(instance.thumbnailUrl)}"
+          alt="${escapeHtml(instance.name)}"
+          loading="eager"
+          onerror="this.onerror=null;this.src='${placeholderThumbnail()}';"
+        />
+        <span class="hero-world-status hero-tone-${meta.tone}">
+          <span class="hero-world-dot"></span>${meta.label}
+        </span>
+        <span class="hero-world-check"><i class="fa-solid fa-check"></i></span>
+        <span class="hero-world-caption">
+          <span class="hero-world-name">${escapeHtml(instance.name)}</span>
+          ${instance.code ? html`<span class="hero-world-code">${escapeHtml(instance.code)}</span>` : ''}
+        </span>
+      </span>
+    </button>
+  `;
+};
+
+const worldSkeleton = () =>
+  range(0, LANDING_WORLD_LIMIT - 1)
+    .map(
+      (i) => html`
+        <div class="hero-world hero-world-${i} hero-world-skeleton" style="--world-index: ${i};">
+          <span class="hero-world-frame"></span>
+          <span class="hero-world-inner"></span>
+        </div>
+      `,
+    )
+    .join('');
 
 class MainBodyCyberiaPortal {
   static async instance() {
+    const id = 'cyberia-portal-landing';
+
+    // Per-render landing state: the 3 featured worlds and the one the CTA enters.
+    const state = { worlds: [], selectedId: null };
+    const selectedWorld = () => state.worlds.find((w) => w.id === state.selectedId) || null;
+
+    const worldsSel = `.hero-worlds`;
+    const ctaSel = `.cta-button`;
+    const backdropSel = `.hero-backdrop-img`;
+
+    const renderCta = () => {
+      const cta = s(ctaSel);
+      if (!cta) return;
+      const world = selectedWorld();
+      if (!world) {
+        cta.disabled = false;
+        cta.classList.remove('cta-button-disabled');
+        htmls(ctaSel, html`<i class="fa-solid fa-play"></i> Enter The World`);
+        return;
+      }
+      const meta = statusMeta(world.status);
+      cta.disabled = !world.playable;
+      cta.classList.toggle('cta-button-disabled', !world.playable);
+      htmls(
+        ctaSel,
+        world.playable
+          ? html`<i class="fa-solid fa-play"></i> Enter <span class="cta-world-name">${escapeHtml(world.name)}</span>`
+          : html`<i class="fa-solid fa-lock"></i> ${escapeHtml(world.name)} is ${meta.cta || meta.label}`,
+      );
+    };
+
+    const renderBackdrop = () => {
+      const img = s(backdropSel);
+      const world = selectedWorld();
+      if (!img || !world) return;
+      if (img.getAttribute('src') === world.thumbnailUrl) return;
+      img.classList.remove('hero-backdrop-visible');
+      img.onload = () => img.classList.add('hero-backdrop-visible');
+      img.onerror = () => img.classList.remove('hero-backdrop-visible');
+      img.src = world.thumbnailUrl;
+    };
+
+    const renderWorlds = () => {
+      if (!s(worldsSel)) return;
+      htmls(worldsSel, state.worlds.map((w, i) => worldCard(w, i, w.id === state.selectedId)).join(''));
+    };
+
+    const select = (instanceId) => {
+      if (!state.worlds.some((w) => w.id === instanceId)) return;
+      state.selectedId = instanceId;
+      const cards = s(worldsSel)?.querySelectorAll('.hero-world') || [];
+      cards.forEach((card) => card.classList.toggle('hero-world-selected', card.dataset.instanceId === instanceId));
+      renderCta();
+      renderBackdrop();
+    };
+
+    const launch = () => {
+      const world = selectedWorld();
+      if (!world) return (location.href = `${DEFAULT_CLIENT_BASE_URL}/`);
+      if (!world.playable) {
+        NotificationManager.Push({
+          html: `${world.name} is ${statusMeta(world.status).label}.`,
+          status: 'warning',
+        });
+        return;
+      }
+      location.href = world.playUrl || `${DEFAULT_CLIENT_BASE_URL}/`;
+    };
+
+    const load = async () => {
+      if (s(worldsSel)) htmls(worldsSel, worldSkeleton());
+      try {
+        state.worlds = await defaultInstanceProvider({ limit: LANDING_WORLD_LIMIT });
+      } catch (err) {
+        console.warn('[cyberia-portal-landing] could not load featured worlds', err);
+        state.worlds = [];
+      }
+      const first = state.worlds.find((w) => w.playable) || state.worlds[0];
+      state.selectedId = first ? first.id : null;
+      const section = s(`.hero-section`);
+      if (section) section.classList.toggle('hero-section-no-worlds', state.worlds.length === 0);
+      renderWorlds();
+      renderCta();
+      renderBackdrop();
+    };
+
     setTimeout(() => {
-      EventsUI.onClick('.cta-button', () => {
-        console.log('Enter the world button clicked');
-        location.href = 'https://client.cyberiaonline.com/';
-      });
-      EventsUI.onClick('.cta-button-select-instance', () => {
-        console.log('or select one button clicked');
-        s(`.main-btn-instance-selection`).click();
-      });
-    });
+      EventsUI.onClick(ctaSel, launch);
+      EventsUI.onClick('.cta-button-select-instance', () => s(`.main-btn-instance-selection`).click());
 
-    const id = 'cyberia-portal-landing';
+      const worlds = s(worldsSel);
+      if (worlds)
+        worlds.addEventListener('click', (event) => {
+          const card = event.target.closest?.('.hero-world:not(.hero-world-skeleton)');
+          if (!card) return;
+          // Second click on the already selected world enters it directly.
+          if (card.dataset.instanceId === state.selectedId) return launch();
+          select(card.dataset.instanceId);
+        });
+
+      load();
+    });
 
     // Stable pixel-art particle field: positions/motion fixed once so they don't jump on theme change.
     // Colors are theme-driven via CSS custom properties resolved in ThemeEvents.
@@ -56,12 +222,12 @@ class MainBodyCyberiaPortal {
             --footer-bg-color: ${darkTheme ? '#101010' : '#E3E3E3'};
             --card-bg-color: ${darkTheme ? '#2c2c2c' : '#FFFFFF'};
             --card-shadow: ${darkTheme ? '0 8px 25px rgba(0, 0, 0, 0.5)' : '0 8px 25px rgba(0, 0, 0, 0.1)'};
-            --btn-primary-bg: ${darkTheme
-              ? 'linear-gradient(45deg, #9b59b6, #8e44ad)'
-              : 'linear-gradient(45deg, #ffcc00, #e6b800)'};
-            --btn-primary-shadow: ${darkTheme
-              ? '0 4px 15px rgba(155, 89, 182, 0.4)'
-              : '0 4px 15px rgba(255, 204, 0, 0.4)'};
+            --btn-primary-bg: ${
+              darkTheme ? 'linear-gradient(45deg, #9b59b6, #8e44ad)' : 'linear-gradient(45deg, #ffcc00, #e6b800)'
+            };
+            --btn-primary-shadow: ${
+              darkTheme ? '0 4px 15px rgba(155, 89, 182, 0.4)' : '0 4px 15px rgba(255, 204, 0, 0.4)'
+            };
 
             /* Pixel-art particle + title palette (theme aware) */
             --particle-color-1: ${darkTheme ? '#bb8fce' : '#ffcc00'};
@@ -69,10 +235,39 @@ class MainBodyCyberiaPortal {
             --pixel-glow: ${darkTheme ? '14px' : '7px'};
             --title-accent: ${darkTheme ? '#bb8fce' : '#e6b800'};
             --title-shadow: ${darkTheme ? 'rgba(0, 0, 0, 0.85)' : 'rgba(0, 0, 0, 0.55)'};
-            --hero-overlay: ${darkTheme
-              ? 'linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.5))'
-              : 'linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35))'};
             --pixel-grid-color: ${darkTheme ? 'rgba(155, 89, 182, 0.75)' : 'rgba(255, 204, 0, 1)'};
+
+            /* Hero space backdrop: deep nebula gradient, the selected world's
+               thumbnail is blurred on top of it, then a tint keeps text legible */
+            --hero-space: ${
+              darkTheme
+                ? 'radial-gradient(ellipse 70% 60% at 20% 20%, rgba(155, 89, 182, 0.45), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 80%, rgba(93, 41, 128, 0.5), transparent 60%), linear-gradient(180deg, #0b0a12, #15111f)'
+                : 'radial-gradient(ellipse 70% 60% at 20% 20%, rgba(255, 204, 0, 0.35), transparent 60%), radial-gradient(ellipse 60% 50% at 85% 80%, rgba(230, 150, 0, 0.35), transparent 60%), linear-gradient(180deg, #1c1f33, #2a2340)'
+            };
+            --hero-overlay: ${
+              darkTheme
+                ? 'linear-gradient(180deg, rgba(8, 6, 14, 0.55), rgba(8, 6, 14, 0.78))'
+                : 'linear-gradient(180deg, rgba(16, 14, 30, 0.42), rgba(16, 14, 30, 0.7))'
+            };
+            --hero-backdrop-opacity: ${darkTheme ? '0.55' : '0.6'};
+
+            /* World cards */
+            --world-frame-bg: ${darkTheme ? '#08060e' : '#12101f'};
+            --world-star: ${darkTheme ? 'rgba(255, 255, 255, 0.9)' : 'rgba(255, 244, 200, 0.95)'};
+            --world-beam: ${darkTheme ? '#bb8fce' : '#ffcc00'};
+            --world-beam-2: ${darkTheme ? '#8e44ad' : '#e6b800'};
+            --world-caption-bg: ${
+              darkTheme
+                ? 'linear-gradient(0deg, rgba(8, 6, 14, 0.95), rgba(8, 6, 14, 0))'
+                : 'linear-gradient(0deg, rgba(18, 16, 31, 0.95), rgba(18, 16, 31, 0))'
+            };
+            --world-glow: ${darkTheme ? 'rgba(187, 143, 206, 0.55)' : 'rgba(255, 204, 0, 0.55)'};
+            --world-ok: ${darkTheme ? '#43d17a' : '#3ddc84'};
+            --world-warn: ${darkTheme ? '#f0b429' : '#ffc233'};
+            --world-err: ${darkTheme ? '#ff5b5b' : '#ff6b6b'};
+            --world-info: ${darkTheme ? '#c084fc' : '#c9a2ff'};
+            --world-muted: ${darkTheme ? '#8a8a96' : '#b0b0bd'};
+            --world-accent: ${darkTheme ? '#bb8fce' : '#ffcc00'};
           }
 
           .landing-page {
@@ -90,36 +285,45 @@ class MainBodyCyberiaPortal {
             display: flex;
             align-items: center;
             justify-content: center;
-            text-align: center;
             min-height: 100vh;
-            /*     background: url('${getProxyPath()}assets/lore/vectorized/lore8.svg') no-repeat center center/cover;*/
             position: relative;
-            padding: 0 1rem;
+            padding: 4rem 1rem 3.5rem;
             overflow: hidden;
+            background: var(--hero-space);
           }
-          .hero-video {
+          /* Selected world thumbnail, blurred and scaled, behind everything */
+          .hero-backdrop {
             position: absolute;
             inset: 0;
-
-            width: 100%;
-            height: 100%;
-
-            display: block;
-
+            z-index: 0;
+            overflow: hidden;
+            pointer-events: none;
+          }
+          .hero-backdrop-img {
+            position: absolute;
+            inset: -6%;
+            width: 112%;
+            height: 112%;
             object-fit: cover;
             object-position: center center;
-
-            pointer-events: none;
-            user-select: none;
-            z-index: 0;
+            image-rendering: pixelated;
+            filter: blur(18px) saturate(1.2);
+            opacity: 0;
+            transform: scale(1.04);
+            transition:
+              opacity 1.1s ease,
+              transform 12s ease-out;
+          }
+          .hero-backdrop-img.hero-backdrop-visible {
+            opacity: var(--hero-backdrop-opacity);
+            transform: scale(1);
           }
-          /* Soft blurred backdrop over the video (kept light) */
+          /* Tint over the backdrop so the white hero text stays legible */
           .hero-section::after {
             content: '';
             position: absolute;
             inset: 0;
             background: var(--hero-overlay);
-
             z-index: 1;
           }
           /* Pixel grid overlay (theme aware, slow drift) */
@@ -137,6 +341,7 @@ class MainBodyCyberiaPortal {
             -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1), transparent 92%);
             mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1), transparent 92%);
             animation: heroGridDrift 34s linear infinite;
+            opacity: 0.35;
           }
 
           /* Pixel-art particle field */
@@ -165,15 +370,26 @@ class MainBodyCyberiaPortal {
             box-shadow: 0 0 var(--pixel-glow) var(--particle-color-2);
           }
 
-          .hero-content {
+          /* Two-column hero: copy + CTA left, world deck right */
+          .hero-layout {
             position: relative;
             z-index: 5;
-            max-width: 800px;
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+            gap: 2.5rem 3rem;
+            align-items: center;
+            width: 100%;
+            max-width: 1180px;
             animation: fadeInUp 1s ease-out;
           }
+          .hero-content {
+            text-align: center;
+            max-width: 620px;
+            margin: 0 auto;
+          }
           .hero-content .logo-image {
-            max-width: 250px;
-            margin-bottom: 1rem;
+            max-width: 210px;
+            margin-bottom: 0.5rem;
             image-rendering: pixelated;
             transform-origin: center bottom;
             animation:
@@ -184,7 +400,7 @@ class MainBodyCyberiaPortal {
             position: relative;
             display: inline-block;
             font-size: 4rem;
-            margin-bottom: 1rem;
+            margin: 10px 0;
             font-weight: 700;
             letter-spacing: 4px;
             color: #fff;
@@ -194,17 +410,51 @@ class MainBodyCyberiaPortal {
             animation: heroTitlePixelIn 1s steps(18, end) 0.55s both;
           }
           .hero-content p {
-            font-size: 1.25rem;
-            margin-bottom: 2.5rem;
-            max-width: 600px;
-            margin-left: auto;
-            margin-right: auto;
+            font-size: 1.2rem;
+            margin: 10px auto 1.8rem;
+            max-width: 560px;
             line-height: 1.6;
+            color: #fff;
             text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
             animation: heroFadeUp 0.8s steps(6, end) 0.95s both;
           }
+          .hero-kicker {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 0.9rem;
+            padding: 5px 12px;
+            border: 2px solid var(--world-accent);
+            color: #fff;
+            font-size: 0.72rem;
+            font-weight: 700;
+            letter-spacing: 3px;
+            text-transform: uppercase;
+            background: rgba(0, 0, 0, 0.35);
+            animation: heroFadeUp 0.7s steps(6, end) 1.15s both;
+          }
+          .hero-kicker-dot {
+            width: 8px;
+            height: 8px;
+            background: var(--world-ok);
+            box-shadow: 0 0 10px var(--world-ok);
+            animation: heroPulse 1.6s ease-in-out infinite;
+          }
+          .hero-actions {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 10px;
+            animation: heroFadeUp 0.8s steps(6, end) 1.25s both;
+          }
 
           .cta-button {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            gap: 12px;
+            max-width: 100%;
             padding: 15px 35px;
             border: none;
             border-radius: 50px;
@@ -215,34 +465,280 @@ class MainBodyCyberiaPortal {
             cursor: pointer;
             transition:
               transform 0.3s,
-              box-shadow 0.3s;
+              box-shadow 0.3s,
+              opacity 0.3s;
             box-shadow: var(--btn-primary-shadow);
             text-transform: uppercase;
+            letter-spacing: 1px;
           }
-          .cta-button:hover {
+          .cta-button .cta-world-name {
+            max-width: 260px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+          }
+          .cta-button:hover:not(:disabled) {
             transform: translateY(-5px);
-            box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
+            box-shadow: 0 6px 20px var(--world-glow);
+          }
+          .cta-button:disabled,
+          .cta-button-disabled {
+            cursor: not-allowed;
+            opacity: 0.6;
+            filter: grayscale(0.5);
           }
           .cta-button-select-instance {
-            margin-top: 12px;
-            display: block;
-            margin-left: auto;
-            margin-right: auto;
-            padding: 10px 25px;
-            border: 1px solid var(--primary-color);
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 18px;
+            border: 1px solid rgba(255, 255, 255, 0.35);
             border-radius: 50px;
-            font-size: 0.95rem;
+            font-size: 0.9rem;
             cursor: pointer;
             transition:
               transform 0.3s,
-              box-shadow 0.3s;
-            background: var(--card-bg-color);
-            color: var(--text-color);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
+              box-shadow 0.3s,
+              border-color 0.3s;
+            background: rgba(0, 0, 0, 0.35);
+            color: #fff;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
           }
           .cta-button-select-instance:hover {
             transform: translateY(-2px);
-            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.15);
+            border-color: var(--world-accent);
+            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
+          }
+
+          /* World deck: 3 space-framed thumbnails in a staggered cascade */
+          .hero-worlds {
+            display: grid;
+            grid-template-columns: repeat(3, minmax(0, 1fr));
+            gap: 14px;
+            width: 100%;
+            max-width: 720px;
+            margin: 0 auto;
+            align-items: start;
+          }
+          .hero-section-no-worlds .hero-worlds {
+            display: none;
+          }
+          .hero-world {
+            position: relative;
+            display: block;
+            width: 100%;
+            padding: 0;
+            border: none;
+            background: transparent;
+            color: #fff;
+            font-family: inherit;
+            text-align: left;
+            cursor: pointer;
+            /* pixel-step entrance (after the title), then an endless gentle float
+               whose phase is offset per card so the deck never bobs in unison */
+            animation:
+              heroWorldIn 0.75s steps(8, end) calc(1.15s + var(--world-index, 0) * 0.16s) both,
+              heroWorldFloat calc(5.2s + var(--world-index, 0) * 0.7s) ease-in-out
+                calc(1.9s + var(--world-index, 0) * 0.16s) infinite;
+          }
+          .hero-world:focus-visible {
+            outline: 3px solid var(--world-accent);
+            outline-offset: 4px;
+          }
+          /* Space frame: starfield padding ring with a slowly rotating light beam */
+          .hero-world-frame {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            background-color: var(--world-frame-bg);
+            background-image:
+              radial-gradient(circle, var(--world-star) 0.9px, transparent 1.4px),
+              radial-gradient(circle, var(--world-star) 0.7px, transparent 1.2px),
+              radial-gradient(circle, var(--world-star) 1.1px, transparent 1.6px);
+            background-size:
+              23px 23px,
+              37px 41px,
+              59px 53px;
+            background-position:
+              0 0,
+              11px 7px,
+              29px 19px;
+            animation: heroStarDrift 60s linear infinite;
+            transition: box-shadow 0.35s ease;
+            box-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
+          }
+          .hero-world-frame::before {
+            content: '';
+            position: absolute;
+            inset: -75%;
+            background: conic-gradient(
+              from 0deg,
+              transparent 0deg,
+              transparent 250deg,
+              var(--world-beam-2) 300deg,
+              var(--world-beam) 330deg,
+              transparent 360deg
+            );
+            opacity: 0.85;
+            animation: heroBeamSpin 7s linear infinite;
+            animation-delay: calc(var(--world-index, 0) * -2.3s);
+          }
+          .hero-world-inner {
+            position: relative;
+            z-index: 1;
+            display: block;
+            margin: 6px;
+            aspect-ratio: 16 / 11;
+            overflow: hidden;
+            background: var(--world-frame-bg);
+            transform: scale(1);
+            transition:
+              transform 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2),
+              filter 0.35s ease;
+          }
+          .hero-world-img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            image-rendering: pixelated;
+            transform: scale(1.02);
+            transition:
+              transform 0.6s ease,
+              filter 0.35s ease;
+            filter: saturate(0.85) brightness(0.9);
+          }
+          .hero-world:hover .hero-world-img,
+          .hero-world-selected .hero-world-img {
+            transform: scale(1.1);
+            filter: saturate(1.1) brightness(1);
+          }
+          .hero-world:hover .hero-world-frame,
+          .hero-world-selected .hero-world-frame {
+            box-shadow:
+              0 0 0 2px var(--world-accent),
+              0 0 26px var(--world-glow),
+              0 14px 32px rgba(0, 0, 0, 0.6);
+          }
+          .hero-world-selected .hero-world-frame::before {
+            opacity: 1;
+            animation-duration: 3.2s;
+          }
+          .hero-world-selected .hero-world-inner {
+            transform: scale(1.03);
+          }
+          .hero-world-unavailable .hero-world-img {
+            filter: grayscale(0.7) brightness(0.65);
+          }
+          .hero-world-status {
+            position: absolute;
+            top: 8px;
+            left: 8px;
+            z-index: 2;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 3px 8px;
+            font-size: 0.62rem;
+            font-weight: 700;
+            letter-spacing: 1.5px;
+            text-transform: uppercase;
+            color: #fff;
+            background: rgba(0, 0, 0, 0.65);
+            border-left: 3px solid var(--tone, var(--world-muted));
+          }
+          .hero-world-dot {
+            width: 7px;
+            height: 7px;
+            background: var(--tone, var(--world-muted));
+            box-shadow: 0 0 8px var(--tone, var(--world-muted));
+            animation: heroPulse 1.6s ease-in-out infinite;
+          }
+          .hero-tone-ok {
+            --tone: var(--world-ok);
+          }
+          .hero-tone-warn {
+            --tone: var(--world-warn);
+          }
+          .hero-tone-err {
+            --tone: var(--world-err);
+          }
+          .hero-tone-info {
+            --tone: var(--world-info);
+          }
+          .hero-tone-muted {
+            --tone: var(--world-muted);
+          }
+          .hero-tone-accent {
+            --tone: var(--world-accent);
+          }
+          .hero-world-check {
+            position: absolute;
+            top: 6px;
+            right: 6px;
+            z-index: 2;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 26px;
+            height: 26px;
+            font-size: 0.8rem;
+            color: #111;
+            background: var(--world-accent);
+            box-shadow: 0 0 12px var(--world-glow);
+            opacity: 0;
+            transform: scale(0.4);
+            transition:
+              opacity 0.25s ease,
+              transform 0.25s cubic-bezier(0.2, 0.9, 0.3, 1.4);
+          }
+          .hero-world-selected .hero-world-check {
+            opacity: 1;
+            transform: scale(1);
+          }
+          .hero-world-caption {
+            position: absolute;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 2;
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            padding: 22px 10px 9px;
+            background: var(--world-caption-bg);
+          }
+          .hero-world-name {
+            font-size: 0.95rem;
+            font-weight: 700;
+            letter-spacing: 0.5px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.7);
+          }
+          .hero-world-code {
+            font-size: 0.66rem;
+            letter-spacing: 2px;
+            text-transform: uppercase;
+            color: var(--world-accent);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .hero-world-skeleton {
+            cursor: default;
+            animation: heroWorldIn 0.75s steps(8, end) calc(1.15s + var(--world-index, 0) * 0.16s) both;
+          }
+          .hero-world-skeleton .hero-world-inner {
+            background: linear-gradient(
+              90deg,
+              rgba(255, 255, 255, 0.04) 25%,
+              rgba(255, 255, 255, 0.12) 37%,
+              rgba(255, 255, 255, 0.04) 63%
+            );
+            background-size: 400% 100%;
+            animation: heroShimmer 1.3s ease infinite;
           }
 
           /* Features Section */
@@ -272,6 +768,36 @@ class MainBodyCyberiaPortal {
             .features-grid {
               grid-template-columns: repeat(auto-fit, minmax(22%, 1fr)); /* 4 columns */
             }
+            .hero-layout {
+              grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
+            }
+            .hero-content {
+              text-align: left;
+              margin: 0;
+            }
+            .hero-content p {
+              margin-left: 0;
+              margin-right: 0;
+            }
+            .hero-actions {
+              align-items: flex-start;
+            }
+            /* cascade: each card steps down and right, selected one pops forward */
+            .hero-worlds {
+              grid-template-columns: repeat(3, minmax(0, 1fr));
+              max-width: none;
+              padding-top: 24px;
+              padding-bottom: 24px;
+            }
+            .hero-world-0 {
+              --card-y: 24px;
+            }
+            .hero-world-1 {
+              --card-y: -12px;
+            }
+            .hero-world-2 {
+              --card-y: 36px;
+            }
           }
           .feature-card {
             background: var(--card-bg-color);
@@ -367,6 +893,73 @@ class MainBodyCyberiaPortal {
             }
           }
 
+          /* World cards: pixel-step drop-in, then a slow bob (offsets are baked in
+             via --card-y so the desktop cascade survives the float loop) */
+          @keyframes heroWorldIn {
+            0% {
+              opacity: 0;
+              transform: translateY(calc(var(--card-y, 0px) + 48px)) scale(0.82);
+            }
+            60% {
+              opacity: 1;
+              transform: translateY(calc(var(--card-y, 0px) - 8px)) scale(1.03);
+            }
+            100% {
+              opacity: 1;
+              transform: translateY(var(--card-y, 0px)) scale(1);
+            }
+          }
+          @keyframes heroWorldFloat {
+            0%,
+            100% {
+              transform: translateY(var(--card-y, 0px));
+            }
+            50% {
+              transform: translateY(calc(var(--card-y, 0px) - 9px));
+            }
+          }
+          @keyframes heroBeamSpin {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+          @keyframes heroStarDrift {
+            from {
+              background-position:
+                0 0,
+                11px 7px,
+                29px 19px;
+            }
+            to {
+              background-position:
+                -46px 46px,
+                -63px 89px,
+                -89px 125px;
+            }
+          }
+          @keyframes heroShimmer {
+            0% {
+              background-position: 100% 0;
+            }
+            100% {
+              background-position: 0 0;
+            }
+          }
+          @keyframes heroPulse {
+            0%,
+            100% {
+              opacity: 1;
+              transform: scale(1);
+            }
+            50% {
+              opacity: 0.45;
+              transform: scale(0.75);
+            }
+          }
+
           /* Pixel-art particles rise with drift + spin; grid drifts slowly */
           @keyframes heroParticleFloat {
             0% {
@@ -402,13 +995,29 @@ class MainBodyCyberiaPortal {
             .hero-pixel-grid,
             .hero-content .logo-image,
             .hero-content h1,
-            .hero-content p {
+            .hero-content p,
+            .hero-kicker,
+            .hero-kicker-dot,
+            .hero-actions,
+            .hero-world,
+            .hero-world-frame,
+            .hero-world-frame::before,
+            .hero-world-dot,
+            .hero-world-skeleton .hero-world-inner {
               animation: none !important;
             }
+            .hero-backdrop-img,
+            .hero-world-inner,
+            .hero-world-img {
+              transition: none !important;
+            }
           }
 
           /* Responsive Styles */
           @media (max-width: 650px) {
+            .hero-section {
+              padding: 3.5rem 1rem 3rem;
+            }
             .hero-content h1 {
               font-size: 2.2rem;
             }
@@ -416,12 +1025,34 @@ class MainBodyCyberiaPortal {
               font-size: 1rem;
             }
             .hero-content .logo-image {
-              max-width: 180px;
+              max-width: 160px;
             }
             .cta-button {
-              padding: 12px 28px;
+              padding: 12px 24px;
               font-size: 1rem;
             }
+            .cta-button .cta-world-name {
+              max-width: 160px;
+            }
+            .hero-worlds {
+              gap: 10px;
+            }
+            .hero-world-inner {
+              margin: 4px;
+            }
+            .hero-world-name {
+              font-size: 0.78rem;
+            }
+            .hero-world-code {
+              display: none;
+            }
+            .hero-world-status {
+              font-size: 0.55rem;
+              padding: 2px 6px;
+            }
+            .hero-world-caption {
+              padding: 16px 7px 6px;
+            }
             .features-section {
               padding: 3rem 1rem;
             }
@@ -443,21 +1074,26 @@ class MainBodyCyberiaPortal {
       <div class="style-${id}"></div>
       <div class="landing-page">
         <section class="hero-section">
-          <video class="hero-video" autoplay muted loop playsinline preload="auto" poster="/assets/video/landing.webp">
-            <!-- H.264 (compatibilidad) -->
-            <source src="/assets/video/landing-web.mp4" type='video/mp4; codecs="avc1.42E01E"' />
-          </video>
+          <div class="hero-backdrop"><img class="hero-backdrop-img" alt="" aria-hidden="true" /></div>
           <div class="hero-pixel-grid"></div>
           <div class="hero-particles">${heroParticlesHtml}</div>
-          <div class="hero-content">
-            <img src="${getProxyPath()}assets/ui-icons/cyberia-white.png" alt="Cyberia Logo" class="logo-image" />
-            <h1 style="margin: 10px">CYBERIA</h1>
-            <p style="color: #fff; text-align: center; margin: 10px auto;">
-              An action-packed Hack and Slash MMORPG. Explore a dynamic online sandbox pixel art universe, right from
-              your browser.
-            </p>
-            <button class="cta-button">Enter The World</button>
-            <button class="cta-button-select-instance">or select one</button>
+          <div class="hero-layout">
+            <div class="hero-content">
+              <img src="${getProxyPath()}assets/ui-icons/cyberia-white.png" alt="Cyberia Logo" class="logo-image" />
+              <h1>CYBERIA</h1>
+              <p>
+                An action-packed Hack and Slash MMORPG. Explore a dynamic online sandbox pixel art universe, right from
+                your browser.
+              </p>
+              <div class="hero-kicker"><span class="hero-kicker-dot"></span> Pick a world · Jump in</div>
+              <div class="hero-actions">
+                <button class="cta-button" type="button"><i class="fa-solid fa-play"></i> Enter The World</button>
+                <button class="cta-button-select-instance" type="button">
+                  <i class="fa-solid fa-globe"></i> Browse all worlds
+                </button>
+              </div>
+            </div>
+            <div class="hero-worlds">${worldSkeleton()}</div>
           </div>
         </section>