#rf-widget {
position: relative;
width: 100%;
height: 500px;
overflow: hidden;
background: #000;
}
#rf-widget canvas#rf-bg {
position: absolute; inset: 0;
width: 100%; height: 100%;
display: block;
}
#rf-widget #rf-vignette {
position: absolute; inset: 0;
background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(0,0,0,0.72) 100%);
pointer-events: none;
}
#rf-widget #rf-scanlines {
position: absolute; inset: 0;
background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.055) 2px, rgba(0,0,0,0.055) 4px);
pointer-events: none; opacity: 0.6;
}
#rf-widget #rf-flash {
position: absolute; inset: 0;
background: #FF2800;
opacity: 0; pointer-events: none;
will-change: opacity;
}
#rf-widget #rf-progress {
position: absolute; bottom: 0; left: 0; right: 0;
height: 2px; background: rgba(255,255,255,0.07);
}
#rf-widget #rf-progress-fill {
height: 100%; width: 0%;
background: #FF5C00;
box-shadow: 0 0 10px #FF5C00;
transition: width 0.08s linear;
}
#rf-widget #rf-stage {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
display: flex; align-items: center; justify-content: center;
padding-inline: clamp(16px, 6vw, 80px);
}
#rf-widget .rf-scene {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding-inline: clamp(16px, 6vw, 80px);
opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
#rf-widget .rf-scene.rf-visible { opacity: 1; }
#rf-widget .rf-logo-mark {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(3rem, 13vw, 10rem);
line-height: 0.88; letter-spacing: 0.025em;
color: #FF5C00; text-align: center;
text-shadow: 0 0 30px rgba(255,92,0,0.8), 0 0 80px rgba(255,40,0,0.35), 3px 3px 0 #2A0E00;
}
#rf-widget .rf-logo-mark em { font-style: normal; color: #FF2800; }
#rf-widget .rf-logo-sub {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(0.6rem, 1.5vw, 0.9rem); font-weight: 700;
letter-spacing: 0.5em; text-transform: uppercase;
color: #8A7A65; margin-top: 1rem; text-align: center;
}
#rf-widget #rf-word-display {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(4rem, 16vw, 12rem); line-height: 1;
color: #E8D5B0; text-align: center; letter-spacing: 0.02em;
text-shadow: 0 0 50px rgba(255,92,0,0.45), 4px 4px 0 rgba(0,0,0,0.8);
will-change: transform, opacity;
}
#rf-widget #rf-word-display.rf-pop {
animation: rf-wordpop 0.55s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes rf-wordpop {
0% { transform: scale(0.35); opacity: 0; }
55% { transform: scale(1.07); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
#rf-widget .rf-server-panel { width: min(700px, 85vw); }
#rf-widget .rf-eyebrow {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(0.55rem, 1.2vw, 0.75rem); font-weight: 700;
letter-spacing: 0.45em; text-transform: uppercase; color: #FF5C00; margin-bottom: 0.3rem;
}
#rf-widget .rf-server-title {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(2rem, 6vw, 4.5rem); line-height: 0.95;
color: #E8D5B0; letter-spacing: 0.035em; margin-bottom: 0.8rem;
text-shadow: 2px 2px 0 rgba(0,0,0,0.6);
}
#rf-widget .rf-divider {
height: 1px;
background: linear-gradient(to right, #FF5C00 0%, rgba(255,92,0,0.15) 60%, transparent 100%);
margin-bottom: 0.9rem;
}
#rf-widget .rf-feat-grid { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; }
#rf-widget .rf-feat-pill {
font-family: 'Rajdhani', sans-serif;
font-size: clamp(0.55rem, 1.2vw, 0.75rem); font-weight: 600;
letter-spacing: 0.04em; color: #8A7A65;
background: rgba(255,92,0,0.07); border: 1px solid rgba(255,92,0,0.2);
padding: 3px 10px; opacity: 0; transform: translateY(5px);
transition: opacity 0.18s ease, transform 0.18s ease; white-space: nowrap;
}
#rf-widget .rf-feat-pill.rf-shown { opacity: 1; transform: translateY(0); }
#rf-widget .rf-feat-pill.rf-hot { color: #FF5C00; border-color: rgba(255,92,0,0.55); background: rgba(255,92,0,0.11); }
#rf-widget .rf-connect-inner {
display: flex; flex-direction: column; align-items: center; gap: 1.2rem; text-align: center;
}
#rf-widget .rf-connect-logo {
font-family: 'Bebas Neue', Impact, sans-serif;
font-size: clamp(2.5rem, 7vw, 6rem); line-height: 0.9; letter-spacing: 0.025em;
color: #FF5C00; text-shadow: 0 0 35px rgba(255,92,0,0.65), 2px 2px 0 #1A0600;
}
#rf-widget .rf-connect-logo em { color: #FF2800; font-style: normal; }
#rf-widget .rf-tagline {
font-family: 'Bebas Neue', sans-serif;
font-size: clamp(0.75rem, 1.8vw, 1.3rem); letter-spacing: 0.3em; color: #8A7A65;
}
#rf-widget .rf-cards { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; }
#rf-widget .rf-card {
display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
padding: 0.85rem 1.3rem;
background: rgba(255,92,0,0.04); border: 1px solid rgba(255,92,0,0.22);
}
#rf-widget .rf-card-label {
font-family: 'Rajdhani', sans-serif; font-size: clamp(0.5rem, 1vw, 0.65rem);
font-weight: 700; letter-spacing: 0.4em; text-transform: uppercase; color: #C4722A;
}
#rf-widget .rf-card-ip {
font-family: 'JetBrains Mono', monospace; font-size: clamp(0.75rem, 1.6vw, 1rem);
font-weight: 700; color: #E8D5B0; letter-spacing: 0.04em;
}
#rf-widget .rf-card-browser {
font-family: 'Rajdhani', sans-serif; font-size: clamp(0.48rem, 0.9vw, 0.6rem);
font-weight: 500; color: #4A3E32; max-width: 200px;
}
(function() {
const canvas = document.getElementById('rf-bg');
const ctx = canvas.getContext('2d');
const widget = document.getElementById('rf-widget');
let W = 0, H = 0;
function resize() {
W = canvas.width = widget.offsetWidth;
H = canvas.height = widget.offsetHeight;
}
window.addEventListener('resize', resize);
resize();
const particles = [];
const P_MAX = 100;
function spawnParticle() {
if (particles.length >= P_MAX) return;
particles.push({
x: W * 0.05 + Math.random() * W * 0.9, y: H + 8,
vx: (Math.random() - 0.5) * 1.1, vy: -(Math.random() * 2.4 + 0.7),
r: Math.random() * 3.2 + 0.5, life: 1,
decay: 0.003 + Math.random() * 0.006,
hue: 8 + Math.random() * 28, lum: 50 + Math.random() * 22,
wb: Math.random() * Math.PI * 2, wbs: 0.03 + Math.random() * 0.04,
});
}
let gPhase = 0, frameTick = 0;
function drawFrame() {
frameTick++;
gPhase += 0.016;
const sky = ctx.createLinearGradient(0, 0, 0, H);
sky.addColorStop(0, '#070403');
sky.addColorStop(0.5, '#100600');
sky.addColorStop(1, `hsl(18,75%,${5.5 + Math.sin(gPhase) * 1.5}%)`);
ctx.fillStyle = sky; ctx.fillRect(0, 0, W, H);
const gg = ctx.createRadialGradient(W * 0.5, H, 20, W * 0.5, H, W * 0.65);
gg.addColorStop(0, `rgba(255,55,0,${0.16 + Math.sin(gPhase * 1.4) * 0.05})`);
gg.addColorStop(0.5, `rgba(200,25,0,${0.05 + Math.sin(gPhase) * 0.02})`);
gg.addColorStop(1, 'transparent');
ctx.fillStyle = gg; ctx.fillRect(0, 0, W, H);
for (let i = 0; i = 0; i--) {
const p = particles[i];
p.wb += p.wbs; p.x += p.vx + Math.sin(p.wb) * 0.35; p.y += p.vy; p.life -= p.decay;
if (p.life <= 0 || p.y {
const d = document.createElement('div');
d.className = 'rf-feat-pill' + (f.hot ? ' rf-hot' : '');
d.textContent = f.t; el.appendChild(d);
});
}
buildFeats('rf-pvp-feats', PVP);
buildFeats('rf-pve-feats', PVE);
const flashEl = document.getElementById('rf-flash');
const progFill = document.getElementById('rf-progress-fill');
const wordEl = document.getElementById('rf-word-display');
function doFlash(s = 0.32) {
flashEl.style.transition = 'none'; flashEl.style.opacity = s;
requestAnimationFrame(() => requestAnimationFrame(() => {
flashEl.style.transition = 'opacity 0.22s ease-out'; flashEl.style.opacity = '0';
}));
}
function showScene(id) {
document.querySelectorAll('#rf-widget .rf-scene').forEach(s => s.classList.remove('rf-visible'));
if (id) document.getElementById(id).classList.add('rf-visible');
}
function revealFeats(cid, delay = 0) {
document.querySelectorAll('#' + cid + ' .rf-feat-pill').forEach((p, i) => {
setTimeout(() => p.classList.add('rf-shown'), delay + i * 72);
});
}
function resetFeats(cid) {
document.querySelectorAll('#' + cid + ' .rf-feat-pill').forEach(p => {
p.style.transition = 'none'; p.classList.remove('rf-shown');
void p.offsetWidth; p.style.transition = '';
});
}
const WORDS = ['BUILD','RAID','FIGHT','SURVIVE','CONQUER'];
const WORD_STEP = 650;
function runWords(arr, i, done) {
if (i >= arr.length) { done(); return; }
doFlash(0.22); wordEl.className = ''; wordEl.textContent = arr[i];
void wordEl.offsetWidth; wordEl.className = 'rf-pop';
setTimeout(() => runWords(arr, i + 1, done), WORD_STEP);
}
const DUR = { logo:3000, words:WORDS.length*WORD_STEP+250, pvp:4600, pve:4600, connect:5200, black:1400 };
const TOTAL_MS = DUR.logo + DUR.words + DUR.pvp + DUR.pve + DUR.connect;
let loopStart = null, rafProg = null;
function tickProgress(now) {
if (!loopStart) loopStart = now;
const pct = Math.min((now - loopStart) / TOTAL_MS * 100, 100);
progFill.style.width = pct + '%';
if (pct { doFlash(0.28); showScene('rf-s-words'); runWords(WORDS, 0, ()=>{}); }, t);
t += DUR.words;
setTimeout(() => { doFlash(0.38); resetFeats('rf-pvp-feats'); showScene('rf-s-pvp'); revealFeats('rf-pvp-feats', 80); }, t);
t += DUR.pvp;
setTimeout(() => { doFlash(0.38); resetFeats('rf-pve-feats'); showScene('rf-s-pve'); revealFeats('rf-pve-feats', 80); }, t);
t += DUR.pve;
setTimeout(() => { doFlash(0.4); showScene('rf-s-connect'); }, t);
t += DUR.connect;
setTimeout(() => {
showScene(null);
progFill.style.transition = 'none'; progFill.style.width = '0%';
void progFill.offsetWidth; progFill.style.transition = 'width 0.08s linear';
setTimeout(runTrailer, DUR.black);
}, t);
}
runTrailer();
})();