@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html,body{
  height:100%;
  overflow:hidden;
}

body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#fff;
  background:#0e2a5e;
}

/* ── FULLSCREEN SCENE ── */
.scene{
  position:relative;
  width:100vw;
  height:100vh;
  background:url('assets/bg.jpg') center center / cover no-repeat;
}

/* ── PLATE ZONE (future video placeholder) ── */
.plate-zone{
  position:absolute;
  top:18%;
  left:18%;
  width:64%;
  height:54%;
  /* Empty and transparent now.
     Future: add <video> with elliptical mask here.
     ─────────────────────────────────────────────
     .plate-zone video{
       width:100%;
       height:100%;
       object-fit:cover;
       clip-path:ellipse(50% 50% at 50% 50%);
     }
     JS: mouseenter → video.play(), mouseleave → video.pause()
     ───────────────────────────────────────────── */
}

/* ── NAV LINKS ── */
.nav-links{
  position:absolute;
  bottom:22%;
  left:0;
  width:100%;
  display:block;
}

.nav-links a{
  position:absolute;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(255,255,255,0.55);
  text-decoration:none;
  font-size:clamp(11px, 1.1vw, 14px);
  font-weight:300;
  letter-spacing:0.08em;
  transition:opacity 0.2s ease, text-decoration 0.2s ease;
  cursor:pointer;
}

.nav-links a:nth-child(1){ left:21.5%; }
.nav-links a:nth-child(2){ left:50%; }
.nav-links a:nth-child(3){ left:78.5%; }

.nav-links a:hover{
  opacity:1;
  color:#fff;
  text-decoration:underline;
  text-underline-offset:4px;
}

/* ── RESPONSIVE ── */

/* Tablets */
@media(max-width:768px){
  .nav-links a{
    font-size:12px;
  }
}

/* Small phones */
@media(max-width:480px){
  .nav-links{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    position:absolute;
    bottom:8%;
    left:0;
    width:100%;
  }
  .nav-links a{
    position:static;
    transform:none;
    font-size:13px;
  }
}