:root {
      --bg-dark:#0a0a0a;
      --bg-panel:#141414;
      --accent:#ff3c00;
      --light:#f5f5f5;
      --hover:#ff6b00;
      --shadow:0 0 25px rgba(255,60,0,0.35);
    }
    * {box-sizing:border-box;margin:0;padding:0}
    body {
      font-family:"Rubik",sans-serif;
      background:var(--bg-dark);
      color:var(--light);
      overflow-x:hidden;
      position:relative;
    }
    #particles {
      position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;
    }

    /* Header */
    header {
      text-align:center;
      padding:5rem 1rem 3rem;
      background:linear-gradient(180deg,#1a0000 0%,#0a0a0a 80%);
      position:relative;z-index:1;
      
    }
    header h1 {
      font-family:"Press Start 2P",cursive;
      color:var(--accent);
      text-shadow:var(--shadow);
      font-size:2.2rem;
      animation: slideInFromTop 0.9s ease-out;
    }
    header p {margin-top:1rem;font-size:1.05rem;color:#ddd}

    /* Layout */
    section {max-width:1200px;margin:0 auto;padding:3rem 1rem;position:relative;z-index:1;animation: element-slide 1s both;animation-timeline: view();animation-range: entry 0% cover 32%;}
    .cards {display:flex;flex-wrap:wrap;justify-content:center;gap:1.25rem}
    .card {
      background:var(--bg-panel);
      border:1px solid #222;padding:1.6rem;border-radius:12px;
      flex:1 1 280px;text-align:center;transition:.25s;
    }
    .card:hover {transform:translateY(-6px);box-shadow:var(--shadow)}
    .card h3 {color:var(--accent);margin-bottom:0.6rem}
    #entering {
      max-width:1200px;margin:0 auto;padding:3rem 1rem;position:relative;z-index:1;animation: slideInFromTop 0.9s ease-out;
    }
    /* Buttons */
    .btn {
      display:inline-block;margin:0.35rem;padding:0.7rem 1.2rem;background:var(--accent);
      color:#fff;border-radius:8px;text-decoration:none;font-weight:700;position:relative;overflow:hidden;
      transition:transform .18s ease, box-shadow .25s ease;
    }
    .btn::before {
      content:"";position:absolute;top:0;left:-75%;width:50%;height:100%;
      background:linear-gradient(120deg,rgba(255,255,255,0.35),transparent);transform:skewX(-20deg);
      transition:left .4s ease;
    }
    .btn:hover::before {left:130%}
    .btn:hover {transform:scale(1.04);box-shadow:var(--shadow);background:var(--hover)}

    /* Headings */
    h2 {color:var(--accent);text-align:center;margin-bottom:1.5rem;text-shadow:0 0 10px rgba(255,60,0,.4)}

    /* Features */
    .features-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
      gap:1rem;
    }
    .feature {
      background:var(--bg-panel);border:1px solid #222;padding:1.25rem;border-radius:12px;text-align:center;transition:.2s;
    }
    .feature:hover {transform:translateY(-6px);box-shadow:var(--shadow)}
    .feature i {display:block;font-size:1.6rem;color:var(--accent);margin-bottom:0.6rem}
    .feature strong {display:block;color:var(--accent);margin-bottom:0.35rem}

    /* Map */
    .map-section {text-align:center;margin-top:1.5rem}
    .map-frame {
      width:100%;height:600px;border:3px solid var(--accent);border-radius:14px;overflow:hidden;
      box-shadow:0 0 25px rgba(255,60,0,0.35);animation:glow 2s infinite alternate;
    }
    @keyframes glow {
      from {box-shadow:0 0 12px rgba(255,60,0,0.25)}
      to {box-shadow:0 0 30px rgba(255,80,0,0.8)}
    }

    /* Screenshots */
    .screenshots {
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
      gap:1rem;margin-top:1rem;
    }
    .screenshot {
      position:relative;overflow:hidden;border-radius:10px;border:2px solid #222;
      cursor:pointer;transition:transform .25s ease, box-shadow .25s ease;
    }
    .screenshot img {
      width:100%;height:170px;object-fit:cover;border-radius:8px;transition:transform .3s ease;
    }
    .screenshot:hover img {transform:scale(1.05);}

    /* Lightbox */
    #lightbox {
      position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);
      display:none;align-items:center;justify-content:center;z-index:9999;
    }
    #lightbox img {max-width:90%;max-height:90%;border-radius:10px;box-shadow:0 0 40px rgba(255,60,0,0.5);}
    #lightbox-close {
      position:absolute;top:20px;right:30px;font-size:3rem;color:#fff;cursor:pointer;
      user-select:none;transition:color .2s;
    }
    #lightbox-close:hover {color:#ff3c00}

    /* Staff */
    .staff {margin-top:2.5rem;text-align:center}
    .staff-members {display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}
    .member {
      background:var(--bg-panel);width:150px;padding:1rem;border-radius:12px;transition:.2s;
    }
    .member:hover {transform:translateY(-6px);box-shadow:var(--shadow)}
    .member img {
      width:90px;height:90px;border-radius:8px;margin-bottom:0.6rem;
      border:2px solid var(--accent);display:block;margin-left:auto;margin-right:auto;
    }
    .member strong {display:block;color:var(--accent);margin-bottom:2px}
    .member span {color:#cfd8dc;font-size:.9rem}

    /* Footer */
    footer {
      text-align:center;padding:2rem;border-top:1px solid #222;color:#bbb;margin-top:2rem;
    }

    /* Responsive */
    @media (max-width:640px){
      header{padding:3.5rem 1rem 2rem}
      .map-frame{height:360px}
      .screenshot img{height:140px}
    }
.vanity {
  position: absolute;
  top: 120px;
  right: 70px;
  width: 80px;
  height: 80px;
  z-index: 3;
  scale: 0.7;
 animation: slideInFromLeft 0.5s ease-out;

}
.vanity2 {
  position: absolute;
  top: 1100px;
  right: 210px;
  width: 60px;
  height: 90px;
  z-index: 3;
  scale: 0.6;
 animation: slideInFromLeft 0.5s both;
 animation-timeline: view();
 animation-range: entry 0% cover 30%;

}

@keyframes slideInFromLeft {
  from {
    transform: translateX(260%); /* start far left off-screen */
    opacity: 0.5;
  }
  to {
    transform: translateX(0); /* end in normal position */
    opacity: 1;
  }
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-100%); /* start above the screen */
    opacity: 0;
    letter-spacing: 4px;

  }
  to {
    transform: translateY(0); /* end in normal position */
    opacity: 1;
    letter-spacing: 0px;

  }
}

@keyframes element-slide {
  from {
    transform: translateX(2200%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}