.elementor-kit-5{--e-global-color-primary:#9C0000;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-container{--container-max-width:1140px;}.elementor-widget:not(:last-child){margin-bottom:20px;}.elementor-element{--widgets-spacing:20px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-container{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-container{--container-max-width:767px;}}/* Start custom CSS */.elementor-heading-title { color: #FF5C00 !important; }
.elementor-widget-divider .elementor-divider-separator { border-color: #FF5C00 !important; }
.elementor-button { background-color: #FF5C00 !important; border-color: #FF5C00 !important; }

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@700&display=swap');

/* === RUSTYFIRE CINEMATIC TRAILER — CSS ONLY === */
/* Cycle: 23s total */
#rf2 {
  position: relative; width: 100%; height: 500px;
  overflow: hidden; background: #070403;
  font-family: 'Bebas Neue', Impact, sans-serif;
}
/* Fire gradient background */
#rf2-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(255,60,0,0.22) 0%, rgba(200,20,0,0.06) 50%, transparent 75%),
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(0,0,0,0.75) 100%);
  animation: rf2-bg-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes rf2-bg-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25) hue-rotate(5deg); }
}
/* Scanlines */
#rf2-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
}
/* Vignette */
#rf2-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(0,0,0,0.72) 100%);
}
/* Progress bar */
#rf2-prog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
#rf2-prog-fill {
  height: 100%; width: 100%;
  background: #FF5C00; box-shadow: 0 0 10px #FF5C00;
  transform: translateX(-100%);
  animation: rf2-progress 23s linear infinite;
}
@keyframes rf2-progress {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

/* === SCENES === */
/* Timing (23s cycle):
   0.0s – 3.0s  : Logo         (0%–13%)
   3.0s – 6.75s : Words        (13%–29.3%)
   6.75s – 11.4s: PvP          (29.3%–49.6%)
   11.4s – 16.0s: PvE          (49.6%–69.6%)
   16.0s – 21.2s: Connect      (69.6%–92.2%)
   21.2s – 23.0s: Black        (92.2%–100%)
*/
.rf2-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-inline: clamp(16px, 6vw, 80px);
  opacity: 0;
  animation-duration: 23s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* SCENE 1: LOGO */
#rf2-s-logo { animation-name: rf2-show-logo; }
@keyframes rf2-show-logo {
  0%   { opacity: 1; }
  12%  { opacity: 1; }
  14%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 2: WORDS */
#rf2-s-words { animation-name: rf2-show-words; }
@keyframes rf2-show-words {
  13% { opacity: 0; }
  14% { opacity: 1; }
  28% { opacity: 1; }
  30% { opacity: 0; }
  100%{ opacity: 0; }
}

/* SCENE 3: PVP */
#rf2-s-pvp { animation-name: rf2-show-pvp; }
@keyframes rf2-show-pvp {
  29%  { opacity: 0; }
  30%  { opacity: 1; }
  48%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 4: PVE */
#rf2-s-pve { animation-name: rf2-show-pve; }
@keyframes rf2-show-pve {
  49%  { opacity: 0; }
  50%  { opacity: 1; }
  68%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 5: CONNECT */
#rf2-s-con { animation-name: rf2-show-con; }
@keyframes rf2-show-con {
  69%  { opacity: 0; }
  70%  { opacity: 1; }
  91%  { opacity: 1; }
  93%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === LOGO SCENE STYLES === */
.rf2-logo-mark {
  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;
  animation: rf2-logo-pop 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.rf2-logo-mark em { font-style: normal; color: #FF2800; }
@keyframes rf2-logo-pop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.rf2-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;
  animation: rf2-fade-in 0.8s 0.4s ease both;
}
@keyframes rf2-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* === WORD SCENE STYLES === */
.rf2-word {
  position: absolute;
  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);
  opacity: 0;
  animation-duration: 23s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* Word timings within the 3s–6.75s window (13%–29.3%)
   Each word: 0.65s display, gap 0.1s
   W1 BUILD:   3.0-3.75s = 13.0%-16.3%
   W2 RAID:    3.75-4.5s = 16.3%-19.6%
   W3 FIGHT:   4.5-5.25s = 19.6%-22.8%
   W4 SURVIVE: 5.25-6.0s = 22.8%-26.1%
   W5 CONQUER: 6.0-6.75s = 26.1%-29.3%
*/
#rf2-w1 { animation-name: rf2-word1; }
#rf2-w2 { animation-name: rf2-word2; }
#rf2-w3 { animation-name: rf2-word3; }
#rf2-w4 { animation-name: rf2-word4; }
#rf2-w5 { animation-name: rf2-word5; }

@keyframes rf2-word1 {
  12.9%{ opacity:0; transform:scale(0.35); }
  14.0%{ opacity:1; transform:scale(1.07); }
  15.5%{ transform:scale(1); opacity:1; }
  16.2%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word2 {
  16.2%{ opacity:0; transform:scale(0.35); }
  17.3%{ opacity:1; transform:scale(1.07); }
  18.8%{ transform:scale(1); opacity:1; }
  19.5%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word3 {
  19.5%{ opacity:0; transform:scale(0.35); }
  20.6%{ opacity:1; transform:scale(1.07); }
  22.1%{ transform:scale(1); opacity:1; }
  22.8%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word4 {
  22.8%{ opacity:0; transform:scale(0.35); }
  23.9%{ opacity:1; transform:scale(1.07); }
  25.4%{ transform:scale(1); opacity:1; }
  26.1%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word5 {
  26.1%{ opacity:0; transform:scale(0.35); }
  27.2%{ opacity:1; transform:scale(1.07); }
  28.7%{ transform:scale(1); opacity:1; }
  29.3%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}

/* === SERVER PANEL STYLES === */
.rf2-server-panel { width: min(700px, 85vw); }
.rf2-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;
}
.rf2-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);
}
.rf2-divider {
  height: 1px;
  background: linear-gradient(to right, #FF5C00 0%, rgba(255,92,0,0.15) 60%, transparent 100%);
  margin-bottom: 0.9rem;
}
.rf2-feat-grid { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; }
.rf2-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;
  animation-duration: 23s; animation-iteration-count: infinite; animation-fill-mode: both;
}
.rf2-feat-pill.rf2-hot { color: #FF5C00; border-color: rgba(255,92,0,0.55); background: rgba(255,92,0,0.11); }

/* PvP pills appear during pvp scene (29.3%-49.6%) */
.rf2-pvp-pill { animation-name: rf2-pvp-pill; }
.rf2-pvp-pill:nth-child(1)  { animation-delay: calc(23s * 0.302); }
.rf2-pvp-pill:nth-child(2)  { animation-delay: calc(23s * 0.307); }
.rf2-pvp-pill:nth-child(3)  { animation-delay: calc(23s * 0.312); }
.rf2-pvp-pill:nth-child(4)  { animation-delay: calc(23s * 0.317); }
.rf2-pvp-pill:nth-child(5)  { animation-delay: calc(23s * 0.322); }
.rf2-pvp-pill:nth-child(6)  { animation-delay: calc(23s * 0.327); }
.rf2-pvp-pill:nth-child(7)  { animation-delay: calc(23s * 0.332); }
.rf2-pvp-pill:nth-child(8)  { animation-delay: calc(23s * 0.337); }
.rf2-pvp-pill:nth-child(9)  { animation-delay: calc(23s * 0.342); }
.rf2-pvp-pill:nth-child(10) { animation-delay: calc(23s * 0.347); }
.rf2-pvp-pill:nth-child(11) { animation-delay: calc(23s * 0.352); }

@keyframes rf2-pvp-pill {
  0%   { opacity: 0; transform: translateY(5px); }
  /* pill shows right after delay and fades with scene */
  0.1% { opacity: 1; transform: translateY(0); }
  19%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* PvE pills appear during pve scene (49.6%-69.6%) */
.rf2-pve-pill { animation-name: rf2-pve-pill; }
.rf2-pve-pill:nth-child(1)  { animation-delay: calc(23s * 0.502); }
.rf2-pve-pill:nth-child(2)  { animation-delay: calc(23s * 0.507); }
.rf2-pve-pill:nth-child(3)  { animation-delay: calc(23s * 0.512); }
.rf2-pve-pill:nth-child(4)  { animation-delay: calc(23s * 0.517); }
.rf2-pve-pill:nth-child(5)  { animation-delay: calc(23s * 0.522); }
.rf2-pve-pill:nth-child(6)  { animation-delay: calc(23s * 0.527); }
.rf2-pve-pill:nth-child(7)  { animation-delay: calc(23s * 0.532); }
.rf2-pve-pill:nth-child(8)  { animation-delay: calc(23s * 0.537); }
.rf2-pve-pill:nth-child(9)  { animation-delay: calc(23s * 0.542); }
.rf2-pve-pill:nth-child(10) { animation-delay: calc(23s * 0.547); }
.rf2-pve-pill:nth-child(11) { animation-delay: calc(23s * 0.552); }
.rf2-pve-pill:nth-child(12) { animation-delay: calc(23s * 0.557); }
.rf2-pve-pill:nth-child(13) { animation-delay: calc(23s * 0.562); }

@keyframes rf2-pve-pill {
  0%   { opacity: 0; transform: translateY(5px); }
  0.1% { opacity: 1; transform: translateY(0); }
  18%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === CONNECT SCENE === */
.rf2-connect-logo {
  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;
  text-align: center;
}
.rf2-connect-logo em { color: #FF2800; font-style: normal; }
.rf2-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 1.3rem); letter-spacing: 0.3em; color: #8A7A65;
  text-align: center; margin-top: 0.8rem;
}
.rf2-cards { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
.rf2-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);
}
.rf2-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;
}
.rf2-card-ip {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(0.75rem, 1.6vw, 1rem);
  font-weight: 700; color: #E8D5B0; letter-spacing: 0.04em;
}
.rf2-card-browser {
  font-family: 'Rajdhani', sans-serif; font-size: clamp(0.48rem, 0.9vw, 0.6rem);
  font-weight: 500; color: #4A3E32; max-width: 200px; text-align: center;
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Rajdhani:wght@500;600;700&family=JetBrains+Mono:wght@700&display=swap');

/* === RUSTYFIRE CINEMATIC TRAILER — CSS ONLY === */
/* Cycle: 23s total */
#rf2 {
  position: relative; width: 100%; height: 500px;
  overflow: hidden; background: #070403;
  font-family: 'Bebas Neue', Impact, sans-serif;
}
/* Fire gradient background */
#rf2-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 100%, rgba(255,60,0,0.22) 0%, rgba(200,20,0,0.06) 50%, transparent 75%),
    radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(0,0,0,0.75) 100%);
  animation: rf2-bg-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes rf2-bg-pulse {
  from { filter: brightness(1); }
  to   { filter: brightness(1.25) hue-rotate(5deg); }
}
/* Scanlines */
#rf2-scan {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.45;
  background: repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.07) 2px, rgba(0,0,0,0.07) 4px);
}
/* Vignette */
#rf2-vig {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 80% 75% at 50% 50%, transparent 30%, rgba(0,0,0,0.72) 100%);
}
/* Progress bar */
#rf2-prog {
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: rgba(255,255,255,0.07);
  overflow: hidden;
}
#rf2-prog-fill {
  height: 100%; width: 100%;
  background: #FF5C00; box-shadow: 0 0 10px #FF5C00;
  transform: translateX(-100%);
  animation: rf2-progress 23s linear infinite;
}
@keyframes rf2-progress {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0%); }
}

