/* ════════════════════════════════
   INTRO.CSS
════════════════════════════════ */

body { background: #060608; overflow: hidden; }

.intro-grid {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
  pointer-events: none;
}

/* ── ORBS ── */
.intro-orb {
  position: fixed; border-radius: 50%; filter: blur(120px);
  animation: orbFloat 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.intro-orb.o1 { width:600px;height:600px;background:radial-gradient(circle,#7B5EA7 0%,transparent 70%);top:-100px;left:-100px;opacity:.3;animation-duration:12s; }
.intro-orb.o2 { width:500px;height:500px;background:radial-gradient(circle,#C94F2C 0%,transparent 70%);bottom:-80px;right:-80px;opacity:.25;animation-delay:-4s; }
.intro-orb.o3 { width:300px;height:300px;background:radial-gradient(circle,#6AAF00 0%,transparent 70%);top:40%;left:55%;opacity:.15;animation-delay:-7s; }

/* ── CONTENT ── */
.intro-content {
  position: relative; z-index: 2;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 24px;
}

.intro-eyebrow {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: .3em; text-transform: uppercase;
  color: rgba(255,255,255,.35); margin-bottom: 32px;
  opacity: 0; animation: fadeUp .6s .3s forwards;
}

.intro-name {
  font-family: 'Bebas Neue', sans-serif;
  font-size: clamp(72px,13vw,180px);
  line-height: .85; letter-spacing: .04em; color: #fff;
  margin-bottom: 8px;
  opacity: 0; animation: fadeUp .8s .5s forwards;
}
.intro-name span {
  display: block; color: transparent;
  -webkit-text-stroke: 1px rgba(255,255,255,.2);
  font-size: .42em; font-family: 'Cormorant Garamond', serif;
  font-style: italic; font-weight: 300; letter-spacing: .1em;
}

.intro-tagline {
  font-size: 15px; font-weight: 300; color: rgba(255,255,255,.4);
  letter-spacing: .08em; margin-bottom: 64px;
  opacity: 0; animation: fadeUp .7s .7s forwards;
}

/* ── WORLD BUTTONS ── */
.worlds {
  display: flex; gap: 10px;
  opacity: 0; animation: fadeUp .8s .9s forwards;
}
.world-btn {
  position: relative; overflow: hidden;
  width: 220px; height: 64px;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255, 255, 255, 0.859);
  font-family: 'Space Mono', monospace; font-size: 13px;
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; cursor: none; transition: all .3s;
  box-shadow: #fff 0 0 10px 0 inset; /* for hover effect */
}
.world-btn .wb-icon { font-size: 18px; transition: transform .3s; }
.world-btn::before {
  content: ''; position: absolute; inset: 0; opacity: 0; transition: opacity .4s;
}
.world-btn.wb-dev::before { background: linear-gradient(135deg,rgba(0,255,136,.06),rgba(0,200,255,.06)); }
.world-btn.wb-art::before { background: linear-gradient(135deg,rgba(255,100,100,.08),rgba(255,200,50,.06)); }
.world-btn.wb-vid::before { background: linear-gradient(135deg,rgba(180,0,255,.06),rgba(255,50,150,.06)); }
.world-btn:hover { color: #fff; border-color: rgba(255,255,255,.3); }
.world-btn:hover::before { opacity: 1; }
.world-btn:hover .wb-icon { transform: scale(1.2) rotate(-5deg); }
.world-btn.wb-dev:hover { border-color: #00ff88; color: #00ff88; }
.world-btn.wb-art:hover { border-color: #ff9a3c; color: #ff9a3c; }
.world-btn.wb-vid:hover { border-color: #c44eff; color: #c44eff; }

.intro-hint {
  position: fixed; bottom: 36px;
  font-family: 'Space Mono', monospace; font-size: 9px;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.2);
  opacity: 0; animation: fadeUp .6s 1.4s forwards;
}

/* ════ TABLET ════ */
@media(max-width:1024px) {
  .intro-name { font-size: clamp(60px,11vw,130px); }
  .world-btn { width: 170px; height: 58px; }
}
/* ════ MOBILE ════ */
@media(max-width:768px) {
  .intro-name { font-size: clamp(52px,14vw,90px); }
  .intro-tagline { margin-bottom: 48px; }
  .worlds { flex-direction: column; align-items: center; gap: 10px; width: 100%; }
  .world-btn { width: 100%; max-width: 360px; height: 60px; }
  .intro-orb.o1 { width:300px;height:300px; }
  .intro-orb.o2 { width:250px;height:250px; }
  .intro-orb.o3 { display:none; }
}
/* ════ SMALL PHONES ════ */
@media(max-width:430px) {
  .intro-name { font-size: clamp(40px,15vw,64px); }
  .world-btn { height: 56px; font-size: 9px; }
}