/* === SCENES === */
/* Timing (23s cycle):
   0.0s – 3.0s  : Logo         (0%–13%)
   3.0s – 6.75s : Words        (13%–29.3%)
   6.75s – 11.4s: PvP          (29.3%–49.6%)
   11.4s – 16.0s: PvE          (49.6%–69.6%)
   16.0s – 21.2s: Connect      (69.6%–92.2%)
   21.2s – 23.0s: Black        (92.2%–100%)
*/
.rf2-scene {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding-inline: clamp(16px, 6vw, 80px);
  opacity: 0;
  animation-duration: 23s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

/* SCENE 1: LOGO */
#rf2-s-logo { animation-name: rf2-show-logo; }
@keyframes rf2-show-logo {
  0%   { opacity: 1; }
  12%  { opacity: 1; }
  14%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 2: WORDS */
#rf2-s-words { animation-name: rf2-show-words; }
@keyframes rf2-show-words {
  13% { opacity: 0; }
  14% { opacity: 1; }
  28% { opacity: 1; }
  30% { opacity: 0; }
  100%{ opacity: 0; }
}

/* SCENE 3: PVP */
#rf2-s-pvp { animation-name: rf2-show-pvp; }
@keyframes rf2-show-pvp {
  29%  { opacity: 0; }
  30%  { opacity: 1; }
  48%  { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 4: PVE */
#rf2-s-pve { animation-name: rf2-show-pve; }
@keyframes rf2-show-pve {
  49%  { opacity: 0; }
  50%  { opacity: 1; }
  68%  { opacity: 1; }
  70%  { opacity: 0; }
  100% { opacity: 0; }
}

/* SCENE 5: CONNECT */
#rf2-s-con { animation-name: rf2-show-con; }
@keyframes rf2-show-con {
  69%  { opacity: 0; }
  70%  { opacity: 1; }
  91%  { opacity: 1; }
  93%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === LOGO SCENE STYLES === */
.rf2-logo-mark {
  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;
  animation: rf2-logo-pop 0.6s cubic-bezier(0.16,1,0.3,1) both;
}
.rf2-logo-mark em { font-style: normal; color: #FF2800; }
@keyframes rf2-logo-pop {
  from { transform: scale(0.3); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.rf2-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;
  animation: rf2-fade-in 0.8s 0.4s ease both;
}
@keyframes rf2-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* === WORD SCENE STYLES === */
.rf2-word {
  position: absolute;
  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);
  opacity: 0;
  animation-duration: 23s;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
/* Word timings within the 3s–6.75s window (13%–29.3%)
   Each word: 0.65s display, gap 0.1s
   W1 BUILD:   3.0-3.75s = 13.0%-16.3%
   W2 RAID:    3.75-4.5s = 16.3%-19.6%
   W3 FIGHT:   4.5-5.25s = 19.6%-22.8%
   W4 SURVIVE: 5.25-6.0s = 22.8%-26.1%
   W5 CONQUER: 6.0-6.75s = 26.1%-29.3%
*/
#rf2-w1 { animation-name: rf2-word1; }
#rf2-w2 { animation-name: rf2-word2; }
#rf2-w3 { animation-name: rf2-word3; }
#rf2-w4 { animation-name: rf2-word4; }
#rf2-w5 { animation-name: rf2-word5; }

@keyframes rf2-word1 {
  12.9%{ opacity:0; transform:scale(0.35); }
  14.0%{ opacity:1; transform:scale(1.07); }
  15.5%{ transform:scale(1); opacity:1; }
  16.2%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word2 {
  16.2%{ opacity:0; transform:scale(0.35); }
  17.3%{ opacity:1; transform:scale(1.07); }
  18.8%{ transform:scale(1); opacity:1; }
  19.5%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word3 {
  19.5%{ opacity:0; transform:scale(0.35); }
  20.6%{ opacity:1; transform:scale(1.07); }
  22.1%{ transform:scale(1); opacity:1; }
  22.8%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word4 {
  22.8%{ opacity:0; transform:scale(0.35); }
  23.9%{ opacity:1; transform:scale(1.07); }
  25.4%{ transform:scale(1); opacity:1; }
  26.1%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}
@keyframes rf2-word5 {
  26.1%{ opacity:0; transform:scale(0.35); }
  27.2%{ opacity:1; transform:scale(1.07); }
  28.7%{ transform:scale(1); opacity:1; }
  29.3%{ opacity:0; }
  100% { opacity:0; transform:scale(0.35); }
}

/* === SERVER PANEL STYLES === */
.rf2-server-panel { width: min(700px, 85vw); }
.rf2-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;
}
.rf2-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);
}
.rf2-divider {
  height: 1px;
  background: linear-gradient(to right, #FF5C00 0%, rgba(255,92,0,0.15) 60%, transparent 100%);
  margin-bottom: 0.9rem;
}
.rf2-feat-grid { display: flex; flex-wrap: wrap; gap: 0.35rem 0.45rem; }
.rf2-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;
  animation-duration: 23s; animation-iteration-count: infinite; animation-fill-mode: both;
}
.rf2-feat-pill.rf2-hot { color: #FF5C00; border-color: rgba(255,92,0,0.55); background: rgba(255,92,0,0.11); }

/* PvP pills appear during pvp scene (29.3%-49.6%) */
.rf2-pvp-pill { animation-name: rf2-pvp-pill; }
.rf2-pvp-pill:nth-child(1)  { animation-delay: calc(23s * 0.302); }
.rf2-pvp-pill:nth-child(2)  { animation-delay: calc(23s * 0.307); }
.rf2-pvp-pill:nth-child(3)  { animation-delay: calc(23s * 0.312); }
.rf2-pvp-pill:nth-child(4)  { animation-delay: calc(23s * 0.317); }
.rf2-pvp-pill:nth-child(5)  { animation-delay: calc(23s * 0.322); }
.rf2-pvp-pill:nth-child(6)  { animation-delay: calc(23s * 0.327); }
.rf2-pvp-pill:nth-child(7)  { animation-delay: calc(23s * 0.332); }
.rf2-pvp-pill:nth-child(8)  { animation-delay: calc(23s * 0.337); }
.rf2-pvp-pill:nth-child(9)  { animation-delay: calc(23s * 0.342); }
.rf2-pvp-pill:nth-child(10) { animation-delay: calc(23s * 0.347); }
.rf2-pvp-pill:nth-child(11) { animation-delay: calc(23s * 0.352); }

@keyframes rf2-pvp-pill {
  0%   { opacity: 0; transform: translateY(5px); }
  /* pill shows right after delay and fades with scene */
  0.1% { opacity: 1; transform: translateY(0); }
  19%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* PvE pills appear during pve scene (49.6%-69.6%) */
.rf2-pve-pill { animation-name: rf2-pve-pill; }
.rf2-pve-pill:nth-child(1)  { animation-delay: calc(23s * 0.502); }
.rf2-pve-pill:nth-child(2)  { animation-delay: calc(23s * 0.507); }
.rf2-pve-pill:nth-child(3)  { animation-delay: calc(23s * 0.512); }
.rf2-pve-pill:nth-child(4)  { animation-delay: calc(23s * 0.517); }
.rf2-pve-pill:nth-child(5)  { animation-delay: calc(23s * 0.522); }
.rf2-pve-pill:nth-child(6)  { animation-delay: calc(23s * 0.527); }
.rf2-pve-pill:nth-child(7)  { animation-delay: calc(23s * 0.532); }
.rf2-pve-pill:nth-child(8)  { animation-delay: calc(23s * 0.537); }
.rf2-pve-pill:nth-child(9)  { animation-delay: calc(23s * 0.542); }
.rf2-pve-pill:nth-child(10) { animation-delay: calc(23s * 0.547); }
.rf2-pve-pill:nth-child(11) { animation-delay: calc(23s * 0.552); }
.rf2-pve-pill:nth-child(12) { animation-delay: calc(23s * 0.557); }
.rf2-pve-pill:nth-child(13) { animation-delay: calc(23s * 0.562); }

@keyframes rf2-pve-pill {
  0%   { opacity: 0; transform: translateY(5px); }
  0.1% { opacity: 1; transform: translateY(0); }
  18%  { opacity: 1; }
  20%  { opacity: 0; }
  100% { opacity: 0; }
}

/* === CONNECT SCENE === */
.rf2-connect-logo {
  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;
  text-align: center;
}
.rf2-connect-logo em { color: #FF2800; font-style: normal; }
.rf2-tagline {
  font-family: 'Rajdhani', sans-serif;
  font-size: clamp(0.75rem, 1.8vw, 1.3rem); letter-spacing: 0.3em; color: #8A7A65;
  text-align: center; margin-top: 0.8rem;
}
.rf2-cards { display: flex; gap: 1.2rem; flex-wrap: wrap; justify-content: center; margin-top: 1.2rem; }
.rf2-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);
}
.rf2-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;
}
.rf2-card-ip {
  font-family: 'JetBrains Mono', monospace; font-size: clamp(0.75rem, 1.6vw, 1rem);
  font-weight: 700; color: #E8D5B0; letter-spacing: 0.04em;
}
.rf2-card-browser {
  font-family: 'Rajdhani', sans-serif; font-size: clamp(0.48rem, 0.9vw, 0.6rem);
  font-weight: 500; color: #4A3E32; max-width: 200px; text-align: center;
}/* End custom CSS */